Time for Action: Rendering a Square

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...