Wireframes

• Demo
• 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.
• 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 computat later, we need to cover some more gl first.
• The new shader

  • #extension GL_OES_standard_derivatives : enable
    precision mediump float;
    varying vec4 f_Color;
    varying vec3 f_BC;
    varying float f_FillType;
    
    float edgeFactor(){
        vec3 d = fwidth(f_BC);
        vec3 a3 = smoothstep(vec3(0.0), d*1.5, f_BC);
        return min(min(a3.x, a3.y), a3.z);
    }
    
    void main(){
        if(gl_FrontFacing){
           gl_FragColor = vec4(0.0, 0.0, 0.0, (1.0-edgeFactor())*0.95);
        } else {
           gl_FragColor = vec4(0.0, 0.0, 0.0, (1.0-edgeFactor())*0.7);
       }
    }
    	

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