Wireframes

• Demo
• Or 3D
• As we step towards 3d, we will need wireframes until we get the lighting model working.
  • We need this because flat colored polygons are all the same without lights.
  • IE you can't tell where the edges are, you just get an outline.
  • See here
• In OpenGL there is a call
  • glPolygonMode()
    • you can set FRONT, BACK, FRONT_AND_BACK
    • POINT, LINE, FILL
  • Unfortunately this is not present in webGL
• There is a way we can show wireframes
  • Outlined in an blog post here.
  • This describes a fragment shader operation to determine if a pixel is on the edge or in the center.
  • We will go into the computations later, we need to cover some more gl first.
• The new shader

  • #extension GL_OES_standard_derivatives : enable
    varying vec4 f_Color;
    varying vec3 f_BC;
    varying vec4 e_Color;
    
        void main(){
           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);
                   discard;
               }
           }
        }
    

  • BC is a value we send in from the main program.
  • It represents the edges of the triangles.
  • edgeFactor measures how "close" we are to the edges.
  • And we use this to set the alpha value of the pixels drawn
• First, extensions
  • The shader uses fwidth and smoothstep
  • These are advanced options
  • fwidth is only available in the fragment shader.
  • To use these we need to add the following:

  • function InitGL(canvas) {
        var gl =  WebGLUtils.setupWebGL(canvas,'OES_standard_derivatives');
        if (!gl) {
            alert ("WebGL isn't available");
        }
    
        // required to turn on fwidth and such.
        gl.getExtension('OES_standard_derivatives');
        return gl;
    }
    

• Blending
  • We don't really want to go into blending here, but we need to use it a little.
  • Once at initialization time.

  • this.gl.enable(this.gl.BLEND);
    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
    

  • gl.enable
    • Takes a constant and turns on a switch.
  • gl.disable turns the switch off.
  • In this case, we are turning on alpha blending.
• Triangle Direction
  • As we discussed, you can specify your triangles either as clockwise or counterclockwise
  • either CCW or CW

  • this.direction = this.gl.CCW;
    this.gl.frontFace(this.direction);
    

  • What is up here?
    • the shader can compute a normal using the cross product of two vectors.
    • If this normal is pointing towards the viewer, the front face is visible.
    • If not, the back face is visible.
    • CW or CCW determine the direction of the normal.
    • We will look at cross product more in the future.
• Culling triangles

  • this.gl.enable(this.gl.CULL_FACE);
    this.gl.cullFace(this.gl.BACK)
    

  • cullFace
  • FRONT, BACK, FRONT_AND_BACK
• Depth
  • We also need to enable and configure depth testing.

  • this.gl.enable(this.gl.DEPTH_TEST);
    this.gl.depthFunc(this.gl.LESS);
    this.gl.depthMask(this.gl.TRUE);
     

  • And when whe start a new scene, we need to clear the depth buffer as well

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