A collection of things.

• Once again, we are looking at this demo
• and possible this one
• Last time we discussed face culling
• We need a few more tools from WebGL to accomplish this.
  • We will need to tell WebGL the direction we are drawing our triangles.
  • This is done with void gl.frontFace(mode);
    • gl.CW
    • gl.CCW
  • It will also be useful to enable depth testing.

    • this.gl.enable(this.gl.DEPTH_TEST);

    • We need to enable it.
    • void gl.depthFunc(func);
    • void gl.depthMask(flag);
      • Setting this to true enables writing to the depth buffer.
    • Finally, when we clear the buffer, we need to clear the depth buffer as well.

    •  this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT); 

• We need to learn a bit more about the shaders as well.
  • There are two attributes associated with each vertex in this code

    • attribute vec4 vPosition;
      attribute vec3 vBC; 

    • vPosition is the same as before.
    • vBC is the barycentric coordinates, we will discuss those soon.
    • These are passed through the VBO as discussed before.
  • In addition there are three varying variables.
    • Varying variables are produced in the vertex shader.
    • The values are interpolated between vertexes in the pipeline
    • An interpolated value is handed to the fragment shader.
    • This allows the colors to change smoothly from one point to another.
    • Or the barycentric coordinates to be calculated.
    • Written to in the vertex shader.
    • Read only in the fragment shader.
  • Look at the shaders, is there anything you don't understand?
• Barycentric coordinates.
  • Each vertex of a triangle has an additional coordinate.
  • They are [1,0,0], [0,1,0], [0,0,1]
  • The order doesn't matter, but uniqueness does.
  • These are just passed through from the vertex shader
  • But they are interpolated before they reach the fragment shader.

  • precision mediump float;
        varying vec3 varyingBC;
        uniform vec4 uniformEdgeColor;
    
        // wireframe shader
        void main(){
           // front face
           if (gl_FrontFacing) {
               if (any(lessThan(varyingBC, vec3(0.03)))) {
                   gl_FragColor= uniformEdgeColor;
               } else {
                   gl_FragColor= vec4(0.0, 0.0, 0.0, 1.0);
               }
           } else {
               // back facing
               if (any(lessThan(varyingBC, vec3(0.05)))) {
                   gl_FragColor= uniformEdgeColor;
               } else {
                   //gl_FragColor = vec4(1.0, 0.0, 0.0, 0.05);
                   discard;
               }
           }
        }

  • bvec lessThan( vec x, vec y);
    • Returns a vector representing (x1 < y1, x2 < y2, ...)
  • bool any( bvec x);
    • Returns the or of the components of x.
  • So what does the first if do in the above code?
  • Take a look Barycentric Triangle Demo