2.1. WebGL 简介¶
2.1.1. 设置 WebGL HelloWorld 程序¶
WebGL 是一种同时使用你的 CPU 和 GPU 的图形语言。 图 2.1.1 展示了 WebGL 可编程管线 。
Figure 2.1.1: 可编程管线。¶
这是一张内容丰富的图。在本书中我们将经常参考它，并逐渐理解其所有组件。 在本初始部分，我们只介绍其中少数几个组件。
WebGL 程序由三个不同的代码组组成。首先是运行在你的 CPU 上的 JavaScript 代码。 在 ProgrammablePipeLine 图中，对此 JavaScript 代码的引用出现在管线的左端。 JavaScript 代码主要负责理想情况下只需在程序执行开始时执行一次的操作。 在我们下面将讨论的示例中，这些操作包括计算正方形的顶点。 然后 JavaScript 程序在 顶点缓冲区 中将这些顶点发送到你的 GPU。 在 GPU 上有两个代码组——顶点着色器 和 片段着色器 。 每个着色器都用 GLSL 着色器语言编写。它们作为特殊脚本出现在伴随 JavaScript 代码组的 HTML 文件中。 值得注意的是，你的 GPU 是专门为图形操作设计的并行处理器。
执行顶点着色器代码时，你的 GPU 上的每个核心都在处理顶点缓冲区中的一个顶点，确定对该顶点应用什么变换（如果有）。 在 GLSL 语言中，分配给单个核心的顶点称为 属性 （attribute）。 从顶点着色器代码的每个核心输出的变换后顶点被赋予 GLSL 名称 gl_Position 。
执行片段着色器代码时，你的 GPU 上的每个核心都在确定将什么颜色分配给你的显示屏幕上的特定像素。 屏幕上的像素数量将远远超过你的几何图形中的顶点数量。 例如，三角形是一个 片段 ，它只有三个顶点，但将覆盖比三个多得多的像素。 因此，片段着色器接收的像素属性必须是一个位置，该位置基于由定义片段的三个顶点确定的三角形区域内的位置进行 插值 。
考虑到这个概述，下面描述我们简单的"Hello World"WebGL 程序。
当我们的 Hello World Example 中的代码执行时，在你的浏览器中显示的结果是：
2.1.2. 带视口的 HelloWorld¶
测试
