A vertex buffer object (VBO) provides methods for uploading vertex attributes (position, color, depth) directly to the video device for rendering. VBOs offer substantial performance gains because the data resides in the video device memory rather than the system memory, so it can be rendered directly by the video device. Buffer objects can be created using the createBuffer() function:

vertexBuffer = gl.createBuffer();

This only creates the object's name and the reference to the object. To actually create the object itself, you must bind it to the context.

The bindBuffer() function is invoked to tell on which of the buffer objects the subsequent functions will operate on. This function is called as follows:

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

The target hint can be ARRAY_BUFFER (vertex buffers).

There are many allocated buffer objects. We need to specify which buffer object we want to apply the next set of operations on. The bindBuffer() function is used to make a particular buffer object the current array buffer object or the current element array buffer object so that the subsequent operations are applied on that buffer object. The first time the buffer object's name is bound by calling the bindBuffer() function, the buffer object is allocated with the appropriate default state, and if the allocation is successful, this allocated object is bound as the current array buffer object or the current element array buffer object for the rendering context.

However, the actual memory is only allocated when we invoke the gl.bufferData() API call:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

The third parameter in the bufferData API call specifies how to use the buffer object. The following table explains the different enum values and their usages. In our book, we will use the gl.STATIC_DRAW value, but in cases where you might need to animate individual vertices, you will use the gl.DYNAMIC_DRAW value:

We can unbind buffer objects using a bindBuffer() function call by specifying null as the buffer object parameter:

vertices = [
             3.0,  3.0,  0.0, //Vertex 0
            -3.0,  3.0,  0.0, //Vertex 1
             3.0, -3.0,  0.0, //Vertex 2
            -3.0, -3.0,  0.0  //Vertex 3
];
gl.bindBuffer(gl.ARRAY_BUFFER, null);// Deactivate the current buffer
vertexBuffer = gl.createBuffer();//Create  a reference to the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);//Make the buffer the current active buffer for memory allocation(Subsequent command)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);//Allocate memory for the buffer object.

Similar to vertex buffer objects, we have index buffer objects to store the indices in the GPU memory. The following code creates a vertex array and an index array. It then creates the corresponding vertex buffer object and index buffer objects:

vertices = [
             3.0,  3.0,  0.0, //Vertex 0
            -3.0,  3.0,  0.0, //Vertex 1
             3.0, -3.0,  0.0, //Vertex 2
            -3.0, -3.0,  0.0  //Vertex 3
];
indices = [0,2,3,0,3,1];
indexBuffer = gl.createBuffer();// Create a reference to the buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);// make the Index buffer the active buffer notice gl.ELEMENT_ARRAY_BUFFER for index buffers.
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);// Alocate memory for the index buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);

The vertex shader is a programmable unit that operates on incoming vertex values and their associated data (normal, color, and so on). The vertex processor usually performs graphic operations such as the following:

<scriptid="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;

  uniform mat4 mvMatrix;
  uniform mat4 pMatrix;

  void main(void) {
    gl_Position = pMatrix * mvMatrix * vec4(aVertexPosition, 1.0);
  }
</script>

After the vertex shader has worked on vertex attributes (such as position), the next phase is the primitive assembly stage. In the primitive assembly stage, primitive objects such as lines and triangles are clipped and culled. If a primitive object lies partly outside the view frustum (the 3D region that is visible on the screen), then it is clipped; if it lies completely outside, then it is culled. The next phase is rasterization. In this phase, all primitives are converted to two-dimensional fragments, also called pixels. These fragments are then processed by the fragment shader.

A fragment shader performs the following functions:

The following listed code is the most basic fragment shader. In this code, we simply apply a constant color value to each fragment of our scene:

<scriptid="shader-fs" type="x-shader/x-fragment">
  precisionmediump float;

  void main(void) {
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
  }
</script>

The gl_FragColor variable is declared automatically and the color for each fragment is set. For the purpose of making this shader extremely simple, we did not load any data to the shader; we generally passed these values to the fragment shader. The values are as follows:

Attribute-qualified variables are used for data that is passed to shaders frequently. Since every vertex has different attributes, we generally use this qualifier for vertex data. Now in our case (square example), each vertex has a different position, hence, we qualify the aVertexPosition vector as the attribute. If each vertex had a different color value, we would have qualified another vector aVertexColor as an attribute.

The following line of code qualifies a vector as an attribute in the vertex shader code:

attribute vec3 aVertexPosition;

The following code gets the reference/index of the shader variable. The variables (attributes) that are declared in the shaders are initialized in the main control code. In order to initialize them, we need to get a reference to them in the control code. The getAttribLocation function does just that, as shown in the following snippet:

function initShaders() {
  
  shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");// getting the reference to the attribute aVertexPosition from the flow code
  
}

Only floating point scalars, floating point vectors, or matrices can be qualified as an attribute.

The uniform qualifier, just like the attribute qualifier, is used to pass data to the shaders. But the uniform value should not change per fragment/primitive operation. A primitive can have many vertices, hence, a uniform cannot be used to qualify per vertex data. However, a primitive might have the same transformation that can be applied to all vertices, hence, the transformation matrix is stored in a variable qualified as a uniform.

The uniform qualified variable cannot be modified inside the shader. Also, vertex shaders and fragment shaders have a shared global namespace for uniforms, so, uniforms of the same name will be the same in vertex and fragment shaders. All data types and arrays of all data types are supported for uniform qualified variables.

Let's take a look at how we load uniform data to shaders.

The following lines of code qualify a matrix as a uniform in the fragment shader code:

uniform mat4 mvMatrix;
uniform mat4 pMatrix;

The following is the code to get the reference of the shader uniform variable:

function initShaders() {
…………………………………
………………………
  shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
……………………………
……………………………

}

The following is the code to load data to a uniform:

function setMatrixUniforms() {
  gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
  gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

Please note that we chose to qualify the transformation matrix as a uniform because we know that the transformation matrix will not change for one particular primitive rendering operation.

The varying qualifier is the only way a vertex shader can communicate results to a fragment shader. These variables form the dynamic interface between vertex and fragment shaders. Let's consider a case where each vertex of a primitive, such as a triangle, has a different color and we add light to our scene. Lights might change the color at each vertex. Now, in our vertex shader, we will calculate the new color value of each vertex and share the new color value to the fragment shader using a varying qualified vector; the fragment shader interpolates the color between vertices and sets the color of each fragment/pixel. A vertex shader writes to a varying variable and that value is read in the fragment shader.

Shaders exist as independent programs. The following code retrieves the source of these programs by simple JavaScript functions such as getDocumentElementById. Then, the three WebGL functions, createShader, shaderSource, and compileShader, initialize and compile the shaders, as shown in the following code snippet:

function createShader(gl, id) {
  var shaderScript = document.getElementById(id);
  if (!shaderScript) {
    return null;
  }

  var str = "";
  var k = shaderScript.firstChild;
  while (k) {
    if (k.nodeType == 3) {
      str += k.textContent;
    }
    k = k.nextSibling;
  }

  var shader;
  if (shaderScript.type == "x-shader/x-fragment") {
    shader = gl.createShader(gl.FRAGMENT_SHADER);
  } else if (shaderScript.type == "x-shader/x-vertex") {
      shader = gl.createShader(gl.VERTEX_SHADER);
  } else {
  return null;
  }

  gl.shaderSource(shader, str);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    return null;
  }

  return shader;
}

function initShaders() {
  var fragmentShader = createShader(gl, "shader-fs");
  var vertexShader = createShader(gl, "shader-vs");
  shaderProgram = gl.createProgram();
  gl.attachShader(shaderProgram, vertexShader);
  gl.attachShader(shaderProgram, fragmentShader);
  gl.linkProgram(shaderProgram);
  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    alert("Shaders cannot be initialized");
  }
  gl.useProgram(shaderProgram);
  shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
  shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}

The createShader() function parses our HTML document tree; it then loads the shader code in the string variable before assigning it to context for compiling. The parent function initShaders() first creates the program object and then attaches shaders to the program object. The final step is linking. Our two different shaders need to work together. The link step verifies that they actually match up. If the vertex shader passes data on to the fragment shader, the link step makes sure that the fragment shader actually accepts that input. The two shader sources are compiled into a program, which is passed to the useProgram() function to be used. The last few lines of the function get references/indexes to the attribute and uniform variables so that we can later associate attributes to the buffer objects.