WebGL

源码：https://github.com/buglas/webgl-lesson 到目前为止，我们都是用了一套着色器做的例子，这一套着色器包含了顶点着色器和片元着色器。 在实际开发中，我们是不可能只

1-顶点索引概念 对于顶点索引的概念，其实我们之在再说复合变换里的模型矩阵的时候，就已经讲过了。 下过如下： 我上面是用js 实现的顶点索引功能，其实这种功能我们可以直接通过webgl api来实现，

源码：https://github.com/buglas/webgl-lesson 接下来我会参考three.js 里的OrbitControls对象，封装一个轨道控制器出来。 至于轨迹球的封装，我就

源码：https://github.com/buglas/webgl-lesson 之前咱们说过了正交相机的轨道控制器，接下来再看透视相机的轨道控制器，就会方便很多。 1-透视相机的位移轨道 透视相机

源码：https://github.com/buglas/webgl-lesson 相机轨道控制器可以让我们更好的变换相机，从而灵活观察物体。 three.js 中的相机轨道控制器是通过以下事件变换相

源码：https://github.com/buglas/webgl-lesson 投影矩阵、视图矩阵、模型矩阵的结合方式： 1-投影视图矩阵 1.在顶点着色器里把投影矩阵变成投影视图矩阵。 2.设置

源码：https://github.com/buglas/webgl-lesson 透视投影矩阵可以将现实世界更真实的投射到裁剪空间中。 我们的肉眼看现实世界时，用的就是透视投影矩阵。 透视投影矩阵包

源码：https://github.com/buglas/webgl-lesson 我之前在说matrixWorldInverse 的时候说过，它是matrixWorld 的逆矩阵。 逆矩阵在图形项目

源码：https://github.com/buglas/webgl-lesson 1-视图位移 1.基于之前的代码，再绘制一个三角形 这是一前一后两个三角形。 前面的是黄色三角形，深度为0.2； 后

源码：https://github.com/buglas/webgl-lesson WebGL 是一个光栅引擎，其本身并不会实现三维效果，那我们要在其中实现三维效果的关键就在于算法： 正交投影矩阵是投

源码：https://github.com/buglas/webgl-lesson 首先我们要知道，物体旋转的复杂程度是位移和缩放的n多倍。 我们以前在旋转物体时，只是让其绕坐标轴x|y|z 旋转。

1-用位移矩阵做实验 1-1-示例 已知： 宇宙universe 宇宙的本地坐标系是[O1;i1,j1,k1] O1(0,0,0) i1(1,0,0) j1(0,1,0) k1(0,0,1) 宇宙包含

源码：https://github.com/buglas/webgl-lesson 1-基本概念 我们既然要进入三维世界，必须要先有坐标系的概念，而不要只想着如何让物体飞天遁地。 坐标系按照层级分为：

源码：https://github.com/buglas/webgl-lesson Element3是基于vue3.0 造的轮子，它是由许多大神主导开发的，比如Winter、大圣、春去春又来等。 其中

源码：https://github.com/buglas/webgl-lesson 接下来我们将之前说过的渐变、杂色、极坐标扭曲、拉丝融为一体，做一个磨砂金属按钮。 1.先制作一个磨砂材质 效果如下：

源码：https://github.com/buglas/webgl-lesson 下图是我提前准备好的全景图： 极坐标扭曲效果如下： 这就像广角镜头一样，接下来咱们说一下代码实现。 1.建立带贴图的

源码：https://github.com/buglas/webgl-lesson 以前我们在说水波纹的时候，提到过正弦型函数，我们在这里也可以用正弦型函数做正弦型放射。 先回顾一下正弦型函数： y=

源码：https://github.com/buglas/webgl-lesson 说放射前，我们需要先知道极坐标。 极坐标的创始人是牛顿，主要应用于数学领域。 1-极坐标的基本概念 极点：极坐标的坐

源码：https://github.com/buglas/webgl-lesson 1-杂色原理 杂色的真谛就是通过有规律条件得到无规律的结果。 有规律的条件，是片元在canvas画布中的像素位。 无

源码：https://github.com/buglas/webgl-lesson 通过径向渐变和极坐标渐变的原理，还可以实现三点渐变。 1.建立三个点 p1是点位，c1是颜色。 2.基于三个位置点计