Coloring in WebGL with the coloring tool and webgl coloring Tool

Coloring in WebGL with the coloring tool and webgl coloring Tool

This series of articles translated from: https://developer.mozilla.org/en/WebGL

Address: https://developer.mozilla.org/en/WebGL/Using_shaders_to_apply_color_in_WebGL

Translation Description: The level is limited and it does not translate words by words, only to ensure that it meets the original meaning.

In the previous article, we created a square, and we obviously want to add some colors to it. We can implement this by modifying the coloring tool.

Add color to Vertex

In GL, objects are built through vertex sets. Each vertex contains its position and color. Colors on other pixels (other attributes, including positions) are calculated using linear interpolation to automatically create a smooth and excessive gradient effect. We didn't specify any color for the vertex before. The color set for each pixel is white, and the entire square is white.

Suppose we want to render a gradient so that the four corners of the Square are red, blue, green, and white. First, we need to specify the color of four vertices, create an array of color of the vertex, and store it in the WebGL buffer. We need to add the following code in the initBuffer () function:

Var colors = [
1.0, 1.0, 1.0, 1.0, // white
1.0, 0.0, 0.0, 1.0, // red
0.0, 1.0, 0.0, 1.0, // green
0.0, 0.0, 1.0, 1.0 // blue
];
  
SquareVerticesColorBuffer = gl. createBuffer ();
Gl. bindBuffer (gl. ARRAY_BUFFER, squareVerticesColorBuffer );
Gl. bufferData (gl. ARRAY_BUFFER, new Float32Array (colors), gl. STATIC_DRAW );
}

This Code creates a JavaScript array to place four color vectors. Then, these colors are stored through a new buffer. The array is converted to a WebGL floating point number and stored in the buffer.

To make these colors work, the vertex shader needs to be updated to obtain the correct color from the color buffer.

<script id="shader-vs" type="x-shader/x-vertex">
    attribute vec3 aVertexPosition;
    attribute vec4 aVertexColor;
    
    uniform mat4 uMVMatrix;
    uniform mat4 uPMatrix;
      
    varying lowp vec4 vColor;
    
    void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = aVertexColor;
    }
</script>

The key difference is that for each vertex, we set its color to the corresponding color value in the array.

Color fragments

Our fragment coloring tool was previously like this:

<script id="shader-fs" type="x-shader/x-fragment">
    void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
</script>

To select a color, modify the code to obtain the color value from vColor:

<script id="shader-fs" type="x-shader/x-fragment">
    varying lowp vec4 vColor;
        
    void main(void) {
        gl_FragColor = vColor;
    }
</script>

The modification is simple. Each clip obtains an interpolation color based on its relative vertex position, which is not fixed.

Draw with color

Next, it is the turn to add code in initShaders to initialize the color attribute for the coloring program.

vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);

Then modify the drawScene method to color the square:

gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);

In this case, if you view this example in a WebGL-compatible browser, you will see the following results: