WebGL

文件列表 index.html grid_object.js logic.js index.html grid_object.js logic.js

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战 友情提示 这篇文章是WebGL课程专栏的第29篇，强烈建议从前面开始看起。因为花了大量的工夫来讲解向量的概念和矩阵运算。这些基

二十九课代码，本代码使用与专栏第二十九课内容。读者自行复制到本地用任意http服务启动即可。 三个文件： index.html grid_object.js logic.js

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战 友情提示 这篇文章是WebGL课程专栏的第28篇，强烈建议从前面开始看起。因为花了大量的工夫来讲解向量的概念和矩阵运算。这些基础知识会影响

这是第二十八的代码，自行拷贝到本地，用任意http服务器启动即可。不要忘记images目录，放两张你要的图片。

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战 友情提示 这篇文章是WebGL课程专栏的第27篇，强烈建议从前面开始看起。因为花了大量的工夫来讲解向量的概念和矩阵运算。这些基础知识会影响

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战 友情提示 这篇文章是WebGL课程专栏的第26篇，强烈建议从前面开始看起。因为花了大量的工夫来讲解向量的概念和矩阵运算。这些基础知识会影响

index.html image.js imges/funny-cat.jpeg 目录结构就是上面这样。

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战 友情提示 这篇文章是WebGL课程专栏的第25篇，强烈建议从前面开始看起。因为花了大量的工夫来讲解向量的概念和矩阵运算。这些基础知识会影响

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战 本文的最后代码，用一篇单独的文章给出，需要的小伙伴直接跳：二十四课代码 引子 上一次课，我们用三个点，画出了一个三角形。并且中间填充了黑色

二十四课代码： index.html: models_tri.js 将上面两个文件放在一个目录里，用任意http服务器监听此目录即可

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战 本文的最后代码，用一篇单独的文章给出，需要的小伙伴直接跳：二十三课代码 引子 前面的课程用了很多的篇幅来讲一些基础的知识。对于这些基础的知识

二十三课代码： index.html: models_tri.js 将上面两个文件放在一个目录里，用任意http服务器监听此目录即可

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战 引子 前面用了很多次课，讲了矩阵在我们这里的应用。我们这次课就来搞一搞2D情况下的实战。 写一个生成模型的js文件，单独出去 所有的东西放在

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战 引子 前面几次课，不得不用这些严谨的数学推导来表达矩阵以及矩阵乘法。 不喜欢数学的小伙伴肯定是看不下去的，那么既想学习WebGL，又不想了解

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战 引子 前两次课分别讲了拉伸和旋转的矩阵表达。但是我们并没有讲一个根基的东西，凭什么就一定可以找到一个矩阵来表达呢。这个东西涉及到很多线性代数

这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战 引子 我们知道一个矩阵乘以一个向量，得到的结果就是一个向量。 我们把上面的概念称之为，矩阵右乘向量，也可以称为向量左乘矩阵，就是左右顺序是有

用矩阵来表达拉伸操作，这里涉及到一些数学推导，但是一定要把核心放在矩阵乘法和线性组合这两者的关系上面，那样你就舒服了。

引子 我们在搞图形学的时候，经常有这种需求，将一个物体拉伸，这又可以分成三个方向。 x y z 方向都可以分别独立进行拉伸操作。 这没问题。问题就是，我们如何实现拉伸？拉伸的本质到底是什么？ 拉伸这个

引子 上次课提到了位移，但是并没有给出一个标准的定义，这是不好的。这可能让人产生不正确的思维，好像位移代表了某人或者某个物体在平面上的移动路径。 这是不对的，位移不能代表移动路径，自然的，向量也不能代