Back to WebGL

It is time to go back to our JavaScript code. Now, how do we 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 that we have developed so far:

Each application has a vertex shader and a fragment shader embedded in the web page. Then we have 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 runWebGLApp function on the onLoad event of the web page. This is the entry point for our application. The first thing that runWebGLApp does is to obtain a WebGL context for the canvas, and then calls a series of functions that...