Drawing the Serpinski Gasket with WebGL: Part 2, the javascript file

• The Canvas function
  • The first part is the same (creating the canvas and adding it to the web page)
  • The context from before has become somewhat more complex
    • So they have provided a function that gets this for us.

      • this.gl = WebGLUtils.setupWebGL(canvas);
        if (!this.gl) {
            alert ("WebGL isn't available");
        }
        

      • Grabs a context and stores it
      • If the call fails, then a message is printed.
  • Once we have the context, we can begin setting up a viewport
    • The viewport determines which portion of the canvas will be used for drawing.
    • It is possible to set up multiple viewports, but we will not do that for now.
    • We will just set up one to cover the screen.

    • this.gl.viewport(0,0, width, height);
      

  • Next we need to load the shaders

    • program = initShaders(this.gl, "vertex-shader","fragment-shader");
      this.gl.useProgram(program);
      

    • This will probably not change.
  • In this mode, we need a buffer to store data on the GPU

    • var bufferID = this.gl.createBuffer();
      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, bufferID);
      

    • We will work with these later but
    • This allocates a storage location (not storage) in the GPU
    • The ID of that storage space is returned.
    • The MDN page on createBuffer.
    • bindBuffer makes the buffer active.
    • And determines how the buffer will be used.
    • We will most likely use ARRAY_BUFFER
    • The reference page discusses other buffer types.
  • The next few lines map between the buffer and the fragment shader

    •     var vPosition = this.gl.getAttribLocation(program, "vPosition");
          this.gl.vertexAttribPointer(vPosition,2,this.gl.FLOAT, false,0,0);
          this.gl.enableVertexAttribArray(vPosition);
      

    • Note that vPosition was a variable in the vertex shader
    • The first line associates the vPosision in the program with the one in the shader.
    • The vertexAttribPointer call binds the current buffer to an attribute and specifies the layout.
    • This one is tough and we will spend quite a bit of time on it.
    • The last call enalbeVertexAttribArray activates the system.
  • In this program we sort of take a step backwards and only deal with a static object.
  • We will change that in the near future.
• The other functions
  • In the init function

    •     Init: function() {
              this.list= [];
      
              this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
      
              var p1 = vec2(this.width/2.0, this.height-20);
              var p2 = vec2(20, 20);
              var p3 = vec2(this.width-20, 20);
      
              this.tri = [p1, p2, p3]
      
              this.MakePoints();
      
              var gl = this.gl;
              this.gl.bufferData(gl.ARRAY_BUFFER,flatten(this.list),gl.STATIC_DRAW);
          },
      

    • Set the clear color
    • create the points as vec2
    • The list is built in MakePoints()
    • Put the data into the buffer.
    • bufferData
    • Again we will look at this in the future.
    • We use a function from ML flatten which puts the array in the correct format.
  • The coordinate system in OpenGL
    • Everything is displayed in a view "square" (-1,-1) to (1,1)
    • But is generated in old "window" coordinates.
    • 
    • Later we will take care of this in the fragment shader.
    • But we need to do this in the code now.
    • I can do this in two stages.
      • Move the vertexes so that they are centered on the origin.
      • Scale the picture so it fits in the new region.
    • Moving the vertexes
      • If I subtract (width/2, height/2) from each pixel
        • (0,0) -> (-width/2, -height/2)
        • (width, height) -> (width/2, height/2)
      • This would be more complex if we did not have one corner at 0,0.
      • But for now, we can use the add function from the ML library to

      • q = this.HalfPoint(p,v);
        tmp= add(q, [-this.width/2.0,-this.height/2.0]);
        

      • This is a piece-wise vector operation (which is what you would expect from add.)
      • [a, b] + [c,d] = [a+c, b+d]
    • Scaling
      • Again, we want a width × height image to map to a 2 × 2 square
      • If we divide by the max(width, height), then we would map to a 1 × 1 square.

      • var scaleFactor = 2/Math.max(this.height, this.width);
        ...
        q = this.HalfPoint(p,v);
        
        tmp= add(q, [-this.width/2.0,-this.height/2.0]);
        tmp = scale(scaleFactor,tmp);
        

      • scale is a function that does a vector scaler multiply
      • [a,b] x c = [ac, bc]
  • Finally the redisplay function:

    •     Redisplay: function() {
              this.gl.clear(this.gl.COLOR_BUFFER_BIT);
              this.gl.drawArrays(this.gl.POINTS, 0, this.count);
              return;
          }