Game Development Reference
In-Depth Information
Understanding colors
Similar to most graphics systems, WebGL also uses the RGBA model to illuminate
pixels on a screen. The alpha channel (A) is the extended attribute to denote the
opacity of an object. We will use this value for advanced techniques, such as
blending, in the following chapters. Each value of RGBA ranges from
0.0
(none) to
1.0
(full intensity) in WebGL. The value of
1.0
for the alpha channel will denote that
the object is opaque and the value of
0.0
will denote that the object is transparent.
We will store color values in the
vec4
data type as follows:
var color=
vec4.fromValues(0.0,0.0,1.0,1.0);//(red,green,blue,alpha)
//Blue color with full intensity
var color=
vec4.fromValues(1.0,0.0,0.0,1.0);//Red color with full intensity
Colors in WebGL are used to represent object material properties, light properties,
and painting/clearing of the WebGL context.
Like vertices' positions, color values are stored for shaders in vertex buffer objects.
Coloring our square
Our example uses per-vertex coloring. Per-vertex coloring is rarely used in gaming
applications. It is mostly used in engineering applications, but it is a good example
to start with as you might run into cases where you need to use per-vertex coloring
in games.
In our previous examples, we discussed that each vertex had a position. These
positions were stored in flat arrays. In our example of the square, we had four
vertices shared between two triangles. Now, we will assign color [R, G, B] values to
each vertex so that we get the square colored as shown in the following screenshot:
