Although WebGL is often thought of as a comprehensive 3D API, it is, in reality, just a rasterization engine. It draws points, lines, and triangles based on the code you supply. Getting WebGL to do anything else requires you to provide code to use points, lines, and triangles to accomplish your task.

WebGL runs on the GPU on your computer. As such, you need to provide code that runs on that GPU. The code should be provided in the form of pairs of functions. Those two functions are known as the vertex shader and fragment shader, and they are each written in a very strictly-typed C/C++-like language called GLSL (GL Shader Language). Together, they are called a program.

WebGL handles geometry in a standard way, independent of the complexity and number of points that surfaces can have. There are two data types that are fundamental to represent the geometry of any 3D object: vertices and indices.

Vertices are the points that define the corners of 3D objects. Each vertex is represented by three floating-point numbers that correspond to the x, y, and z coordinates of the vertex. Unlike its cousin, OpenGL, WebGL does not provide API methods to pass independent vertices to the rendering pipeline; therefore, all of our vertices need to be written in a JavaScript array, which can then be used to construct a WebGL vertex buffer.

Follow the given steps:

1. Open the ch02_01_square.html file in a code editor (ideally one that supports syntax highlighting).

2. Examine the structure of this file with the help of the following diagram:

3. The web page contains the following:

• The <script id="vertex-shader" type="x-shader/x-vertex"> script contains the vertex shader code.
• The <script id="fragment-shader" type="x-shader/x-fragment"> script contains the fragment shader code. We won't pay attention to these two scripts as they will be the main point of study in the next chapter. For now, simply notice that we have a fragment shader and a vertex shader.
• The next script on our web page, <script type="text/javascript">, contains all the JavaScript WebGL code that we will need. This script is divided into the...

Vertex array objects (VAOs) allow you to store all of the vertex/index binding information for a set of buffers in a single, easy to manage object. That is, the state of attributes, which buffers to use for each attribute, and how to pull data out from those buffers, is collected into a VAO. Although we can implement VAOs in WebGL 1 by using extensions, they are available by default in WebGL 2.

This is an important feature that should always be used, since it significantly reduces rendering times. When not using VAOs, all attributes data is in global WebGL state, which means that calling functions such as gl.vertexAttribPointer, gl.enableVertexAttribArray, and gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer) manipulates the global state. This leads to performance loss, because before any draw call, we would need to set up all vertex attributes and set the ELEMENT_ARRAY_BUFFER...

Let's refactor a previous example using VAOs:

1. Open up ch02_01_square.html in your editor.
2. First, we update our global variables:

// Global variables that are set and used
// across the application
let gl,
  program,
  squareVAO,
  squareIndexBuffer,
  indices;

3. We've replaced squareVertexBuffer with squareVAO, as we no longer need to reference the vertex buffer directly.

4. Next, we update the initBuffers functions as follows:

// Set up the buffers for the square
function initBuffers() {
  /*
    V0                    V3
    (-0.5, 0.5, 0)        (0.5, 0.5, 0)
    X---------------------X
    |                     |
    |                     |
    |       (0, 0)        |
    |                     |
    |                     |
    X---------------------X
    V1                    V2
    (-0.5, -0.5, 0)       (0.5, -0.5, 0)
  */
  const vertices...

Let's revisit the signature of the drawElements function:

gl.drawElements(mode, count, type, offset)

The first parameter determines the type of primitives that we are rendering. In the following section, we will see the different rendering modes with examples.

Follow the given steps:

1. Open the ch02_04_rendering-modes.html file in your browser. This example follows the same structure as in the previous section.
2. Open ch02_04_rendering-modes.html in your editor and scroll down to the initBuffers function:

function initBuffers() {
  const vertices = [
    -0.5, -0.5, 0,
    -0.25, 0.5, 0,
    0.0, -0.5, 0,
    0.25, 0.5, 0,
    0.5, -0.5, 0
  ];

  indices = [0, 1, 2, 0, 2, 3, 2, 3, 4];

  // Create VAO
  trapezoidVAO = gl.createVertexArray();

  // Bind VAO
  gl.bindVertexArray(trapezoidVAO);

  const trapezoidVertexBuffer = gl.createBuffer();
  gl.bindBuffer...

When dealing with buffers for the getParameter, getBufferParameter, and isBuffer functions, new information about the state of the rendering pipeline becomes available to us.

Similar to Chapter 1, Getting Started, we will use getParameter(parameter), where parameter can have the following values:

• ARRAY_BUFFER_BINDING: Retrieves a reference to the currently-bound VBO
• ELEMENT_ARRAY_BUFFER_BINDING: Retrieves a reference to the currently-bound IBO

We can also query the size and the usage of the currently-bound VBO and IBO using getBufferParameter(type, parameter), where type can have the following values:

• ARRAY_BUFFER: To refer to the currently-bound VBO
• ELEMENT_ARRAY_BUFFER: To refer to the currently-bound IBO

And parameter can have the following values:

• BUFFER_SIZE: Returns the size of the requested buffer
• BUFFER_USAGE: Returns...

Follow the given steps:

1. Open the ch02_05_state-machine.html file in your browser. You should see the following:

2. Open ch02_05_state-machine.html in your editor and scroll down to the initBuffers method:

function initBuffers() {
  const vertices = [
    1.5, 0, 0,
    -1.5, 1, 0,
    -1.5, 0.809017, 0.587785,
    -1.5, 0.309017, 0.951057,
    -1.5, -0.309017, 0.951057,
    -1.5, -0.809017, 0.587785,
    -1.5, -1, 0,
    -1.5, -0.809017, -0.587785,
    -1.5, -0.309017, -0.951057,
    -1.5, 0.309017, -0.951057,
    -1.5, 0.809017, -0.587785
  ];

  indices = [
    0, 1, 2,
    0, 2, 3,
    0, 3, 4,
    0, 4, 5,
    0, 5, 6,
    0, 6, 7,
    0, 7, 8,
    0, 8, 9,
    0, 9, 10,
    0, 10, 1
  ];

  // Create VAO
  coneVAO = gl.createVertexArray();

  // Bind VAO
  gl.bindVertexArray(coneVAO);

  const coneVertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER...

So far, we’ve rendered very simple objects. Now, let's investigate how to load a geometry (vertices and indices) from a file instead of declaring the vertices and indices every time we call initBuffers. To do this, we will make asynchronous calls to the web server using AJAX. We will retrieve the file with our geometry from the web server and then use the built-in JSON parser to convert the context of our files into JavaScript objects. In our case, these objects will be the vertices and indices arrays.

JSON stands for JavaScript Object Notation. It is a lightweight, text-based, open format used for data interchange. JSON is commonly...

Most modern web browsers support native JSON encoding and decoding. Let's examine the methods available inside this object:

Let's learn how to encode and decode with the JSON notation by creating a simple model—a 3D line. Here, we will be focusing on how we do JSON encoding and decoding. Follow the given steps:

1. In your browser, open the interactive JavaScript console. Use the following table for assistance:

2. Create a JSON object by typing the following...

Follow the given steps:

1. Make sure that your web server is running and access the ch02_07_ajax-cone.html file using your web server.

2. The folder containing the code for this chapter should look like this:

3. Click on ch02_07_ajax-cone.html.
4. The example will load in your browser and you will see something similar to this:

5. Please review the load functions to better understand the use of AJAX and JSON in the application.
6. How is the global model variable used? (Check the source code.)
7. Check what happens when you change the color in the common/models/geometries/cone.json file and reload the page.
8. Modify the coordinates of the cone in the common/models/geometries/cone.json file and reload the...

Let's cover some useful functions that we can refactor for use in later chapters:

1. Open common/js/utils.js in your editor to see the following changes.
2. We have added two additional methods, autoResizeCanvas and getShader, to utils.js that look very similar to the code we implemented earlier in this chapter:

'use strict';

// A set of utility functions for /common operations across our 
// application
const utils = {

  // Find and return a DOM element given an ID
  getCanvas(id) {
    // ...
  },

  // Given a canvas element, return the WebGL2 context
  getGLContext(canvas) {
    // ...
  },

  // Given a canvas element, expand it to the size of the window
  // and ensure that it automatically resizes as the window changes
  autoResizeCanvas(canvas) {
    const expandFullScreen = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight...

Let’s summarize what we’ve learned in this chapter:

• The WebGL API itself is just a rasterizer and, conceptually, is fairly simple.
• WebGL's rendering pipeline describes how the WebGL buffers are used and passed in the form of attributes to be processed by the vertex shader. The vertex shader parallelizes vertex processing in the GPU. Vertices define the surface of the geometry that is going to be rendered. Every element on this surface is known as a fragment. These fragments are processed by the fragment shader.
• Fragment processing also occurs in parallel in the GPU. When all fragments have been processed, the framebuffer, a two-dimensional array, contains the image that is then displayed on your screen.
• WebGL is actually a pretty simple API. Its job is to execute two user-supplied functions, a vertex shader and fragment shader, and draw triangles, lines...