Getting started with webgl (2)

1. Draw a point

//  Vertex shader program 
var VSHADER_SOURCE =
    'void main() {\n' +
    '  gl_Position = vec4(-0.5, -0.5, 0.0, 1.0);\n' + 
    '  gl_PointSize = 30.0;\n' +                   
    '}\n';

//  Chip shader program 
var FSHADER_SOURCE =
    'void main() {\n' +
    '  gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0);\n' +
    '}\n';
function main() {
    //  obtain  <canvas>  Elements 
    var canvas = document.getElementById('webgl');

    //  obtain WebGL Rendering context 
    var gl = getWebGLContext(canvas);
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    //  Initialize shaders 
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    //  Specify empty <canvas> The color of the 
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //  Empty <canvas>
    gl.clear(gl.COLOR_BUFFER_BIT);

    //  Draw a point 
    gl.drawArrays(gl.POINTS, 0, 1);
}

Here we need to talk about the concept of shaders

2. Shaders

webgl There are two kinds of shaders ：
(1) Vertex shader ( abbreviation vs): seeing the name of a thing one thinks of its function , It describes the characteristics of vertices , Mainly including location , Color, etc. . It is a point in two-dimensional or three-dimensional space ;
(2) Chip shader ( abbreviation fs): It can be understood as pixels , It is a unit of image , Piece by piece

3. Execution process

4. Execution results

Why is it displayed in the lower left corner ？ stay webgl In the system , Divide the display area into four quadrants ：
First quadrant ：（+,+）;
Beta Quadrant ：（-,+）;
The third quadrant ：（-,-）;
Quadrant four ：（+,-）;
**** Other explanations ：
gl_Position = vec4(-0.5, -0.5, 0.0, 1.0)：vec4 type , Describe the location of x.y.z coordinate , Finally, add a 1.0 As a component , The coordinates are transformed into a homogeneous coordinate .
gl_FragColor = vec4(1.0, 0.5, 0.0, 1.0)：vec4 type , Describing color r,g,b,a;**