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

「爱情、让人受尽委屈。」 2022-05-07 01:27 448阅读 0赞

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

上一节我们用WebGL绘制了一些简单的汉字：[原生webgl学习（六） 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);
     }

实现效果：

![70][]

[https_gitee.com_babyogl_learnWebGL]: https://gitee.com/babyogl/learnWebGL
[webgl_ WebGL]: https://blog.csdn.net/qq_37338983/article/details/83048290
[70]: /images/20220506/9fb92a7785444db697a0fd3b9a549409.png

发表评论取消回复

表情：

评论列表（有 0 条评论，448人围观）

还没有评论，来说两句吧...

相关阅读

相关 webgl：关于webgl

*webgl可以与其他web界面元素相结合。** webgl可以以分层的形式置于其他内容页面的上方或下方。3d canvas可以占据页面的一部分或者整个页面，它也可以...

分手后的思念是犯贱/ 2024年04月17日 06:06/ 0 赞/ 14 阅读

相关 webgl学习：绘制一个三角形

近在学习three.js，为了更好的理解threejs，特别来学习一下webgl。webgl是更为底层的方法，但是在某些情况three未提供方法的情况下，便可以使用。 ...

雨点打透心脏的1/2处/ 2024年04月17日 05:51/ 0 赞/ 13 阅读

相关 WEBGL - 七种基本图形的绘制

通过`gl.drawArrays(mode, girst,count)`方法，可以绘制七种基本图形，如下表所示 <table> <thead> <tr> <

ゞ浴缸里的玫瑰/ 2022年10月22日 06:26/ 0 赞/ 137 阅读

相关原生webgl学习（九） WebGL动画：不断改变顶点颜色

本专栏所有代码均可以在我的码云下载到：[https://gitee.com/babyogl/learnWebGL][https_gitee.com_babyogl_learnW

ゝ一纸荒年。/ 2022年05月15日 15:47/ 0 赞/ 224 阅读

相关原生webgl学习（二）用WebGL绘制一个三角形

所有示例代码均可在我的gitee码云上，读者可自行下载：[https://gitee.com/babyogl/learnWebGL][https_gitee.com_babyo

ゝ一世哀愁。/ 2022年05月08日 09:46/ 0 赞/ 263 阅读

相关原生webgl学习（一）原生WebGL学习和入门引言

一.笔者自述对于原生WebGL的学习，相信对于很多搞前端图形开发的小伙伴的痛点是花了很多时间，却收效甚微；好在现在存在诸如Three.js、Babylo

曾经终败给现在/ 2022年05月08日 09:33/ 0 赞/ 625 阅读

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

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：[https://gitee.com/babyogl/learnWebGL][https_gitee.co

「爱情、让人受尽委屈。」/ 2022年05月07日 01:27/ 0 赞/ 449 阅读

相关原生webgl学习（六） WebGL写简单的汉字（一）

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：[https://gitee.com/babyogl/learnWebGL][https_gitee.co

柔光的暖阳◎/ 2022年05月06日 23:56/ 0 赞/ 400 阅读

相关原生webgl学习（五） WebGL绘制矩形（二）：更简洁的代码

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：[https://gitee.com/babyogl/learnWebGL][https_gitee.co

淡淡的烟草味﹌/ 2022年05月06日 14:58/ 0 赞/ 320 阅读

相关原生webgl学习（四） WebGL绘制矩形（一）

本专栏所有文章示例代码均可在我的gitee码云上获取，读者可自行下载：[https://gitee.com/babyogl/learnWebGL][https_gitee.co

爱被打了一巴掌/ 2022年05月06日 13:48/ 0 赞/ 245 阅读