本文是基于Opera开发团队的一篇文章翻译修改而成的，建议第一次接触WebGL概念的朋友阅读本文，可以对WebGL技术有一个整体的了解。这不是一个WebGL教程，只相当于WebGL的百科条目（实际上目前中文维基百科和百度百科对WebGL的介绍都不够好）。

目录

什么是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，你必须有一个支持它的浏览器。让我们来看看在有哪些设备和平台已经支持WebGL了：

桌面平台

移动平台

Android操作系统

iOS操作系统

iOS 4.2及以上版本在iAD里支持WebGL，使用私有API可以扩展到其他场合，详情请查看这里和这里。

Playbook 2.0

黑莓Playbook 2.0原生支持WebGL

同时，你还需要一块好的显卡（GPU），并安装了最新的显卡驱动；这只是刚刚能够运行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浏览器

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

Safari浏览器

要为 Safari 启用 WebGL，请执行以下操作：

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

请访问。

如果显示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中建立的，建立的方法有以下几种：

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