title: WebGL shader z position not used in depth calculations
body: <p>I've been trying out some WebGL but there's a bug I cannot seem to find out how to fix.</p>
  
  <p>Currently I have the following setup:
  I have around 100 triangles which all have a position and are being drawn by a single <code>gl.drawArrays</code> function. To have them drawn in the correct order I used <code>gl.enable(gl.DEPTH_TEST);</code> which gave the correct result.</p>
  
  <p>The problem I have now is that if I update the <code>gl_Position</code> of the triangles in the vertex shader the updated Z value is not being used in the depth test. The result is that a triangle with a <code>gl_Position.z</code> of 1 can be drawn on top of a triangle with a <code>gl_Position.z</code> of 10, which is not exactly what I want..</p>
  
  <p><strong>What have I tried?</strong></p>
  
  <pre><code>gl.enable(gl.DEPTH_TEST);
  gl.depthFunc(gl.GEQUAL);
  </code></pre>
  
  <p>with </p>
  
  <pre><code>gl.clear(gl.DEPTH_BUFFER_BIT);
  gl.clearDepth(0);
  gl.drawArrays(gl.TRIANGLES, 0, verticesCount);
  </code></pre>
  
  <p>in the render function.</p>
  
  <p>The following code is used to create the buffer: </p>
  
  <pre><code>gl.bindBuffer(gl.ARRAY_BUFFER, dataBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positionBufferData, gl.STATIC_DRAW);
  const positionLocation = gl.getAttribLocation(program, 'position');
  gl.enableVertexAttribArray(positionLocation);
  gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, false, 0, 0);
  </code></pre>
  
  <p>The triangles with a higher z value are much bigger in size (due to the perspective) but small triangles still appear over it (due to the render order).</p>
  
  <p>In the fragment shader I've used <code>gl_fragCoord.z</code> to see if that was correct and smaller triangles (further away) received a higher alpha than bigger ones (up close). </p>
  
  <p><strong>What could be the cause of the weird drawing behaviour?</strong> </p>