双击方块以触发绘制
1. WebGL 概述
暂无数据
2. WebGL 入门
设置背景色
绘制一个点（大小、位置和颜色均硬编码在着色器中）
绘制一个点（位置从外部传入）
将鼠标点击位置传给着色器
将鼠标点击位置和随机颜色传给着色器
3. 绘制和变换三角形
绘制多个点
绘制一个三角形
平移
矩阵平移
旋转
矩阵旋转
矩阵缩放
4. 高级变换与动画基础
矩阵缩放（使用第三方库）
旋转动画
5. 颜色与纹理
使用两个缓冲区分别传递位置和大小
使用一个缓冲区同时传递位置和大小
定义顶点的颜色并插值生成其他颜色
根据坐标生成对应的颜色
使用纹理映射
混合多个纹理贴图
6. OpenGL ES 着色语言
暂无数据
7. 进入三维世界
设置观察者的视线方向
固定观察者的视线方向，使用 A 和 D 键改变观察者的位置
设置正交投影，通过 1、2、3、4 键改变投影空间
用视图方向矩阵乘以投影矩阵
当投影比例与画布比例不一致时，图像会扭曲
透视投影
开启隐藏面消除以处理三角形的前后关系
当两个面过近时，可能会产生深度冲突。按 P 开启多边形偏移
通过顶点索引绘制一个立方体
每个面只通过一个顶点来绘制纯色面
8. 光照
平行光照射红色立方体
环境光加平行光照射红色立方体
处理模型变换后的法向量光照问题：通过逆转置矩阵。按 R 可修正该问题
点光源（逐顶点计算光照颜色）
点光源（逐片元计算光照颜色）
9. 层次结构模型
用两个立方体表示上臂和前臂，并通过 1、2、3、4 进行控制
绘制一个更复杂的“机器人”，并通过 1到8 数字键进行控制
10. 高级技术
通过拖动鼠标来旋转物体
检测物体是否被点击
检测物体的某一个面是否被点击
叠加多个画布在一块实现覆盖效果（HUD）
雾化效果
绘制圆形的点
Alpha 混合（透明度混合）
Alpha 混合，半透明的立方体
同时绘制不透明和透明的物体
使用 gl.useProgram 在多个着色器之间切换
将绘制的内容作为另一个物体的纹理（帧缓冲区）
绘制阴影。按 F 修复马赫带效应
从文件中加载模型
处理上下文丢失事件
附录
左手坐标系与右手坐标系
从文件中加载着色器代码