原生webgl学习（七） WebGL写简单的汉字（二）：绘制更多个字

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37338983/article/details/83049018

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：https://gitee.com/babyogl/learnWebGL；本文demo代码在chapter-03下的draw-word-02.html，读者可以自行下载查看；

上一节我们用WebGL绘制了一些简单的汉字：原生webgl学习（六） WebGL写简单的汉字；以此为基础，我们再实现多个汉字的复制和呈现，并控制它们的平移、缩放和旋转变换；本节的代码和上一节课差不多，在这里只讲述改变的部分；这一节，矩阵运算我们不再引用m3.js这个文件，我们可以自己动手写简单的矩阵运算，自己构建3*3矩阵的一些运算：

 let m3 = {
            //单位矩阵
            identity: function() {
                return [
                    1, 0, 0,
                    0, 1, 0,
                    0, 0, 1
                ]
            },
            //平移矩阵
            translation: function(tx, ty) {
                return [
                    1, 0, 0,
                    0, 1, 0,
                    tx, ty, 1
                ]
            },
            //旋转矩阵
            rotation: function(angle) {
                let c = Math.cos(angle);
                let s = Math.sin(angle);

                return [
                    c, -s, 0,
                    s, c, 0,
                    0, 0, 1
                ]
            },
            //缩放矩阵
            scaling: function(sx, sy) {
                return [
                    sx, 0, 0,
                    0, sy, 0,
                    0, 0, 1
                ]
            },
            //矩阵乘法
            multiply: function(a, b) {
                let a00 = a[0 * 3 + 0];
                let a01 = a[0 * 3 + 1];
                let a02 = a[0 * 3 + 2];
                let a10 = a[1 * 3 + 0];
                let a11 = a[1 * 3 + 1];
                let a12 = a[1 * 3 + 2];
                let a20 = a[2 * 3 + 0];
                let a21 = a[2 * 3 + 1];
                let a22 = a[2 * 3 + 2];
                let b00 = b[0 * 3 + 0];
                let b01 = b[0 * 3 + 1];
                let b02 = b[0 * 3 + 2];
                let b10 = b[1 * 3 + 0];
                let b11 = b[1 * 3 + 1];
                let b12 = b[1 * 3 + 2];
                let b20 = b[2 * 3 + 0];
                let b21 = b[2 * 3 + 1];
                let b22 = b[2 * 3 + 2];
                return [
                    b00 * a00 + b01 * a10 + b02 * a20,
                    b00 * a01 + b01 * a11 + b02 * a21,
                    b00 * a02 + b01 * a12 + b02 * a22,
                    b10 * a00 + b11 * a10 + b12 * a20,
                    b10 * a01 + b11 * a11 + b12 * a21,
                    b10 * a02 + b11 * a12 + b12 * a22,
                    b20 * a00 + b21 * a10 + b22 * a20,
                    b20 * a01 + b21 * a11 + b22 * a21,
                    b20 * a02 + b21 * a12 + b22 * a22,
                ];
            }
      };

构建多个文字并控制其变换：

 let tMatrix = m3.translation(translate[0], translate[1]);
 let rMatrix = m3.rotation(angle);
 let sMatrix = m3.scaling(scale[0], scale[1]);
 // let orignMatrix = m3.translation(-50, -75);//约束图形绕(-50, -75)点旋转
 var matrix = m3.identity();
 for (let i = 0; i < 8; i++) {
         matrix = m3.multiply(matrix, tMatrix);
         matrix = m3.multiply(matrix, rMatrix);
         matrix = m3.multiply(matrix, sMatrix);
         // matrix = m3.multiply(matrix, orignMatrix);
         gl.uniformMatrix3fv(program.mLocation, false, matrix);
         gl.drawArrays(gl.TRIANGLES, 0, wang.length / 2);
 }

实现效果：