简介
欢迎来到“learnwebgl”网站
本网站将帮助您学习如何在网页中显示和操作实时 3D 计算机图形。3D 计算机图形能够将您脑海中的任何想象转化为可视化效果。但实现起来并非易事。因此，请耐心等待，循序渐进地学习本网站的教程。
学习理念
本网站的设计原则是，复杂的主题应该“自上而下”地学习。在深入细节之前，务必先了解“全局”。学习细节的过程中，你将建立一个框架，从而理解这些细节是如何完成更大问题的一小部分的。
什么是 WebGL？
WebGL 是一个 JavaScript 应用程序接口 (API)，允许程序员在 Web 浏览器窗口中使用计算设备的图形处理单元 (GPU) 来渲染实时 3D 计算机图形。它是当今软件行业唯一一个用于制作 3D 计算机图形的跨平台开发环境。学习 WebGL 是理解计算机图形学基础知识的最佳途径，同时最终获得一个可以用来制作自己的计算机图形学的“工具箱”。
什么是 WebGL 程序？
包含由 WebGL 程序生成的 3D 计算机图形的典型网页由以下基本部分组成：
- 网页的 HTML（超文本标记语言）描述。
- CSS（层叠样式表）描述了 HTML 描述中每个元素的格式。
- 网页中的HTML画布元素，提供可在其中呈现 3D 计算机图形的矩形区域。
- 定义要渲染的 3D 对象的图形数据。
- 加载图形数据、配置图形数据、渲染图形数据以及响应用户事件的代码的 JavaScript 程序。
- OpenGL Shader 程序执行图形渲染的关键部分。
所有这些基本部件最初都驻留在 Web 服务器上。当用户（客户端）请求包含 3D 图形的网页时，上述数据必须传输到客户端的计算机，存储在正确的位置，然后由适当的处理器进行处理。现代计算设备拥有多个不同类型的处理器。
- CPU（中央处理器）是设备的“大脑”。CPU 执行常规处理，并运行控制设备整体功能的操作系统 (OS)。
- GPU（图形处理单元）是专门为渲染 3D 图形而设计的。
现代计算设备还具有多种为不同目的而设计的内存类型。
- RAM——随机存取存储器——存储程序数据和程序指令。
- 图形内存——用于视频和图形处理的独立内存系统。GPU 拥有专为 3D 图形设计的专用内存。
这些想法的简化图表如下所示。
当客户端向 Web 服务器请求网页时，将发生以下一系列事件：
- 服务器将网页的 HTML 描述发送给客户端，客户端将网页存储在 RAM 中。
- 客户端的 Web 浏览器（例如 Chrome、Safari、Internet Explorer）读取 HTML 页面描述并请求 HTML 代码中引用的任何其他文档，包括图像、JavaScript 代码、CSS（层叠样式表）、数据文件等。所有这些文件都存储在客户端的 RAM 中。
- 如果页面关联了 JavaScript 代码，则会执行该代码。对于包含 3D 图形的页面，JavaScript 代码将执行以下任务：
- 它可能请求从服务器下载其他数据文件（例如，描述要渲染的 3D 图形对象的数据）。
- 它将获取并初始化与将要渲染图形的 HTML 画布元素关联的WebGL图形上下文。
- 它将配置并将模型数据复制到 GPU 的内存中。（从技术上讲，数据被复制到 GPU 的顶点对象缓冲区）。
- 它将建立“事件处理程序”，将 HTML 事件与事件发生时执行的 JavaScript 代码关联起来。
- 最后，网页会渲染到浏览器窗口，并等待用户事件。您可以设置定时器事件，以便定期自动生成事件，从而创建 3D 图形的动画。
当 JavaScript 事件处理程序启动将图形渲染到 HTML 画布元素时，它会告知 GPU 哪些对象缓冲区包含其想要渲染的数据，然后发出 WebGL“绘制”命令。需要注意的是，待渲染的数据通常已存在于 GPU 内存中。在典型的图形程序中，模型数据仅复制到 GPU 内存一次。这节省了时间，使图形渲染高效快速。我们所说的“实时图形”是指渲染时间不到 1/30 秒，并且用户可以观看流畅的图形动画。只有最大限度地减少 GPU 内存和 RAM 之间的数据传输，才能实现如此快速的渲染。
昂贵的操作只执行一次是所有计算机图形学的基本原则。在本教程中，您将不断看到预处理步骤和渲染步骤 这两个词。目标是只执行一次“预处理步骤”。因此，执行图形渲染的 JavaScript 代码通常分为两个独立的部分：1）设置（或预处理）部分，执行一次；2）渲染部分，每次绘制对象时执行。每个教程课程都会明确区分预处理代码和渲染代码。
为了再次强调“全局”，下图总结了上述讨论。需要注意的是，JavaScript 代码在 CPU 上运行，而图形渲染由 GPU 完成。JavaScript 代码是“master”。它“掌控全局”，并告诉 GPU 何时渲染以及渲染什么内容。
概括
当你开始学习 WebGL 时，请记得回顾这些“大局观”课程，以便将细节归纳到位。以下课程涵盖了这些“大局观”主题：
- 什么是 3D 计算机图形以及它是如何工作的？
- WebGL 从何而来？
- 如何管理 WebGL 程序的复杂性？
词汇表
掌握学习
在学习更难、更高级的主题之前，先彻底学习基础主题。
Web 服务器
在服务器计算机上运行并存储网页和相关文件的程序。当客户端计算机请求网页时，Web服务器会将请求的文件发送给客户端。
网络浏览器
在客户端计算机上运行的程序，允许用户下载、查看网页并进行交互。常用的网络浏览器有 Google Chrome、Mozilla Firefox、Apple Safari 和 Microsoft Internet Explorer。
中央处理器
中央处理单元——控制计算设备并执行所有计算的硬件。
图形处理器
图形处理单元——针对生成 3D 计算机图形而优化的硬件。
内存
随机存取存储器——存储数据和程序以供 CPU 访问和操作。
GPU内存
数据和程序存储于此，以供 GPU 访问和操作。
预处理步骤
一次性的数据操作。
对象缓存区
GPU上的一块区域，用于存储要绘制几何体的点位、纹理等图形信息，作为GPU与CPU的交互桥梁，允许高速的传输和处理图形数据