Scribd Logo
Upload

Welcome to Scribd!

  • Mouse Event Code PDF

    Uploaded by

    Muhaiminul Ahsun
    12 views5 pages
    The document describes a WebGL program that renders a 3D cube and applies rotation transformations to it. It defines vertex and fragment shaders to render the cube faces with different colors. It creates 3D coordinate and color buffers to populate the cube. Matrices are used to represent rotation transformations around the X and Y axes, which are applied to vertices through uniforms before drawing the cube with indices. The program initializes WebGL, compiles and links the shaders, and sets up attribute locations and buffers to repeatedly draw the transformed cube.

    Original Description:

    Original Title

    Mouse event Code.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes a WebGL program that renders a 3D cube and applies rotation transformations to it. It defines vertex and fragment shaders to render the cube faces with different colors. It creates 3D coordinate and color buffers to populate the cube. Matrices are used to represent rotation transformations around the X and Y axes, which are applied to vertices through uniforms before drawing the cube with indices. The program initializes WebGL, compiles and links the shaders, and sets up attribute locations and buffers to repeatedly draw the transformed cube.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views5 pages

    Mouse Event Code PDF

    Uploaded by

    Muhaiminul Ahsun
    The document describes a WebGL program that renders a 3D cube and applies rotation transformations to it. It defines vertex and fragment shaders to render the cube faces with different colors. It creates 3D coordinate and color buffers to populate the cube. Matrices are used to represent rotation transformations around the X and Y axes, which are applied to vertices through uniforms before drawing the cube with indices. The program initializes WebGL, compiles and links the shaders, and sets up attribute locations and buffers to repeatedly draw the transformed cube.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    <!

    -- saved from url=


    (0065)http://math.hws.edu/graphicsbook/source/webgl/simple-
    texture.html -->

    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>LAB-4: Transformation Matrix - 1</title>


    <canvas id="webglcanvas" width="500" height="500"></canvas>

    <script>

    var canvas = document.getElementById('webglcanvas');

    var vertexShaderSource =

    `attribute vec3 a_coords;


    attribute vec3 a_colors;
    uniform mat4 u_Rx;
    uniform mat4 u_Ry;
    varying vec3 v_color;

    void main() {
    gl_Position = u_Ry*u_Rx*vec4(a_coords, 1.0);
    v_color = a_colors;
    }`;

    var fragmentShaderSource =

    `precision mediump float;


    varying vec3 v_color;
    void main() {
    gl_FragColor = vec4(v_color, 1.0);
    }`;

    var gl;
    var a_coords_location;
    var a_coords_buffer;
    var a_colors_location;
    var a_colors_buffer;

    var bufferInd;

    var u_matrix_rotateX_location;
    var u_matrix_rotateY_location;

    var thetaX = 35;


    var thetaY = -20;

    function draw() {

    gl.clearColor(0.0,0.0,0.0,1);
    gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.CULL_FACE);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    var coords = new Float32Array([ // Front face
    -0.5, -0.5, 0.5,//0
    0.5, -0.5, 0.5,//1
    0.5, 0.5, 0.5,//2
    -0.5, 0.5, 0.5,//3
    //0, 1, 2, 0, 2, 3, // Front face
    // Back face
    -0.5, -0.5, -0.5,//4
    -0.5, 0.5, -0.5,//5
    0.5, 0.5, -0.5,//6
    0.5, -0.5, -0.5,//7

    // Top face
    -0.5, 0.5, -0.5,//8
    -0.5, 0.5, 0.5,//9
    0.5, 0.5, 0.5,//10
    0.5, 0.5, -0.5,//11

    // Bottom face
    -0.5, -0.5, -0.5,//12
    0.5, -0.5, -0.5,//13
    0.5, -0.5, 0.5,//14
    -0.5, -0.5, 0.5,//15

    // Right face
    0.5, -0.5, -0.5,//16
    0.5, 0.5, -0.5,//17
    0.5, 0.5, 0.5,//18
    0.5, -0.5, 0.5,//19

    // Left face
    -0.5, -0.5, -0.5,//20
    -0.5, -0.5, 0.5,//21
    -0.5, 0.5, 0.5,//22
    -0.5, 0.5, -0.5]);//23

    var colors = new Float32Array( [


    //Front face
    1.0, 0.0, 0.0,//0

    1.0, 0.0, 0.0,//1

    1.0, 0.0, 0.0,//2

    1.0, 0.0, 0.0,//3

    //Back face

    0.0, 1.0, 0.0,//4

    0.0, 1.0, 0.0,//5

    0.0, 1.0, 0.0,//6

    0.0, 1.0, 0.0,//7


    0.0, 0.0, 1.0,//8

    0.0, 0.0, 1.0,//9

    0.0, 0.0, 1.0,//10

    0.0, 0.0, 1.0,//11

    1.0, 1.0, 0.0,//12

    1.0, 1.0, 0.0,//13

    1.0, 1.0, 0.0,//14

    1.0, 1.0, 0.0,//15

    0.0, 1.0, 1.0,//16

    0.0, 1.0, 1.0,//17

    0.0, 1.0, 1.0,//18

    0.0, 1.0, 1.0,//19

    1.0, 0.0, 1.0,//20

    1.0, 0.0, 1.0,//21

    1.0, 0.0, 1.0,//22

    1.0, 0.0, 1.0] );//23

    var indices = new Uint8Array([


    0, 1, 2, 0, 2, 3, // Front
    face
    4, 5, 6, 4, 6, 7, // Back
    face
    9, 10, 11, 9, 11, 8, // Top
    face
    12, 13, 14, 12, 14, 15, //
    Bottom face
    19, 16, 17, 19, 17, 18, // Right
    face
    20, 21, 22, 20, 22, 23 // Left
    face

    ]);

    var rad = thetaX*Math.PI/180;


    var rotateMatX = new Float32Array( [1.0, 0.0, 0.0,
    0.0,
    0.0, Math.cos(rad),
    Math.sin(rad), 0.0,
    0.0, -Math.sin(rad),
    Math.cos(rad), 0.0,
    0.0, 0.0, 0.0,
    1.0] );

    var rad = thetaY*Math.PI/180;


    var rotateMatY = new Float32Array( [Math.cos(rad), 0.0,
    Math.sin(rad), 0.0,
    0.0, 1.0, 0.0,
    0.0,
    -Math.sin(rad), 0.0,
    Math.cos(rad), 0.0,
    0.0, 0.0, 0.0,
    1.0] );

    gl.bindBuffer(gl.ARRAY_BUFFER, a_coords_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, coords, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_coords_location, 3, gl.FLOAT, false, 0,
    0);
    gl.enableVertexAttribArray(a_coords_location);

    gl.bindBuffer(gl.ARRAY_BUFFER, a_colors_buffer);
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
    gl.vertexAttribPointer(a_colors_location, 3, gl.FLOAT, false, 0,
    0);
    gl.enableVertexAttribArray(a_colors_location);

    // create indices buffer and bind them


    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferInd);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    gl.uniformMatrix4fv(u_matrix_rotateX_location, false, rotateMatX);


    gl.uniformMatrix4fv(u_matrix_rotateY_location, false, rotateMatY);

    gl.drawElements(gl.TRIANGLES, 3*12, gl.UNSIGNED_BYTE, 0);


    }

    function createProgram(gl, vertexShaderSource, fragmentShaderSource) {


    var vsh = gl.createShader( gl.VERTEX_SHADER );
    gl.shaderSource( vsh, vertexShaderSource );
    gl.compileShader( vsh );

    var fsh = gl.createShader( gl.FRAGMENT_SHADER );


    gl.shaderSource( fsh, fragmentShaderSource );
    gl.compileShader( fsh );

    var prog = gl.createProgram();


    gl.attachShader( prog, vsh );
    gl.attachShader( prog, fsh );
    gl.linkProgram( prog );

    return prog;
    }
    function initGL() {
    var prog = createProgram( gl, vertexShaderSource,
    fragmentShaderSource );
    gl.useProgram(prog);

    a_coords_location = gl.getAttribLocation(prog, "a_coords");


    a_coords_buffer = gl.createBuffer();

    a_colors_location = gl.getAttribLocation(prog, "a_colors");


    a_colors_buffer = gl.createBuffer();

    u_rotate_location = gl.getUniformLocation(prog, "u_rotate")

    bufferInd = gl.createBuffer();

    u_matrix_rotateX_location = gl.getUniformLocation(prog, "u_Rx");


    u_matrix_rotateY_location = gl.getUniformLocation(prog, "u_Ry");

    function init() {
    var canvas = document.getElementById("webglcanvas");
    gl = canvas.getContext("webgl");
    initGL();
    draw();
    }

    init();

    </script>

    </html>
    TransMat-1(b).html
    Displaying TransMat-1(b).html.

    You might also like