Time for action – rendering a square

Follow the given steps:

1. Open the file ch_Square.html in your favorite HTML editor (ideally one that supports syntax highlighting like Notepad++ or Crimson Editor).

2. Let's examine the structure of this file with the help of the following diagram:

   

3. The web page contains the following:

   • The script <script id="shader-fs" type="x-shader/x-fragment"> contains the fragment shader code.

   • The script <script id="shader-vs" type="x-shader/x-vertex"> contains the vertex shader code. We will not be paying attention to these two scripts as these will be the main point of study in the next chapter. For now, let's notice that we have a fragment shader and a vertex shader.

   • The next script on our web page <script id="code-js" type="text/javascript"> contains all the JavaScript WebGL code that we will need. This script is divided into the following functions:

   • getGLContext : Similar to the function that we saw in the previous chapter, this function allows us to get...