Real-Time 3D Graphics with WebGL 2 - Second Edition

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