HTML and CSS Reference
In-Depth Information
Figure 9.6. A clean version of the rendering pipeline. Although not a be-all-end-all explanation, it explains the
basic steps WebGL goes through as it processes 3D data from start to finish.
What
figure 9.6
shows you is that when sending over the 3D data for entities to a
graphics card
, the data starts as
arrays
(computer data) and gets processed by the
GPU (graphics processing unit) into
vertex buffers
(more data). During this rendering
stage, additional information is required to assemble your 3D shapes (such as buffer vari-
ables). After processing vertex buffers, the data runs through a
vertex shader
to gener-
ate screen positioning and color information. 3D data is then further processed by the GPU
into triangle segments through the
triangle assembler
and then sent to a
rasterizer
that removes unnecessary visual data from shapes, generates pixel fragments, and smooth's
out color surfaces. Shape data then flows through a
fragment shader
, which outputs
color and depth for each pixel. Lastly, everything is drawn onto a user's screen by a
frame-
buffer
.
3D graphics and triangles? I don't get it.
When you're learning to create shapes with a 2D surface, you usually create a rectangle
first. But it isn't the simplest of shapes, and you can't easily fit a bunch of tiny rectangles
together to create a person's face or a ball. On the other hand, tiny triangles can fit together
to easily create almost any shape imaginable. For a great overview of triangles in 3D pro-
