It’s time to go back to our JavaScript code, but we now need to consider how to close the gap between our JavaScript code and our ESSL code. First, we need to take a look at how we create a program using our WebGL context. Please remember that we refer to both the vertex shader and fragment shader as the program. Second, we need to know how to initialize attributes and uniforms.

Let's take a look at the structure of the web apps we have developed so far:

Each application has a vertex shader and a fragment shader embedded in the web page. In addition, there is a script section where we write all of our WebGL code. Finally, we have the HTML code that defines the page components, such as titles and the location of the widgets and the canvas.

In the JavaScript code, we are calling the init function on the onload event of the web page. This is the entry point...