介绍
之前opengl的文章里讲到了图形学的渲染管线，在webgl里，我们一般可以控制的是顶点着色器与片元着色器。两者合称着色器程序。 在webGL中，我们使用GLSL语言编写着色器程序。
着色器程序获取数据的方法
属性（Attributes）和缓冲
缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 你可以存储任何数据。
属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。 对于一个确切的属性你需要告诉它从哪个缓冲中获取数据，获取什么类型的数据（三个32位的浮点数据）， 起始偏移值是多少，到下一个位置的字节数是多少。
缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字， 每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。
全局变量（Uniforms）
全局变量在着色程序运行前赋值，在运行过程中全局有效。
纹理（Textures）
纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。 大多数情况存放的是图像数据，但是纹理仅仅是数据序列， 你也可以随意存放除了颜色数据以外的其它数据。
可变量（Varyings）
可变量是一种顶点着色器给片断着色器传值的方式，依照渲染的图元是点， 线还是三角形，顶点着色器中设置的可变量会在片断着色器运行中获取不同的插值。
矩阵变换
1. openGL使用齐次坐标系，意味着2d变换→3X3矩阵，3d变换→4X4矩阵
为什么要用齐次坐标？
- 处理透视空间,(无穷远处两平行线相交在欧氏空间中不成立）
- 缩放变换、旋转变换、平移变换统一成矩阵乘法，方便计算 齐次坐标与笛卡尔坐标转换
2. 缩放变换(scale)、旋转变换(rotation)、平移变换（translation)对应的矩阵
缩放
平移
旋转
注意万向节死锁要用四元数解决
3. 二维变换对应矩阵
4.变换的组合
使用矩阵进行变换的真正力量在于，根据矩阵之间的乘法，我们可以把多个变换组合到一个矩阵中。让我们看看我们是否能生成一个变换矩阵，让它组合多个变换。假设我们有一个顶点(x, y, z)，我们希望将其缩放2倍，然后位移(1, 2, 3)个单位。我们需要一个位移和缩放矩阵来完成这些变换。结果的变换矩阵看起来像这样：
注意，当矩阵相乘时我们先写位移再写缩放变换的。矩阵乘法是不遵守交换律的，这意味着它们的顺序很重要。当矩阵相乘时，在最右边的矩阵是第一个与向量相乘的，应该从右向左读这个乘法。建议在组合矩阵时，先进行缩放操作，然后是旋转，最后才是位移，否则它们会互相影响。比如，如果先位移再缩放，位移的向量也会同样被缩放（译注：比如向某方向移动2米，2米也许会被缩放成1米）！
用最终的变换矩阵左乘我们的向量会得到以下结果：
不错！向量先缩放2倍，然后位移了(1, 2, 3)个单位。
各种空间坐标系
- 局部空间(Local Space，或者称为物体空间(Object Space))
- 世界空间(World Space)
- 观察空间(View Space，或者称为视觉空间(Eye Space))
- 裁剪空间(Clip Space)
- 屏幕空间(Screen Space)
屏幕空间坐标
以整个硬件屏幕为基础的坐标系，和屏幕分辨率有关，原点一般在左上角
裁剪空间坐标
无论你的画布有多大，裁剪空间的坐标范围永远是 -1 到 1 。
