WebGL 3D with Perspective View

Now let's convert this 2D triangle to a 3D triangle and see some interesting modifications. A third value is added to each vertex, which is set to -2.0. Note that no position is specified for the camera and therefore, it defaults to the origin (0, 0, 0), with the camera lens pointing down the negative z axis.

Engage thrusters

We specify the vertices in 3D just as we did in 2D, using a vertices array, but now each vertex is made up of (x, y, z) values. In WebGL, negative z values are further away and the positive direction is towards the user's location. Not all 3D coordinate systems specify negative values as away from the user. Classical geometry sometimes presents the negative values as towards the user. Still, other ...

Get WebGL HOTSHOT now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.