WebGl’s graphic transformation is nothing more than matrix transformation of vertex coordinates. Let’s look at some examples below.

Mobile graphics

1. If you want to change the vertex coordinates, you need to operate with the original coordinates through variable translation to change the position. This part needs to be written in GLSL.

          attribute vec3 coordinates;
          uniform mat4 translation;
          void main(void) {
            gl_Position = translation*vec4(coordinates,1.0); // This is the first translation
          };
Copy the code

2. In two dimensions, the movement of the graph is no more than up, down and left. So the corresponding matrix is as follows, TX TY is the offset of up, down, left, right. Z to be determined

        var xformMatrix = new Float32Array([
            1.0.0.0.0.0.0.0.0.0.1.0.0.0.0.0.0.0.0.0.1.0.0.0,
            Tx, Ty, Tz, 1.0
        ]);
Copy the code

3. How to pass the parameters that need to be dynamically changed to shader through JS code to achieve graph movement

        gl.uniformMatrix4fv(translation, false, xformMatrix);
        // Repeat step 5 - draw the desired objects
        gl.clearColor(0.5.0.5.0.5.0.9);
        gl.enable(gl.DEPTH_TEST);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.viewport(0.0, myCanvas.width, myCanvas.height);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
Copy the code

Change movement parameters by clicking on events

    switch (event.keyCode){
        case 37:
            Tx -= 0.05;
            break;
        case 38:
            Ty += 0.05;
            break;
        case 39:
            Tx += 0.05;
            break;
        case 40:
            Ty -= 0.05;
            break;
    }
Copy the code

Rotating graphics

1. If you want to rotate the graph, you can also modify the vertex coordinates by dot multiplying the rotation matrix.

         attribute vec3 coordinates; 
         uniform mat4 Pmatrix;
         uniform mat4 Vmatrix;
         uniform mat4 Mmatrix;
         attribute vec3 color;
         varying vec3 vColor;
         void main(void) {
            gl_Position = rotate*vec4(coordinates,1.0);
            vColor = color;
         }
Copy the code

2. If YOU have studied mechanics, you should know that a force can be decomposed into forces in other two directions, and the rotation direction can also be decomposed into the rotation superposition of x, Y and Z directions. So let’s go in the z direction. B is the rotation Angle.

         var zformMatrix = new Float32Array([
            cosB,  sinB, 0.0.0.0,
            -sinB, cosB, 0.0.0.0.0.0.0.0.1.0.0.0.0.0.0.0.0.0.1.0
        ]);
Copy the code

The x axis

         xformMatrix = new Float32Array([
            1.0.0.0.0.0.0.0.0.0, cosB, sinB, 0.0.0.0, -sinB, cosB, 0.0.0.0.0.0.0.0.1.0
        ]);
Copy the code

y

         yformMatrix = new Float32Array([
            cosB, 0.0, sinB, 0.0.0.0.1.0.0.0.0.0,
           -sinB, 0.0, cosB, 0.0.0.0.0.0.0.0.1.0
        ]);
Copy the code

Scaling of the graphics

1. Scaling is used to modify vertex coordinates by scaling multiple.

     attribute vec3 coordinates;
     uniform mat4 scale;
     void main(void) {
       gl_Position = scale*vec4(coordinates,1.0);
     }
Copy the code

2. Scale matrix is as follows.

         var xformMatrix = new Float32Array([
            Sx,   0.0.0.0.0.0.0.0,  Sy,   0.0.0.0.0.0.0.0,  Sz,   0.0.0.0.0.0.0.0.1.0
        ]);

Copy the code

3. How to pass the parameters that need to be dynamically changed to shader through JS code to achieve graph movement

        var scale = gl.getUniformLocation(shaderProgram,'scale');
        gl.uniformMatrix4fv(scale, false, xformMatrix);
        gl.clearColor(0.5.0.5.0.5.0.9);
        gl.enable(gl.DEPTH_TEST);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.viewport(0.0, myCanvas.width, myCanvas.height);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
Copy the code

Change movement parameters by clicking on events

     document.addEventListener("keyup".function (event) {
            switch (event.keyCode){
                case 38:
                    Sx += 0.05;
                    Sy += 0.05;
                    Sz += 0.05;
                    break;
                case 40:
                    Sx -= 0.05;
                    Sy -= 0.05;
                    Sz -= 0.05;
                    break;
            }

            // Repeat the above steps
            xformMatrix = new Float32Array([
                Sx,   0.0.0.0.0.0.0.0,  Sy,   0.0.0.0.0.0.0.0,  Sz,   0.0.0.0.0.0.0.0.1.0
            ]);
            gl.uniformMatrix4fv(scale, false, xformMatrix);
            // Repeat step 5 - draw the desired objects
            gl.clearColor(0.5.0.5.0.5.0.9);
            gl.enable(gl.DEPTH_TEST);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.viewport(0.0, myCanvas.width, myCanvas.height);
            gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

        });
Copy the code