Scribd Logo
Upload

Welcome to Scribd!

  • Mouse Event PDF

    Uploaded by

    Muhaiminul Ahsun
    19 views5 pages

    Original Title

    Mouse Event.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

    Copyright:

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

    Mouse Event PDF

    Uploaded by

    Muhaiminul Ahsun

    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: Mouse Event - 2</title>


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

    <script>

    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;


    uniform float u_click;
    varying vec3 v_color;
    void main() {
    if (u_click < 1.0)
    gl_FragColor = vec4(v_color*u_click, 1.0);
    else
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }`;

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

    var u_click_location;

    var bufferInd;

    var u_matrix_rotateX_location;
    var u_matrix_rotateY_location;

    var thetaX = 35;


    var thetaY = -20;

    var cl = 0.1;
    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([1.0, 0.0, 0.0,


    1.0, 0.0, 0.0,
    1.0, 0.0, 0.0,
    1.0, 0.0, 0.0,

    0.0, 1.0, 0.0,


    0.0, 1.0, 0.0,
    0.0, 1.0, 0.0,
    0.0, 1.0, 0.0,

    0.0, 0.0, 1.0,


    0.0, 0.0, 1.0,
    0.0, 0.0, 1.0,
    0.0, 0.0, 1.0,
    1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,
    1.0, 1.0, 0.0,

    0.0, 1.0, 1.0,


    0.0, 1.0, 1.0,
    0.0, 1.0, 1.0,
    0.0, 1.0, 1.0,

    1.0, 0.0, 1.0,


    1.0, 0.0, 1.0,
    1.0, 0.0, 1.0,
    1.0, 0.0, 1.0]);

    var indices = new Uint8Array([


    0, 1, 2, 0, 2, 3, // Front face
    4, 5, 6, 4, 6, 7, // Back face
    8, 9, 10, 8, 10, 11, // Top face
    12, 13, 14, 12, 14, 15, // Bottom face
    16, 17, 18, 16, 18, 19, // Right face
    20, 21, 22, 20, 22, 23 // Left face
    ]);
    // total 3 * 12 = 36 indices here

    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);

    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.uniform1f(u_click_location, cl);

    // gl.drawElements(mode, count, type, offset)


    // Draws the geometric shape in the specified mode (Here
    Triangles) using the
    // indices specified in the buffer object bound to
    gl.ELEMENT_ARRAY_BUFFER(line 166).
    // parameter count => Number of indices to be drawn (integer).

    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();

    bufferInd = gl.createBuffer();

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


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

    u_click_location = gl.getUniformLocation(prog, "u_click")

    }
    function click(gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1); // glClear will fill the canvas
    with a new color
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    cl = cl + 0.1;
    console.log(cl);

    gl.uniform1f(u_click_location, cl);
    gl.drawElements(gl.TRIANGLES, 3 * 12, gl.UNSIGNED_BYTE, 0);
    }

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

    init();

    </script>

    </html>

    You might also like