Shader variable

The shader language is a strongly typed language. When declaring a variable, you must specify the type of the variable. The basic format is < type > < variable name >.

Variable types in shaders are divided into:

  1. Basic types (float, int, bool)
  2. Vector types (VEC2, VEC3, VEC4, IVec2, IVec3, IVec4, bVEC2, bVEC3, bVEC4)
  3. Matrix types (MAT2, MAT3, MAT4)

To create a variable of the corresponding type, simply call the function that is also built into the shader. For example, the vec3 function can create variables of type VEC3.

Using shaders

In the previous chapter, we wrote a WebGL program without using shaders. Let’s draw a dot to show you how to use shaders.

Get canvas and WebGL contexts

let canvas = document.querySelector("#canvas");

function getContext(canvas) {
    let contextNames = ["webgl"."experminal-webgl"];
    for (let i=0; i<contextNames.length; i++) {
        let contextName = contextNames[i];
        let gl = canvas.getContext(contextName);
        if (gl) {
            return gl
        }
    }
}

let gl = getContext(canvas)
Copy the code

Create shader source code

We create shader code using template strings. The built-in variable gl_Position is of type VEC4, or four-dimensional vector. The built-in variable gl_FragColor is of vec4 type, also a four-dimensional vector, with four components representing R, G, B and Alpha respectively.

// The vertex shader sets the vertex position at the origin (0, 0, 0) and then sets the vertex size to 10 for easy observation
let vertexShaderSource = 'void main() {gl_Position = vec3(0.0, 0.0, 0.0); Gl_PointSize = 10.0; } `

// The pixel shader sets the pixel color to red
let fragmentShaderSource = Void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `
Copy the code

Here you can change gl_Position in the vertex shader to see where the vertices are drawn. If you change x to 0.5, the vertices will appear in the right quarter, which also verifies the orientation and range of WebGL coordinates.

Create a shader

We need to create the shader object, pass the shader source to the object, and compile the shader code.

function createShader(gl, type, source) {
    // Create a shader object
    let shader = gl.createShader(type);
    // Fill shader object with shader program source code
    gl.shaderSource(shader, source);
    // Compile the shader
    gl.compileShader(shader);
    let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
        return shader
    }
}

let vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
let fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
Copy the code

To create the program

Here you create a program, assign the compiled shader to the program, then link the program object and tell WebGL to use it.

function createProgram(gl, vertexShader, fragmentShader) {
    // Create a program object
    let program = gl.createProgram();
    // Assign shaders to program objects
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    // the linker object
    gl.linkProgram(program);
    let success = gl.getProgramParameter(program, gl.LINK_STATUS);
    ig (success) {
        return program
    }
}

let program = createProgram(gl, vertexShader, fragmentShader);
// Use program objects
gl.useProgram(program)
Copy the code

Empty canvas

gl.clearColor(0.0.0.1);
gl.clear(gl.COLOR_BUFFER_BIT)
Copy the code

draw

Tell WebGL that we are drawing as dots, so a red dot will appear in the center of the canvas on a black background.

gl.drawArrays(gl.POINTS, 0.1)
Copy the code

The full sample code is on Githublearn-webgl