O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Defining a geometry using JavaScript arrays

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required