More WebGL

• 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 three attributes associated with each vertex

    • attribute vec4 vPosition;
      attribute vec3 vBC;
      attribute vec4 vColor; 

    • vPosition is the same as before.
    • vBC is the barycentric coordinates, we will discuss those soon.
    • vColor is the color for this vertex.
    • 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.
  • A third type of variable is a uniform

    • uniform int vShader; 

    • These come from the program (javascript)
    • Available in either the vertex or the fragment shader.
    • They are for things like
      • Transformation matrix
      • Shader type to use.
    • Declared in the shader.
    • To change the value.
      • Get the location of the variable from the glsl program

      • this.shaderLoc = this.gl.getUniformLocation(this.program, "vShader"); 

      • Transfer it from js to glsl whenever the value changes.

      • this.gl.uniform1i(this.shaderLoc, this.shaderChoice); 

      • This is done on a per-item only.
      • IE you set it then call drawArrays()
      • uniform[1234][fi][v]()
        • There are also uniformMatirix[n]x[m][fv]
        • This is a common GL trick.
        • They support(ed) languages which do not support function overloading.
        • So there are many different calls.
        • uniform[if] transfers a single value
        • uniform[234] transfers 2, 3, or 4 values.
        • uniformv assumes that they are in a vector vs a set of different parameters.
        • The first parmater is the uniform location.
        • The second paramter allows us to transpose the matrix.
        • The third parmeter is the data.
      • An additional example: Transferring a matrix

        • // shader
          uniform mat4 uMatrix1;
          
          // in the js code, 
          let mat1Pos = gl.getUniformLocation(program, "uMatrix1");
          let a = translate(0.25, 0.25, 0.0);
          gl.uniformMatrix4fv(mat1Pos, false, flatten(a)); 

  • 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.

  • // filled with edge shader
    void Shader0() {
       if (any(lessThan(f_BC, vec3(0.005)))) {
           // edge, draw it with the edge color
           gl_FragColor= e_Color;
       } else {
           if (gl_FrontFacing) {
              // front face, draw it with the face color
              gl_FragColor = f_Color;
           } else {
              // back face, draw it grey
              gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);
           }
        }
    } 

  • 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 here