Getting Started with WebGL Tutorial (iv)-WEBGL color

Previous article:WebGL Getting Started tutorial (i)-initial knowledge of WebGLWebGL Getting Started Tutorial (ii)-WEBGL drawing trianglesGetting Started with WebGL Tutorial (iii)-WEBGL animation

Color:

Operation Steps:

1. Create HTML5 Canvas

2. Get the canvas's ID

3. Get WebGL

4. Compiling shaders

5. Using a buffer object to pass multiple vertex data to a vertex

6. Drawing Images

For more information: http://www.cnblogs.com/bsman/p/6128447.html

4. Compiling shaders

Change vertex shader, slice shader

// vertex shader program    var Vshader_source =        "attribute vec4 a_position;" + "attribute vec4 a_color        ;" +        "varying vec4 v_color;" +        " void Main () {"+        " gl_position = a_position; "+        " v_color = a_color; "+         "} ";     // Slice shader    var Fshader_source =        "precision mediump float;" + "        varying vec4 v_color;" +         "void Main () {" +         "Gl_ Fragcolor = V_color; "+         "} ";

Explanation: Defines the variable varying that modifies the color, where "v_color = A_color;" means the color data is passed to the slice shader; "Gl_fragcolor = V_color;" Indicates that data is received from the vertex shader;

5. Using a buffer object to pass multiple vertex data to a vertex

functioninitbuffers (gl,shaderprogram) {//vertex coordinates and colors    varvertices =NewFloat32array ([0.0, 0.5, 1.0, 0.0, 0.0,       -0.5,-0.5, 0.0, 1.0, 0.0,        0.5,-0.5, 0.0, 0.0, 1.0,    ]); varn = 3;//Number of points    //creating a Buffer object    varVertexBuffer =Gl.createbuffer (); //bind a buffer object to a targetGl.bindbuffer (GL.    Array_buffer,vertexbuffer); //writing data to a bufferGl.bufferdata (GL. Array_buffer,vertices,gl.    Static_draw); Get a single bytevarFsize =vertices.    Bytes_per_element; //Get coordinate points    varA_position = Gl.getattriblocation (Shaderprogram, ' a_position '); //assigning a buffer object to a a_position variableGl.vertexattribpointer (A_position, 2, GL. FLOAT,false, fsize*5, 0); //connect the a_position variable with the buffer object assigned to itGl.enablevertexattribarray (a_position); //get color coordinate point    varA_color = Gl.getattriblocation (Shaderprogram, ' A_color '); //assigning a buffer object to a a_position variableGl.vertexattribpointer (A_color, 3, GL. FLOAT,false, Fsize*5, fsize*2); //connect the a_position variable with the buffer object assigned to itGl.enablevertexattribarray (A_color); returnN;}

Where the Vertexattribpointer method notes that there are multiple data in the array, with coordinates and colors, the values of fifth (span) and sixth (displacement) should be modified at this time

First parameter: Specify the storage location of the attribute variable to be allocated

Second parameter: Specify the number of components for each vertex in the buffer (1~4)

Third parameter: type has, GL. Unsigned_byte unsigned bytes, gl. Short shorter integer, gl. Unsigned_short unsigned short integer, gl. int integral type, GL. Unsigned_int unsigned integral type, GL. float floating point type.

Fourth parameter: Indicates whether to classify non-floating-point data into the [0,1][-1,1] Interval

Fifth parameter: The number of bytes adjacent to the two vertices. Default is 0

The sixth parameter: represents the offset (in bytes) of the buffer object, which is where the attribute variable starts to be stored from the buffer.

6. Drawing Images

var n = initbuffers (gl,shaderprogram);     if (n<0) {        console.log (' Failed to set the positions ');         return ;    }     // Clear Colors    for specified < canvas > Gl.clearcolor (0.0, 0.0, 0.0, 1.0);     // Clear <canvas>     Gl.clear (GL. color_buffer_bit);     0, N);

Getting Started with WebGL Tutorial (iv)-WEBGL color