CODEWITHSUNDEEP
javascriptwebgl
user2988960
user2988960

Reputation: 39

WebGL, and mat4.perspective function not working

I have a problem with the code for trying to display a simple triangle object and simple square object. When I run the code, neither object appears. The problem is with the mat4.perspective function and possibly the parameters. Here is the code with the error:

    function drawScene() {
        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        var rads=45*(Math.PI/180);
        mat4.perspective(pMatrix, rads, gl.viewportWidth/gl.viewportHeight, 0.1, 100.0);
        alert("this works");
        mat4.identity(mvMatrix);
        mat4.translate(mvMatrix, mvMatrix [-1.5, 0.0, -7.0]);
        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
        setMatrixUniforms();
        gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);


        mat4.translate(mvMatrix, mvMatrix [3.0, 0.0, 0.0]);
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
        setMatrixUniforms();
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
    }

The JS alert I added works before the mat4.perspective line but not afterwards so I know the problem lies in this line. Any suggestions for what I am doing wrong and how to correct the problem?

Upvotes: 4

Views: 3152

Answers (1)

Scott Stensland
Scott Stensland

Reputation: 28285

I have a working setup into which I placed your code ... this line is suspect 

mat4.perspective(pMatrix, rads, gl.viewportWidth/gl.viewportHeight, 0.1, 100.0);

here is mine which you might try

mat4.perspective(FoV , gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

where 

var FoV = 20.0;

which controls field-of-view

Here is a WebGL project I wrote which implements keyboard + mouse interactions to zoom/pan/slide about ... feel free to pillage at will NOTE - it was my first usage of javascript/WebGL so take it with a grain of salt, but it does scream !

https://github.com/scottstensland/webgl-3d-animation

Upvotes: 1

Related Questions