• 作者：Kouichi Matsuda Rodger lea
• 译者：谢光磊
• 2014.6 第一版
• 书籍网站及其官方源码
• 代码为自己手写，相比于书籍源代码，结合了自己的理解和写代码的习惯

• WebGL基于OpenGL ES 2.0

• lesson1 - 绘制背景色
• lesson2 - 添加着色器，绘制一个点
• lesson3 - attribute传值
• lesson4 - uniform变量
• lesson5 - 结合dom事件

1. attribute : 只能在vertex shader中使用，用于逐定点操作，接受外部不停地传入的值。
2. uniform : 在vertex/fragment shader都可以使用，用于接受外部的限定值，在逐顶点绘制的过程，不能改变。
3. varying : 用于vertex和fragment之间的沟通。

• lesson1 - 使用ARRAY_BUFFER缓冲区绘制三个点
• lesson2 - 绘制三角形
• lesson3 - 认识基本绘制单位
• lesson4 - 施以平移变换矢量
• lesson5 - 用数学公式施以旋转变换
• lesson6 - 使用矩阵抽象所有变换方式

• lesson1 - 认识Matrix4类
• lesson2 - 基于requestAnimationFrame创建动画

• lesson1 - 一个缓冲区buf对象定义解析规则，为多个着色器变量传值
• lesson2 - varying变量
• lesson3 - 彩色三角形-验证光栅化
• lesson4 - 使用纹理
• lesson5 - 使用多个纹理

varying变量的内插作用

在光栅化的过程中，一条线段(图案)的两端颜色不同时，线段上的所有颜色值都会被恰当的计算下来，再传给片元着色器的varying变量中。

图片坐标与GL中的纹理坐标

图片坐标系中原点在左上角要进行 y->t 反转

• 强类型 大小写敏感 严格分号 类C程序语法结构
• 保留前缀 : gl_ webgl_ _webgl_
• 内置矢量和矩阵计算
• 内置纹理取样器
• 宏
• 函数不允许递归操作
• 精度限定 : 片元着色器中float没有默认精度，所以需要手动提前指定

• lesson1 - ViewMatrix视点-观察者
• lesson2 - 观察者 + 模型变化
• lesson3 - 通过键盘事件调整观察者-进一步认识ViewMatrix
• lesson4 - 通过键盘事件调整盒装可视范围
• lesson5 - 通过键盘事件调整盒装可视范围
• lesson6 - 透视投影范围 - Model+View+Pers 共冶一炉
• lesson7 - 隐藏面擦除解决重叠现象 + 多边形偏移解决深度冲突
• lesson8 - 使用索引绘制图形 //=>绘制一个立方体
• lesson9 - 顶点与颜色分开传入 //=>为每一面指定颜色

• lesson1 - 平行光漫反射
• lesson2 - 平行光漫反射+环境光环境反射
• lesson3 - 通过键盘事件调整观察者-进一步认识ViewMatrix
• lesson4 - 运动物体的光照 //=>模型矩阵逆转置*法向量
• lesson5 - 点光源漫反射+环境光环境反射 //=>逐顶点与逐片元

• lesson1 - 单关节
• lesson2 - 多关节 //=>使用同一个基础矩形(同一个索引)
• lesson3 - 多关节 //=>使用不同的索引
• initShaders() 实现原理

• 使用鼠标拖拽
• 选取一个物体/面
• 结合canvas2d显示文字实现HDD
• fog雾化模拟大气效果
• 绘制圆点
• α混合(透明度)
• 切换着色器
• 渲染结果作为纹理使用(帧缓冲区)
• 绘制阴影
• OBJViewer从外部加载模型数据

Author : MrZebra

Contact : [email protected]