WebGL

源码：https://github.com/buglas/webgl-lesson 我们将之前径向渐变的代码改改，还可以实现极坐标渐变。 1.在矩形面中，注释终点 2.在片元着色器中也做相应调整。 3

源码：https://github.com/buglas/webgl-lesson 我们将之前线性的代码改改，便可以实现径向渐变。 1.在矩形面中，注释终点，添加半径 2.在片元着色器中也做相应调整。

源码：https://github.com/buglas/webgl-lesson 1-渐变的画布 接下来我们画一个渐变的画布，其步骤如下： 1.绘制充满canvas的矩形，并向片元着色传递canva

第一章 GLSL ES 概述和基本规范 GLSL ES是在GLSL（OpenGL着色器语言）的基础上，删除和简化了一部分功能后形成的，ES版本主要降低了硬件功耗，减少了性能开销。 实际上WebGL并不

源码：https://github.com/buglas/webgl-lesson 我在说GLSL ES 语法之前，得先给大家说几个测试GLSL ES 语法的方法，不然大家可能会听得心里没底。 1-G

源码：https://github.com/buglas/webgl-lesson 我们之前使用texImage2D 方法将Image 图像源装进了纹理对象里： 我们也可以把上面的image 换成vi

源码：https://github.com/buglas/webgl-lesson 我这里要说的跨域图像问题，并不单是webgl 问题，也是canvas 2d 里的问题。 为了更好的说清楚这个问题的来

源码：https://github.com/buglas/webgl-lesson 我们先说一下换装达人的实现原理。 1.用一张黑白遮罩图对两个纹理图案进行裁剪，裁出裙子的区域。 2.对裙子区域的图案

源码：https://github.com/buglas/webgl-lesson 纹理合成就是按照某种规则将多张图片合在一起。 比如这样： 或者这样： 亦或者，这样： 这就像在photoshop 里

纹理，通常指的就是二维的栅格图像，我们可以将其作为webgl图形的贴图。 而在webgl 里，还有一个纹理对象的概念，它是对图像又做了一层封装，这个我们后面会详解。 接下来，我们要先建立几个基础概念，

源码：https://github.com/buglas/webgl-lesson 1-绘制彩色三角形 我们可以用独立三角形绘图。 效果如下： 为什么会画出一个具有三种颜色的三角形呢？ 这是因为我给三

1-多attribute变量的概念 接下来我们先通过一个问题来引出多attribute变量的概念和作用。 问题：如何一次性绘制三个不同颜色的点。 我们之前说“js与着色器间的数据传输”的时候，说过js

源码：https://github.com/buglas/webgl-lesson 在视图矩阵中，我们可以将算法和艺术相融合，让它充满乐趣。 就像下面的顶点，就是我通过三角函数来实现的。 风乍起，吹皱

在我们给了物体一个视图矩阵后，我们还可以再给它一个模型矩阵。 模型矩阵可以对物体进行位移、旋转、缩放变换。 比如我们想让物体沿z 旋转。 1.在顶点着色器中添加一个模型矩阵 2.在js中建立模型矩阵，

源码：https://github.com/buglas/webgl-lesson 视图矩阵是用于确定相机角度和位置的矩阵。 1-相机的定义 视点：相机的位置 视线方向：相机所看的方向 上方向：相机绕

通过实践，我们可以很容易的找到复合变换的规律。 接下咱们先写一个简单复合变换：位移加位移。 1-位移加位移 接下来我想让一个物体沿x 轴位移ax，沿y 轴位移ay后，再沿x 轴位移bx，沿y 轴位移b

源码：https://github.com/buglas/webgl-lesson 矩阵相乘可以实现复合变换，就比如先位移再旋转、先旋转在位移，或着连续位移。 接下来咱们先看一下两个矩阵是如何相乘的。

源码：https://github.com/buglas/webgl-lesson 矩阵（Matrix）是一个按照矩形纵横排列的复数集合。 矩阵就像一个矩形的阵盘，通过其中纵横排列的元素，我们可以摆出

源码：https://github.com/buglas/webgl-lesson 1-缩放的基本概念 缩放可以理解为对向量长度的改变，或者对向量坐标分量的同步缩放 已知： 点A的位置是(ax,ay,

源码：https://github.com/buglas/webgl-lesson 1-旋转的概念 三维物体的旋转要比位移复杂一点，因为三维物体的旋转需要知道以下条件： 旋转轴 旋转方向 旋转角度 我