Search code examples
matrixwebgldepth

WebGL matrix depth not working properly

I'm very new to WebGL, but I'm getting close at understanding the basics.

I'm following the instructions in Jacob Seidelin's book where he explains some of the basics. I tried rebuilding one of his examples (which is not directly explained in the book).

For some reason the depth in the uModelView matrix doesn't work in my application. I also don't get any errors using the WebGLDebugUtils.

When I set the z property of the uModelView matrix to 0 the front face of the cube fills up the screen. Since I worked with -1 to 1 in the vertices.

Here is my source code: [removed]

The shaders are located in the index.html, be they shouldn't be the problem.

I'm using gl-matrix for the matrix transformations.

Thanks in advance.

Solution

  • You are not using the mat4.perspective correct. Checkout the documentation:

    https://github.com/toji/gl-matrix/blob/master/gl-matrix.js#L1722

    You should either add the matrix as the last parameter (this is the preferred way since this does not allocate any new object):

    mat4.perspective(fov, aspect, near, far, matrix);

    or assign it to the matrix:

    matrix = mat4.perspective(fov, aspect, near, far);