WebGL Beginner's Guide

Rendering geometry in WebGL

The following are the steps that we will follow in this section to render an object in WebGL:

1. First, we will define a geometry using JavaScript arrays.
2. Second, we will create the respective WebGL buffers.
3. Third, we will point a vertex shader attribute to the VBO that we created in the previous step to store vertex coordinates.
4. Finally, we will use the IBO to perform the rendering.

Defining a geometry using JavaScript arrays

Let's see what we need to do to create a trapezoid. We need two JavaScript arrays: one for the vertices and one for the indices.

As you can see from the previous screenshot, we have placed the coordinates ...