WebGL - Colors-alljchome-开发者的教程家园

WebGL Tutorial

WebGL Application

WebGL Examples

WebGL Useful Resources

Selected Reading

WebGL - Colors

In all our previous examples, we appped color to the object by assigning a desired color value to the gl_FragColor variable. In addition to that, we can define colors for each vertex − just pke vertex coordinates and indices. This chapter takes an example to demonstrate how to apply colors to a quadrilateral using WebGL.

Applying Colors

To apply colors, you have to define the colors for each vertex using the RGB values, in JavaScript array. You can assign the same values to all the vertices to have a unique color to the object. After defining the colors, you have to create a color buffer and store these values in it, and associate it to the vertex shader attributes.

In the vertex shader, along with the coordinates attribute (that holds the position of the vertices), we define an attribute and a varying to handle colors.

The color attribute holds the color value per vertex, and varying is the variable that is passed as an input to the fragment shader. Therefore, we have to assign the color value to varying.

In the fragment shader, the varying that holds the color value is assigned to gl_FragColor, which holds the final color of the object.

Steps to Apply Colors

The following steps are required to create a WebGL apppcation to draw a Quad and apply colors to it.

Step 1 − Prepare the Canvas and Get the WebGL Rendering Context

In this step, we obtain the WebGL Rendering context object using getContext().

Step 2 − Define the Geometry and Store it in the Buffer Objects

A square can be drawn using two triangles. Therefore, in this example, we provide the vertices for two triangles (with one common edge) and indices. Since we want to apply colors to it, a variable holding the color values is also defined and the color values for each (Red, Blue, Green, and Pink) are assigned to it.

var vertices = [
   -0.5,0.5,0.0,
   -0.5,-0.5,0.0, 
   0.5,-0.5,0.0,
   0.5,0.5,0.0 
];

var colors = [ 0,0,1, 1,0,0, 0,1,0, 1,0,1,];
indices = [3,2,1,3,1,0];

Step 3 − Create and Compile the Shader Programs

In this step, you need to write the vertex shader and fragment shader programs, compile them, and create a combined program by pnking these two programs.

Vertex Shader − In the vertex shader of the program, we define vector attributes to store 3D coordinates (position), and the color of each vertex. A varing variable is declared to pass the color values from the vertex shader to the fragment shader. And finally, the value stored in the color attribute is assigned to varying.

var vertCode =  attribute vec3 coordinates; +
    attribute vec3 color; +
    varying vec3 vColor; +
	
    void main(void) {  +
        gl_Position = vec4(coordinates, 1.0);  +
       vColor = color; +
    } ;

Fragment Shader − In the fragment shader, we assign the varying to the gl_FragColor variable.

var fragCode =  precision mediump float; +
    varying vec3 vColor; +
    void main(void) { +
       gl_FragColor = vec4(vColor, 1.); +
    } ;

Step 4 − Associate the Shader Programs with the Buffer Objects

In this step, we associate the buffer objects and the shader program.

Step 5 − Drawing the Required Object

Since we are drawing two triangles that will form a quad, using indices, we will use the method drawElements(). To this method, we have to pass the number of indices. The value of indices.length indicates the number of indices.

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Example – Applying Color

The following program demonstrates how to draw a quad using WebGL apppcation and apply colors to it.