WebGL All in One 全傻瓜简介

什么是WebGL？

WebGL是一套JavaScript API，允许开发者在浏览器中直接嵌入支持硬件加速的互动3D图形。下面是一个WebGL应用于网页中的视频，来源于WebGL教程的第10课，你可以看到简单的全3D的类似于Doom的游戏，而且完全是在浏览器中实现的，无需任何插件。

作为一项开放的web标准，WebGL是由Khronos Group开发的，Google、Apple、Mozilla、Opera等公司和组织都是其中的成员，即这一标准的制定者和积极倡导者。

WebGL是作为HTML5中的 <canvas>标签的一个特殊的上下文（experimental-webgl）实现在浏览器中的，因此WebGL也可以与所有DOM接口完全整合到一起。WebGL API是基于OpenGL ES 2.0的，是OpenGL ES 2.0的子集，所以WebGL可以运行于许多不同的硬件设备之上，例如桌面电脑、智能手机、平板电脑和智能电视。你可以在Khronos的网站上找到WebGL的规范全文。

我如何才能运行WebGL？

要运行WebGL，你必须有一个支持它的浏览器。例如：

• Google Chrome 9及以上版本
• Mozilla Firefox 4以及上版本
• Safari 5.1及以上版本（仅限于Mac OS X操作系统，不包括Windows操作系统；所有情况下必须强制开启WebGL支持，请参考下文）
• Opera Next 即Opera 12 alpha及以上版本
• 你会发现IE并不支持WebGL，不过你可以通过下载并安装IEWebGL这个插件，或者Google Chrome Framework来运行一些WebGL应用。

同时，你还需要一块好的显卡，并安装了最新的显卡驱动；这只是刚刚能够运行WebGL的要求，如果想要在一些复杂的应用中保证显示效果，那你需要一块更好的显卡。

如果你的显卡非常老旧，或者是板载的集成显卡，那么你需要在浏览器中强制开启WebGL支持；另外因为其他的一些原因（比如你的操作系统是Windows XP），在正常安装以上浏览器之后还是不能运行WebGL，那你最好也强制开启WebGL支持。开启方法如下：

Chrome浏览器

我们需要为Chrome加入一些启动参数，以下具体操作步骤以Windows操作系统为例，请Linux用户自行设置。

Chrome浏览器的用户请找到Chrome浏览器的快捷方式，如果没有就创建一个快捷方式（右键点击chrome.exe，选择“创建快捷方式”或者“发送到”→“桌面快捷方式”），右键点击快捷方式，选择属性。
在目标框内，双引号的后边，加入以下内容

--enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files

点击确定。

设置完成的后的快捷方式属性窗口看起来应当是这样的，请注意其中的“目标”文本框：

关闭目前开启的所有Chrome窗口，然后用此快捷方式启动Chrome浏览器。

其中

--enable-webgl

的意思是开启WebGL支持；

--ignore-gpu-blacklist

的意思是忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL；

--allow-file-access-from-files

的意思是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不添加这个参数。

Firefox浏览器

1. Firefox的用户请在浏览器的地址栏输入“about:config”，回车
2. 在过滤器（filter）中搜索“webgl”
3. 将webgl.force-enabled设置为true
4. 将webgl.disabled设置为false
5. 在过滤器（filter）中搜索“security.fileuri.strict_origin_policy”
6. 将security.fileuri.strict_origin_policy设置为false
7. 关闭目前开启的所有Firefox窗口，然后重新启动Firefox。

其中前两个设置是强制开启WebGL支持，最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不设置此项。

Safari浏览器

在菜单中找到“属性”→“高级”，选中“显示开发菜单”，然后到“开发”菜单，选中“开启WebGL”

如何判断我目前的浏览器是否支持WebGL？

请访问http://doesmybrowsersupportwebgl.com。

• 如果显示Yay，说明你的浏览器已经支持WebGL了。
• 如果显示Nay，说明你的浏览器目前还不能运行WebGL。

你也可以在我们网站的Demo栏目里，选择几个Demo运行一下，或者运行一些我们教程中的一些Demo。

WebGL可以用来做什么？

WebGL允许开发者在浏览器中实现实时的3D互动图形。WebGL可以应用于互动音乐电视、游戏、数据可视化、艺术、3D设计环境、3D空间建模、3D物体建模、绘制数学函数和创建物理模拟。

WebGL的工作原理是什么？

因为是被设计成直接工作在显卡端的，所以WebGL比目前其他的典型的web技术都要更加复杂。总的来说，它是相当的低等级的。这也正是它为什么能够如此迅速的完成大量的计算，并实现复杂的实时3D渲染的原因。

你不需要完全理解WebGL内在的工作原理。因为有很多第三方WebGL图形库可以帮你完成一些复杂的操作。但是如果你想成为一个高级开发者，充分利用WebGL的各种高级特性，那建议你最好还是深入了解一下其中的内涵。

在WebGL中编程，通常的目标都是想要渲染某种场景。这其中包括多重并发的绘制工作，称之为绘制调用（draw call），这些调用都是在GPU端通过一个叫做渲染管线（Rendering Pipeline）的处理流程来实现的。

在WebGL中，和其他大多数实时3D图形系统一样，三角形是用于绘制模型的最基本的元素。因此，在WebGL中需要通过使用JavaScript来生成绘制信息，这些绘制信息包括指定在什么位置绘制三角形、如何绘制三角形、这些三角形的外观长的什么样子（颜色、形状、纹理等等）。然后将这些信息传递给到GPU端，GPU进行处理，最后再返回绘制结果。

下面我们来看看渲染管线的具体流程。

渲染管线

以下部分节选自Joe Groff的文章《现代OpenGL简介 – 第一章：图形管线》

渲染管线的处理流程开始于建立顶点数组（Vertex Array）。这些数组包括了顶点属性（例如顶点在3D空间中的位置）和顶点纹理信息、颜色信息和如何接受光照（顶点法线）。这些顶点数组和其中包含的数据都是在JavaScript中建立的，建立的方法有以下几种：

• • 自己编写JavaScript代码建立
  • 加载并解析一个描述3D模型的文件（例如.obj文件）
  • 使用第三方图形库内置封装好的几何体形状

然后顶点数组里的数据会被填充到一个或多个顶点缓冲（Vertex Buffer）中，并传递到GPU端。在向GPU提交渲染工作的时候，我们还需要提供一个额外的数组用于描述顶点数组中元素的索引。这个顶点索引数组会在稍后控制顶点如何被装配到三角形中。

好了，GPU开始从顶点缓冲中读取顶点信息，并在顶点着色器（Vertex Shader）中处理这些信息。顶点着色器是一个程序，用于读取顶点属性，并输出一个新的属性集合。顶点着色器最基本的功能是计算顶点在屏幕空间中的位置。但它也会为每个顶点生成其他属性，比如颜色或纹理坐标。你可以编写代码自定义顶点着色器，也可以使用第三方图形库提供的顶点着色器。

然后，GPU会连接这些顶点来形成三角形。这里就用到了顶点索引数组，GPU会根据顶点索引的描述，将这些顶点按照指定顺序每3个分成一组，形成一个三角形。

然后光栅器（Rasterizer）会作用于每个三角形，切出这些三角形并忽略形状之外的其他部分，然后将当前剩余的可见部分打碎，填充到像素大小的片元（Fragment）中。对于其他顶点属性（比如颜色和纹理），顶点着色器会在光栅化之后的三角形表面上，为一个顶点和另一个顶点之间的部分做线性插值，为每一个片元（也就是像素）产生一个平滑的渐变值。举例来说，如果顶点着色器为每个顶点分配了一个颜色值，那么光栅器将会混合这些颜色，并在像素化的表面生成一个新的合适的渐变色。关于本段内容更详细的讲解，请参考我们教程的第2课。

这些生成的像素大小的片元之后会被传递到片元着色器（Fragment Shader）中。片元着色器将会输出每个像素的颜色和深度值，用于在帧缓冲（Frame Buffer）中进行绘制。通常情况下，片元着色器的操作包括纹理映射和光照。因为片元着色器会为每个像素进行独立绘制，这就可以实现很多相当复杂的特殊效果；但也正是因为这样，片元着色器也成为图形管线中和性能最为相关的部分。和顶点着色器一样，你可以编写代码自定义片元着色器，也可以使用第三方图形库提供的片元着色器。

最后，帧缓冲（Frame Buffer）是渲染输出的最终目的地。帧缓冲是一个2D图像，但又不仅仅是一个2D图像这么简单。除了一个或多个颜色缓冲区之外，帧缓冲还包含深度缓冲区（Depth Buffer）和/或模板缓冲区（Stencil Buffer），这两个都是在最终绘制到帧缓冲之前可选的过滤片元的方式，深度检测会忽略被前面已经绘制的物体挡住的后面的物体，模板检测会使用模板缓冲区中绘制的形状约束帧缓冲中的可绘制区域，将渲染工作“模板化”。经过这两层过滤之后依然幸存的片元，它们的颜色值会与在它们覆盖之下的颜色值进行α混合。最终的颜色值、深度值、模板值会写入相应的缓冲区。帧缓冲的输出结果也可以用作纹理输入到其他渲染中去（即渲染到纹理，可以参考教程第16课）。

我如何开始学习开发WebGL？

首先你需要有一个支持WebGL的浏览器。然后，你可以在你喜欢的JavaScript开发环境中编写代码。

要学习WebGL，最好有编写JavaScript、OpenGL或OpenGL ES的经验和基础，还需要少量的HTML5知识。如果你是一个网络前端工程师，那可能你的JavaScript经验已经很充足了，但是却没有接触过计算机图形学，那也没有关系，实际上你可以越过OpenGL和OpenGL ES，直接从WebGL切入，作为你学习计算机图形学的开始。

教程方面推荐Giles编写的WebGL教程，我们的网站上有这一教程的指定中文版本，这一教程的大部分课程都是从大名鼎鼎的Nehe的OpenGL教程改编的，从浅入深，相当的通俗易懂。如果学习过程中有什么疑问，可以加入我们的QQ群提问，也可以在论坛发帖提问。

如果不是出于学习目的，而是要开发一个正式的商用项目，那么我们建议你在了解了WebGL的工作原理和其他计算机图形学的知识之后，使用第三方图形库进行开发。如果你阅读了上面的章节之后，你会发现直接使用原生的WebGL API开发项目会非常非常非常让人头疼。不像其他的web API，原生的WebGL是非常低等级的。WebGL标准的开发者这么做的目的是为了保证WebGL充分的灵活性和适用于所有应用的可用性，同时希望第三方图形库的开发者在这之后可以为WebGL添加一个简单便捷开发层。

目前有很多WebGL的第三方图形库，其中大多都是基于WebGL来迅速创建3D环境中的元素的，这些元素包括场景、相机、光源、环境光、内置的几何体形状、材质、纹理和雾化以及粒子效果。每个图形库都提供了差不多的元素类型，但可用性如何依赖于不同图形库的本身的开发质量。另外因为WebGL可以互动，所以很多图形库也封装了处理交互事件的接口。最后，很多图形库都提供了一些成型的顶点着色器和片元着色器代码。这么说很难说清楚，当你开始试着用一下各种图形库的时候，你就会发现使用图形库而不是原生WebGL AP的便捷性了。

你可以在WebGL Public Wiki的User Contributions页面上找到一个列有大部分图形库的清单。