Game Development Reference
In-Depth Information
Vertex
Eye
Coordinates
Clip
Coordinates
Vertex
Coordinates
Normalized
Device Coordinates
Modelview
matrix
Window
Coordinates
Projection
matrix
Perspective
division
Viewport
transformation
The current GPUs use a programmable rendering pipeline. The earlier graphics
card did not allow us to directly change or manipulate the vertices but had built-in
functions to rotate or scale them. The programmable rendering pipeline gives us full
flexibility to modify vertices of our objects. We can write our own functions to control
how our objects are rendered using vertex and fragment shaders. The following
diagram describes the different components of the programmable rendering pipeline.
We will cover the details of shaders in the
A walkthrough of the WebGL API
section.
Uniform variables
Varying variables
Primitive
assembly /
Rasterization
JavaScript
Vertex shader
Buffers
Attributes
- Control code
- Initialize WebGL
- Context compiling and linking
of shaders
- Enabling vertex attributes
- Creating transformation matrix
- Association of buffer objects
with attributes
- Association of Uniforms
Rendering process starts when
we invoke the drawElements or
drawArray WebGL API call. The
vertex shader is executed once for
each vertex in the vertex buffer
object. Vertex shader calculates the
position of each vertex of a
primitive and stores it in varying
gl_position. It also calculates the
other attributes such as color that
are normally associated with a vertex.
The triangles are assembled
and passed to the rasterizer,
which interpolates the pixels
between the vertices in the
triangles. Also, culling/clipping
is perfomed in this step. We
eliminate primitives that are
hidden or partly/completely
lie outside the viewing area.
Pre-fragment
shader
Fragment
shader
Framebuffer
Framebuffer is the
default display in our
case.
Pixel ownership test, depth test,
dithering performed.
Fragment shader gets data from
vertex shader in varying variables,
gets primitives from the rasterization
stage, and then interpolates color
values for each pixel between
vertices.
