- 作者:Kouichi Matsuda Rodger lea
- 译者:谢光磊
- 2014.6 第一版
- 书籍网站及其官方源码
- 代码为自己手写,相比于书籍源代码,结合了自己的理解和写代码的习惯
- WebGL基于OpenGL ES 2.0
- attribute : 只能在vertex shader中使用,用于逐定点操作,接受外部不停地传入的值。
- uniform : 在vertex/fragment shader都可以使用,用于接受外部的限定值,在逐顶点绘制的过程,不能改变。
- varying : 用于vertex和fragment之间的沟通。
- lesson1 - 使用ARRAY_BUFFER缓冲区绘制三个点
- lesson2 - 绘制三角形
- lesson3 - 认识基本绘制单位
- lesson4 - 施以平移变换矢量
- lesson5 - 用数学公式施以旋转变换
- lesson6 - 使用矩阵抽象所有变换方式
- 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 - 点光源漫反射+环境光环境反射 //=>逐顶点与逐片元
- 使用鼠标拖拽
- 选取一个物体/面
- 结合canvas2d显示文字实现HDD
- fog雾化模拟大气效果
- 绘制圆点
- α混合(透明度)
- 切换着色器
- 渲染结果作为纹理使用(帧缓冲区)
- 绘制阴影
- OBJViewer从外部加载模型数据
Author : MrZebra
Contact : [email protected]