WebGL and mat4 real function doesn't work
I have a problem with code that is trying to display a simple triangle object and a simple square object. When I run the code, no object appears. The problem is that mat4 is the first function and maybe the parameters. Here is the error code:
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 warning I added works up to the mat4.perspective line, but not after that, so I know the problem is with this line. Any suggestions on what I am doing wrong and how to fix the problem?
source to share
I have a working setup where I posted your code ... this line is suspicious
mat4.perspective(pMatrix, rads, gl.viewportWidth/gl.viewportHeight, 0.1, 100.0);
here is mine you can try
mat4.perspective(FoV , gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
Where
var FoV = 20.0;
which controls the field of view
Here is a WebGL project I wrote that implements keyboard + mouse interactions for zoom / pan / slide ... feel free to loot on your own NOTE. This was my first time using javascript / WebGL, so take it with a grain of salt, but it screams!
https://github.com/scottstensland/webgl-3d-animation
source to share