Time for action – rendering modes

Follow the given steps:

1. Open the file ch_RenderingModes.html in the HTML5 browser of your preference. This example follows the same structure as discussed in the previous section.

2. Select the WebGL JS button and scroll down to the initBuffer function.

3. You will see here that we are drawing a trapezoid. However, on screen you will see two triangles! We will see how we did this later.

4. At the bottom of the page, there is a combobox that allows you to select the different rendering modes that WebGL provides, as shown in the following screenshot:

   

5. When you select any option from this combobox, you are changing the value of the renderingMode variable defined at the top of the WebGL JS code (scroll up if you want to see where it is defined).

6. To see how each option modifies the rendering, scroll down to the drawScene function.

7. You will see there that after binding the IBO trapezoidIndexBuffer with the following instruction:

   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, trapezoidIndexBuffer...