Learn WebGL

资源

Learn WebGL

前言

传统学习新学科的办法是把大的学科分割成小的子学科, 然后逐个学习，深入每个子主题之间的关系。然而这并非本教程的学习方法。本教程从“全局观”开始，然后研究构成复杂整体系统的每个子系统的细节。每个子系统都会从基本原理开始，避免不知其所以然。

为什么学习WebGL? 很简单，这是我们用于生成实时3D计算机图形的唯一跨平台解决方案。

Direct3D，这是 Microsoft 制造的专有系统，但将被限制在基于 Microsoft 的计算机上运行您的软件。
OpenGL，它是跨平台的，但 OpenGL 没有确定的方式来连接操作系统的用户界面。

WebGL 是 OpenGL 的后代，可在所有现代 Web 浏览器中执行，包括平板电脑和手机上的 Web 浏览器。因此，当您学习 WebGL 时，您就是在为一个基本上可以在所有现代计算设备上执行的环境学习 OpenGL。这真的很棒！

学习顺序:

从“全局观”开始，展示任何 WebGL 网页的关键子系统
将各个子系统中的细节隔离开来，并尝试弄清它为何如此设计以及它是如何工作的

注意：WebGL 需要编程，我们鼓励您在学习的每个阶段尝试示例代码。良好的编程实践使用增量开发周期。您从一个简单的工作程序开始开发，并使用一个简单的实施/测试、实施/测试、实施/测试……直到达到目标。如果有的话，你应该“从头开始”编写一个复杂的 WebGL 程序。总是从一个工作程序开始，慢慢增加复杂性。

这些课程的一个关键想法是，在转向新主题之前，您必须掌握一个主题。如果您对某个主题的一小部分感到困惑，那么您可能无法理解接下来的更复杂的主题。因此，在转到下一个主题之前，请花点时间彻底掌握每个主题。

1.1 全局观

1.1 简介

该网站将帮助您学习如何在网页中显示和操作实时 3D 计算机图形。3D 计算机图形有可能创建您的大脑可以想象的任何东西的可视化。但这并不简单或易于实施。因此，请花点时间逐条阅读本网站上的教程。

精熟学习(学习者在真正掌握某个学习项目之后才可以进入下一个项目学习)是学习本教程的关键。推荐相关学习社区可汗学院

作为一名学生，你需要重新思考学习意味着什么，并打破你忽略不理解的东西的旧习惯。

本网站的设计原则是“自上而下”。在深入了解细节之前，先了解“全局观”，对整体有个框架的理解，此后才能完成对大问题的拆分出来的小模块。

本教程鼓励自学，并且需要完全熟悉后再进入下一步。本教程将会为学习新课题提供坚实的基础。

1.2 什么是WebGL

WebGL 是一种 JavaScript 应用程序员接口 (API)，它允许程序员在 Web 浏览器窗口中使用计算设备的图形处理单元 (GPU) 来呈现实时 3D 计算机图形。它是当今软件行业唯一用于制作 3D 计算机图形的跨平台开发环境。学习 WebGL 是了解计算机图形学基础知识的最佳方式，同时还能获得一个可用于制作自己的计算机图形学的“工具箱”。

1.3 什么是 WebGL 程序？

包含由 WebGL 程序生成的 3D 计算机图形的典型网页由以下基本部分组成：

网页的 HTML（超文本标记语言）描述。
描述 HTML 描述的每个元素如何格式化的 CSS（层叠样式表）。
网页中的 HTML画布元素，它提供了一个矩形区域，可以在其中呈现 3D 计算机图形。
定义要渲染的 3D 对象的图形数据。
加载图形数据、配置图形数据、渲染图形数据和响应用户事件的代码的 JavaScript 程序。
执行图形渲染关键部分的 OpenGL 着色器程序。

缩减:

HTML
CSS
Canvas
三维坐标数据
JS
Shader

所有这些基本部分最初都驻留在 Web 服务器上。当用户（客户端）请求包含 3D 图形的网页时，上述数据必须传输到客户端的计算机，存储在正确的位置，然后由适当的处理器处理。现代计算设备具有多个不同类型的处理器：

CPU——中央处理单元——是设备的“大脑”。CPU 执行一般处理并运行控制设备整体功能的操作系统 (OS)。
GPU——图形处理单元——专门设计用于渲染 3D 图形。

现代计算设备还具有为不同目的而设计的多种类型的存储器。

RAM——随机存取存储器——存储程序数据和程序指令。
图形内存 - 用于视频和图形处理的独立内存系统。GPU 具有专为 3D 图形设计的专用内存。简化图如下所示：

0.hardware_overview.png

计算设备中的主要硬件部件

当客户端从 Web 服务器请求网页时，会发生以下事件序列：

服务器将网页的 HTML 描述发送给客户端，客户端将网页存储在 RAM 中。
客户端的网络浏览器（例如，Chrome、Safari、Internet Explorer）读取 HTML 页面描述并请求 HTML 代码中引用的任何其他文档，包括图像、JavaScript 代码、CSS（级联样式表）、数据文件等。所有这些文件都存储在客户端的 RAM 中。
如果有与页面关联的 JavaScript 代码，则执行它。对于包含 3D 图形的页面，JavaScript 代码将执行以下任务：
1. 它可能会请求从服务器下载其他数据文件（例如，描述要渲染的 3D 图形对象的数据）。
2. 它将获取并初始化与将呈现图形的 HTML 画布元素关联的 WebGL图形上下文(
  我一直觉得上下文的翻译是某些译者故意故弄玄虚,context在英文语境中叫"背景、来龙去脉、上下文、语境"，而翻译过来，最适合的形容应该是背景或者是本体
  )。
3. 它将配置模型数据并将其复制到 GPU 的内存中。（从技术上讲，数据被复制到 GPU 的顶点对象缓冲区）。
4. 它将建立“事件处理程序”，将 HTML 事件与将在事件发生时执行的 JavaScript 代码相关联。
最后，网页被渲染到浏览器中的一个窗口，网页等待用户事件。定时器事件可以设置为定期自动生成事件，这可以创建 3D 图形的动画。

当 JavaScript 事件处理程序启动将图形渲染到 HTML 画布元素中时，它会告诉 GPU 哪个对象缓冲区包含它想要渲染的数据，然后发出 WebGL “绘制”命令。请注意，要渲染的数据通常已经在 GPU 内存中。在典型的图形程序中，模型数据只复制到 GPU 的内存一次。这样可以节省时间并使图形渲染高效且快速。当我们使用术语“实时图形”时，我们的意思是可以在不到 1/30 秒的时间内完成渲染，并且用户可以查看流畅的图形动画。只有在 GPU 内存和 RAM 之间的数据传输最小化的情况下，才能实现这种快速渲染。

昂贵的操作只执行一次的想法是所有计算机图形学的基本原则。在这些教程中，您将不断看到短语“预处理步骤”和“渲染步骤”。目标是只执行一次“预处理步骤”。因此，执行图形渲染的 JavaScript 代码通常分为两个独立的部分：1）设置（或预处理）部分，它只完成一次；2）每次绘制对象时执行的渲染部分。每个教程课程都会明确区分预处理代码和渲染代码。

为了再次强调“大局”，下图总结了上述讨论。请注意，JavaScript 代码在 CPU 上运行，而图形渲染由 GPU 完成。JavaScript 代码是“主体”。它用来“运行展示的结果”, 通知GPU 何时以及渲染什么。

2.data_location.png

WebGL 程序的不同部分存储和执行的地方

1.4 例子

此部分更希望阅读源网站
- sample
- tutorial

1.5 总结

当你开始学习 WebGL 时，请记得回顾这些“全局观”课程，将细节放在适当的位置。以下课程涵盖了这些“全局观”主题：

什么是 3D 计算机图形，它是如何工作的？
WebGL 从何而来？
如何管理 WebGL 程序的复杂性？

1.2 3D计算机图形学之是什么，怎么用？

计算机图形学常被用作创作图像和视频。

使用计算机描述图片有两种基本方法：

光栅图形- 使用许多小颜色点来描述图片。每个点称为一个像素，是“图片元素”的缩写。如果这些点足够小并且足够靠近，一个人就不会看到单个的点，而是看到“图片”。
矢量图形- 使用数学方程将对象描述为几何形状。图片是通过称为渲染的过程从数学描述中创建的。渲染的结果是二维光栅图像。

目前存在这些软件，而计算机工具来创建和操作这两种类型的计算机图形。例如，Adobe PhotoShop是处理光栅图像的首要工具。但是，通过操纵许多小颜色点来创建新图像对于对象随时间变化的运动图像并不有利。PhotoShop 非常适合创建单个图像或“修饰”现有图像，但它不擅长创建电影。

计算机生成图像 (CGI, Computer-generated imagery) 是计算机图形学的应用，用于在艺术、印刷媒体、视频游戏、电影、电视节目、广告、视频和模拟器中创建或贡献图像。一般人可能只听说过与电子游戏和电影有关的CGI这个词，但它在许多领域都有广泛的应用。

3D 计算机图形是使用几何数据的三维表示来执行计算和渲染 2D 图像的图形。本教程将帮助您学习如何使用 3D 计算机图形技术来创建 CGI。或者，换一种说法，这些教程将帮助您创建 3 维对象的矢量图形表示，然后将它们渲染成光栅图像。如果您可以创建在不到 1/30 秒的时间内渲染光栅图像的数据和算法，您就可以创建在观众观看时渲染的实时视频。大多数视频游戏都是基于实时的渲染。如果创建每张图像的时间超过 1/30 秒，您可以随时存储图像并实时播放。大多数电影 CGI 不是实时渲染的。

那么如何将对象的矢量图形表示转换为光栅图像呢？这是一个不平凡的过程，需要多个步骤。

多年来，这些步骤已被叙述多遍，而它们必须以明确定义的顺序完成。这一系列操作称为“graphics pipeline”。在计算机图形学的早期，“pipeline”是不可编程的。数据被输入管道，然后输出一个光栅图像。但是今天的 GPU 允许程序员使用着色器程序控制流水线的某些部分。着色器程序只是一组非常专业的指令，用于在流水线过程的关键步骤中处理图形数据。着色器程序为程序员提供了惊人的灵活性和潜在的创造力，但代价是增加了复杂性。这些教程的目的是帮助您了解图形管线以及如何使用着色器程序操作图形数据。

1.1 The Graphics Pipeline

将对象的矢量图形表示转换为光栅图像的过程由以下步骤执行：

流水线步骤	描述	执行者
	将数据输入管道，包括定义位置的模型顶点 (x,y,z)、定义方向的法线向量 (dx,dy,dz) 和颜色数据。	CPU：JavaScript 代码
	将模型平移、缩放和旋转到 3D 场景中所需的位置和方向。然后移动镜头前的所有东西。	CPU：JavaScript 代码\nGPU：顶点着色器
	将 3D 世界投射到 2D 屏幕上。	CPU:JavaScript 代码\nGPU：顶点着色器
	剪掉不在相机视野范围内的所有东西。	CPU：JavaScript 代码\nGPU：顶点着色器
	将 3D 对象坐标映射到光栅图像的像素坐标中。	GPU：固定功能
	确定每个对象（点、线或三角形）覆盖了哪些像素，并丢弃被其他对象隐藏的对象。	GPU：固定功能
	确定代表对象的每个像素的颜色。	CPU：JavaScript 代码\nGPU：片段着色器
	将像素的颜色添加到光栅图像，可能将该颜色与图像中已有的颜色组合。	GPU：固定功能
	输出光栅图像，图像的每个像素一个颜色值。	GPU：固定功能