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

Time for Action: Rendering Modes

Let's revisit the signature of the drawElements function:

gl.drawElements(mode, count, type, offset)

The first parameter determines the type of primitives that we are rendering. In the following section, we will see the different rendering modes with examples.

Follow the given steps:

1. Open the ch02_04_rendering-modes.html file in your browser. This example follows the same structure as in the previous section.
2. Open ch02_04_rendering-modes.html in your editor and scroll down to the initBuffers function:

function initBuffers() {  const vertices = [    -0.5, -0.5, 0,    -0.25, 0.5, 0,    0.0, -0.5, 0,    0.25, 0.5, 0,    0.5, -0.5, 0  ];  indices = [0, 1, 2, 0, 2, 3, 2, 3, 4];  // Create VAO  trapezoidVAO = gl.createVertexArray() ...