Results 1 to 5 of 5

Thread: Drawing a simple square in webgl

  1. #1

    Drawing a simple square in webgl

    Hi all,


    I have a very basic question. I am new to webgl and trying to draw a simple square. I am using the gl matrix library for matrix manipulation.

    Javascript Code:
    Code :
       squareVertexPositionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
            vertices = [
                 0.9,  0.9,  0.0,1.0,
                -0.9,  0.9,  0.0,1.0,
                 0.9, -0.9,  0.0,1.0,
                -0.9, -0.9,  0.0,1.0
     
            ];
     
     
            squareVertexPositionBuffer.itemSize = 4;
            squareVertexPositionBuffer.numItems = 4;
     
            mat4.identity(pMatrix);
            mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
            mat4.identity(mvMatrix);
            mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);
     
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
            setMatrixUniforms();
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);


    shader code :
    Code :
       attribute vec3 aVertexPosition;
     
        uniform mat4 uMVMatrix;
        uniform mat4 uPMatrix;
     
        varying vec3 debug;
     
     
        void main(void) {
            gl_Position =  uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);
            debug = aVertexPosition;
        }


    This seems to work out fine.Here i am passing the model view and perspective matrices as uniforms to the shader programs and multiplying them with the vertex coordinates there. But if multiply the model view and perspective matrices in the javascript and the then pass the modified vertices to the shader, it doesnt seem to work.


    Code :
          mat4.multiply( mvMatrix,pMatrix,mvMatrix  );
          mat4.multiply(mvMatrix,vertices,vertices  );
    Shader:
    Code :
     
     
        void main(void) {
            gl_Position =  vec4(aVertexPosition.xyz, 1.0);
            debug = aVertexPosition;
        }


    I'm not able to spot the mistake. Help highly appreciated!

  2. #2
    Junior Member
    Join Date
    Mar 2011
    Posts
    17

    Re: Drawing a simple square in webgl

    Code :
    gl_Position =  uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);

    This multiplies the MVP matrix, a 4x4 matrix, with the vertex positon, a vec4, transforming that position.

    Code :
    mat4.multiply( mvMatrix,pMatrix,mvMatrix  );
          mat4.multiply(mvMatrix,vertices,vertices  );

    This multiplies the MVP matrix, a 4x4 matrix, with an array of 16 floats, which probably doesn't throw an error because the internal reperesentation of a matrix in the glmatrix library is an array. But the result of this is something completely different than what the shader does.

  3. #3

    Re: Drawing a simple square in webgl

    @ralph

    the vertex shader takes one vertex at a time, thats why its multiplies using vec4. In javascript we are doing the same multiplication for all the vertices, thats why the 4X4 matrix.

    Even if you use a vec4 in javascript, still the results of the two are completely different, although they should be identical

  4. #4
    Junior Member
    Join Date
    Mar 2011
    Posts
    17

    Re: Drawing a simple square in webgl

    n/m

  5. #5

    Re: Drawing a simple square in webgl

    my question is @ralph why is what glmatrix does something completely different from what shader does?

Similar Threads

  1. Simple 2D drawing one pixel at a time
    By Progman3K in forum OpenGL ES general technical discussions
    Replies: 1
    Last Post: 01-20-2013, 01:43 PM
  2. Drawing a Square vs Loading a Square
    By krammark23 in forum OpenGL ES 1.X - fixed function hardware
    Replies: 3
    Last Post: 11-04-2008, 10:01 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •