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