Using Simple VBOs and More

• WebGL provides a few basic drawing primitives.
  • These are accomplished via the gl.drawArrays() routine
  • void gl.drawArrays(mode, first, count);
  • The mode is one of
    • POINTS: draws a single dot at each point.
    • LINE_STRIP: draw lines connecting each point
    • LINE_LOOP: same as line strip but connect the first to last
    • LINES: draw lines between pairs
    • TRIANGLE_STRIP:
      • Assume the points in the array are ABCDE...
      • Draw ABC, BCD, CDE, ...
    • TRIANGLE_FAN:
      • Assume the points in the array are ABCDE...
      • Draw ABC, ACD, ADE ...
    • TRIANGLES: draw each set of three points as a triangle.
  • first is the first point to use, allows you to skip some points.
  • count is the number of points to use.
  • A Demo with source code.
    • The HTML file is mostly unchanged.
    • The Canvas
      • I use Polar Coordinates to generate the points on the circle.
        • Or a set of parametric equations in Θ
        • x = r sin(Θ);
        • y = r cos(Θ);
        • r is the radius of the circle
        • 0 ≤ Θ ≤ 2π

      • MakePoints: function() {
            var x, y, r;
            var theta=0;
            var dtheta = 3.1415/this.count * 2;
         
            r = .75;
        
            for (var i=0; i<this.count; i++) {
                tmp = vec2(r*Math.cos(theta), r*Math.sin(theta));
                theta += dtheta;
                this.list.push(tmp);
            }
            return;
        }
        

• I use triangles in this Demo.
  • The HTML file
    • The shaders are modified
      • The vertex shader extracts and passes on the color

        • attribute vec4 vPosition;
          attribute vec4 vColor;
          varying vec4 f_Color;
          
          void main() {
              gl_Position = vPosition;
              f_Color = vColor;
          }
          

        • Note the new attribute vColor
        • Attributes are how the program communicates with the shaders.
        • In this case, it can hold up to a 4 vector.
        • And we will associate that with vColor in the program

        • // a buffer for the colors
          this.cBuffer = gl.createBuffer();
          gl.bindBuffer(gl.ARRAY_BUFFER, this.cBuffer);
          
          // "vColor" is the name of the attribute.
          colorAttribute = gl.getAttribLocation(program, "vColor");
          gl.vertexAttribPointer(colorAttribute,3,gl.FLOAT, false,0,0);
          gl.enableVertexAttribArray(colorAttribute);
          

      • Note that the fragment shader passes an internal value (f_Color) with the point.
        • It is declared as varying which means it is a pipeline variable (my term, we will get the official term later)
        • It is assigned a value.
      • Both gl_Position and f_Color will be delivered to the fragment shader.
      • The fragment shader uses the color passed to it.

        • precision mediump float;
          varying vec4 f_Color;
          
          void main() {
              gl_FragColor = f_Color;
          }
          

        • Note f_Color is declared again.
        • And the value gl_FragColor is set based on this.
      • This change allows us to pass in a color for each vertex
      • Look at the drawing, WebGL (and openGL) does a linear interpolation between colors of vertexes when drawing lines/polygons.
    • HTML is event driven.
    • I add an event listener to this file.

      • <script>
        .
        .
        .
        window.addEventListener("load", function(event){
            document.getElementById('DepthBox').value = canvas.GetDepth();
        });
        </script>
        

      • When the window is loaded, the function is called
      • This function retrieves the depth value from the canvas object
      • And stores it in the "DepthBox" element.
      • This initializes the interface to the value of the canvas.
  • The JS file
    • As noted above, there are two buffers in use in this code.
      • A buffer for the points of the triangles
      • A buffer for the colors of each point.
      • In C++ we would have had a fit if you had two parallel arrays
        • They are kept in sync just by luck.
        • In C++ you should build a
          • Point class - contains coordinates and coordinate functions.
          • Color class - contains colors and color functions
          • A Vertex class containing a Point and a Color
          • A Triangle class consisting of three Vertexes.
          • Finally a vector of Triangles
      • But we are talking to a very primitive device on the other end.
        • It would not "understand" the structure I just described.
        • We could build a serializer to change the vector of triangles into the data type GLSL would understand.
        • Or we could just work in a format that webGL can use.
      • I would suspect that if you were to become an expert, you would do something in between.
      • For now, I will build the following data structures
        • A point is vec2, or [x,y], where x and y are reals
        • A triangle really doesn't exist. It is just the next three points in a list.
        • The vertex list is an array of points [[x1, y1], [x2, y2], [x3, y3] ...]
          • The first three points form the first triangle.
          • The next three points form the second triangle.
          • Points shared between triangles are repeated
            • This is a waste of storage space
            • We will fix this in the future
            • But I think we have quite enough complexity right now.
          • I will always put three points at a time in this list.
        • The point color list is an array of colors [[r1, g1, b1], [r2, g2, b2] ...]
          • Again, it is up to the programmer to maintain this properly.
      • In the initialization routine, we need to declare two buffers

        •     // a buffer for the vertexes
              this.vBuffer = gl.createBuffer();
              gl.bindBuffer(gl.ARRAY_BUFFER, this.vBuffer);
          
              vPosition = gl.getAttribLocation(program, "vPosition");
              gl.vertexAttribPointer(vPosition,2,gl.FLOAT, false,0,0);
              gl.enableVertexAttribArray(vPosition);
          
              // a buffer for the colors
              this.cBuffer = gl.createBuffer();
              gl.bindBuffer(gl.ARRAY_BUFFER, this.cBuffer);
          
              colorAttribute = gl.getAttribLocation(program, "vColor");
              gl.vertexAttribPointer(colorAttribute,3,gl.FLOAT, false,0,0);
              gl.enableVertexAttribArray(colorAttribute);
          

        • Note: I save cBuffer and vBuffer as member variables to the Canvas object.
          • I will need to bind to these later when I want to use the buffers.
        • Note that the color buffer has a 3 in the vertexAttribPointer call (there are three data values per point, not two as in the vertex buffer)
        • Note that each binds to the proper shader attribute.
      • This is not the only way to accomplish this task, but it will do for now.
    • The Init function
      • Restart list goes back to the default starting state
        • Initializes the points on the triangle

        • var p1 = vec2(-0.8, -0.8);
          var p2 = vec2(0, .8);
          var p3 = vec2(0.8, -0.8);
          
          this.vertex= [p1, p2, p3] ;
          

        • Initialize the colors

        • var c1 = vec3(Math.random(), Math.random(),Math.random())
          var c2 = vec3(Math.random(), Math.random(),Math.random())
          var c3 = vec3(Math.random(), Math.random(),Math.random())
          
          this.colors = [c1, c2, c3];
          

        • Builds the scene to the proper depth.

        • this.MakePoints();
          
          this.UpdateBuffers();
          this.Redisplay();
          

      • Updating the buffers is totally new

        • UpdateBuffers: function() {
              gl = this.gl;
              // change the vertex data
              gl.bindBuffer(gl.ARRAY_BUFFER, this.vBuffer);
              gl.bufferData(gl.ARRAY_BUFFER,flatten(this.vertex),gl.DYNAMIC_DRAW);
          
              // change the color data
              gl.bindBuffer(this.gl.ARRAY_BUFFER, this.cBuffer);
              gl.bufferData(gl.ARRAY_BUFFER,flatten(this.colors),gl.DYNAMIC_DRAW);
          },
          

        • The first line is just to keep from typing this.gl all the time.
        • Note the call to bindBuffer
          • This time it does not allocate anything.
          • But it makes the buffer active.
          • Woe be it to the person who binds the wrong buffer!
        • Note the change in the last parameter to bufferData
          • we used STATIC_DRAW
            • The contents are written infrequently but drawn often.
            • We do not intend to read this buffer.
          • We now use DYNAMIC_DRAW
            • The contents are used often and change often.
            • We do not intend to read this buffer.
          • While this is not critical, it is said to have a huge impact on performance.
      • MakePoints is totally new

        •     MakePoints: function(){
                  var newVertex = [];
          	var newColors = [];
          	var a,b,c;
          	var p1, p2, p3;
          
          	if (this.currentDepth < this.maxDepth) {
          	   this.currentDepth++;
          
          	   for(i =0; i < this.vertex.length;i+=3) {
          	       a = this.vertex[i];
          	       b = this.vertex[i+1]
          	       c = this.vertex[i+2];
          
          	       p1 = this.HalfPoint(a,b,.5);
          	       p2 = this.HalfPoint(a,c,.5);
          	       p3 = this.HalfPoint(b,c,.5);
          
                         this.AddTri(a,p1,p2, newVertex, this.colors[i], newColors);
                         this.AddTri(b,p1,p3, newVertex, this.colors[i+1], newColors);
                         this.AddTri(c,p2,p3, newVertex, this.colors[i+2], newColors);
          	    }
          	    this.vertex = newVertex;
          	    this.colors = newColors;
          
          	    this.MakePoints();
          	}
              },
          

        • Recursion in javascript.
      • AddTri is a convienence functino

        •     AddTri: function(p1, p2, p3, vert, c1, colors) {
                  vert.push(p1);
          	colors.push(c1);
          
                  vert.push(p2);
          	var c2 = vec3(Math.random(), Math.random(),Math.random())
          	colors.push(c2);
          
                  vert.push(p3);
          	var c3 = vec3(Math.random(), Math.random(),Math.random())
          	colors.push(c3);
              },
          

        • Note, the first color remains the same.