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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.