Why am I seeing these strange clipping artifacts with WebGL?

Question

I'm using TWGL to create an NxN plane buffer which I then use as a mesh (twgl.primitives.createPlaneBufferInfo), with extrusion on the Z axis relative to lightness values in a video. It all looks pretty good, except that I am getting strange clipping artifacts in the (-X, -Y) and (X, Y) quadrants. See the attached image for an example...

I saw this post which raises similar questions, and suggests depth sorting but it's not obvious how I would even do this sorting given that relative depth is decided on the fly in the shader. There is also a suggestion to disable depth testing and enabling face culling, but that does not work. I assume there must be some sort of alternative since what I'm doing isn't particularly uncommon. Perhaps I need to generate the mesh differently? It's also not obvious to me why this would only happen in two of the four quadrants. Thanks in advance!

Answer 1

After lots of experimentation, I finally found the issue. The perspective matrix that I was generating had a zero as the 16th array element (in other words position [4,4] in the X,Y,Z,W matrix) which was causing the depth values to be flattened.

I was generating my perspective matrix with twgl. Not sure why the implementation works this way (seems like a bug to me):

_public.perspectiveMatrix = twgl.m4.perspective(_public.POV, width/height, 0.0, 100);

This was an issue as I was setting the position in the vertex shader like so:

gl_Position = perspectiveMatrixUniform * viewMatrixUniform * vec4((matrixUniform * vec3(position.xy, 1.0)).xy, (intensity.r + intensity.g + intensity.b)/3.0 + 0.01, 1.0); 

If I add the following line immediately after initializing the perspective matrix, everything works as expected:

_public.perspectiveMatrix[15] = 1.0;