WebGL 示例
WebGL 示例 是一系列带有简短说明的实时示例，展示了 WebGL 的概念和功能。
示例按主题和难度级别排序，涵盖 WebGL 渲染上下文、着色器编程、纹理、几何图形、用户交互等。
按主题分类的示例
示例按难度递增的顺序排列。但它们并没有简单地呈现在一个长列表中，而是另外按主题进行了划分。有时我们会多次讨论同一个主题，例如在需要先从基本级别讨论，然后再从中级和高级级别进行讨论时。
与在第一个程序中就尝试处理着色器、几何图形和 GPU 内存操作不同，这里的示例以递增的方式探索 WebGL。我们相信这能带来更有效的学习体验，并最终更深入地理解底层概念。
关于示例的说明可以在主要文本和代码注释中找到。你应该阅读所有注释，因为更高级的示例可能不会重复解释之前已说明过的代码部分。
了解渲染上下文
- 检测 WebGL
-
此示例演示了如何检测 WebGL 渲染上下文并将结果报告给用户。
- 使用颜色清除
-
如何用纯色清除渲染上下文。
- 点击清除
-
如何将用户交互与图形操作结合起来。当用户点击时，用随机颜色清除渲染上下文。
- 简单的颜色动画
-
一个非常基础的颜色动画，通过每秒用不同的随机颜色清除 WebGL 绘图缓冲区来实现。
- 颜色蒙版
-
通过应用颜色蒙版修改随机颜色，从而将显示的颜色范围限制为特定的色调。
- 基础剪裁
-
如何使用剪裁操作绘制矩形和正方形。
- 画布大小和 WebGL
-
该示例探讨了在浏览器窗口中，将画布大小设置为其元素大小（以 CSS 像素表示）与否的影响。
- 样板代码 1
-
此示例描述了现在将被隐藏的重复代码段，以及定义一个 JavaScript 实用函数以简化 WebGL 初始化。
- 剪裁动画
-
通过剪裁和清除操作进行一些有趣的动画。
- 下雨的矩形
-
一个演示使用纯色清除、剪裁、动画和用户交互的游戏。
着色器编程基础
其他高级示例
- 视频纹理
-
此示例演示了如何将视频文件用作纹理。