作者：帕里西（Tony Parisi）
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5与WebGL编程试读：
前言
在其大约二十年的历史中，Web 3D 技术的发展过程历经曲折。1994 年，VRML 曾被视为令业界瞩目的新星，但它最终在第一次互联网泡沫中发展成了背离主流 Web 开发技术的怪胎。2000 年左右，Shockwave 3D 作为新一代备受热捧的技术，曾试图引导游戏开发界的改革。然而到了 2004 年，这项技术也同样被抛弃了。2007 年，虚拟现实系统“第二人生”（Second Life）超越科技媒体的范畴登上了《商业周刊》的封面，从而掀起了一场新的“3D 土地掠夺”运动——正如字面上的意思那样，蜂拥而来的人们租赁“第二人生”中的岛屿，试图在网络世界中创造虚幻的殖民地。而到了 2010 年，虚拟世界对人们来说已经不再新鲜，消费者们更多地依赖社交游戏和手机游戏来满足他们的消遣娱乐需求。一方面，这可以说是一连串的失败，但从另一方面来说，这也是对 Web 3D 技术的一系列锤炼。
一个好的想法可能需要耗费很长的时间来实现，但它绝不会彻底消亡。在 Web 上实现 3D 的概念也是如此。当你回顾历史——包括但不仅仅指那些早期的尝试，就能得出我们中的一些人（绝无骄傲之意）一直都知晓的理念：3D 只是一种媒体形式。无论你是用它来创建大型多人在线游戏，还是一个可交互的化学课件，或者是其他类型的应用，3D 只是让像素随着用户指示运动的另一种方式。所幸新一代的浏览器开发者们终于意识到了这一点，并逐渐将 Web 浏览器往富媒体开发平台的方向推进，包括实现了一流的硬件加速的图形渲染和一体化的图像合成架构。简而言之，3D 来了，请习惯它。
本书将介绍创建桌面和移动设备浏览器端产品级 3D 应用所需的相关信息，其中会使用现代浏览器中已经支持的一些技术：WebGL、Canvas 和 CSS3。本书涵盖的话题包括 JavaScript 性能、移动端开发以及高性能 Web 设计，并深入讲解了一些能够提高生产效率的工具和库：Three.js、Tween.js、新的应用框架以及其他创建 3D 内容的可选工具。
我的第一本书《WebGL 入门指南》（WebGL Up and Running，http://shop.oreilly.com/product/0636920024729.do）的读者会发现，本书的前几章和上一本书的内容有不少重叠，这是不可避免的。前几章的许多内容都是为了概述和引导，如果没有这几章的话，或许为了读懂本书你还得先读完我的上一本书。不管怎么说，尽管前几章看起来和上一本书很类似，但上一本书的读者还是能从这几章中获取到一些在上一本书中没有提及的信息。就算是介绍性章节，也比第一本书更为深入。而前三章之后的内容，会和第一本书完全不同。《WebGL 入门指南》旨在为读者提供一项也许有点令人畏惧的新技术的入门介绍。在我看来，它或多或少缺乏技术上的严谨性，它的作用在于点燃读者对学习这门新技术的热情。如果你在读完《WebGL 入门指南》之后，产生了学习这门技术的兴趣，那么我的目的就达到了。而本书的目的在于从理论和实践两方面为读者提供更深入的内容，以实现从具备一些实践经验到真正创建产品级 3D 应用的过渡。目标读者
本书面向尝试转向 3D 开发的有 Web 开发经验的开发者，要求读者熟悉 HTML、CSS 和 JavaScript，并至少熟悉 jQuery。3D 图形或动画方面的经验会对阅读本书很有帮助，但你并不一定要事先具备这方面的基础。本书会提供 3D 方面的入门知识，并会解释书中会用到的基本概念。组织结构
本书分为两个部分。
第一部分，基础知识，探讨 3D 图形开发相关的底层 HTML5 API 和技术，包括 WebGL、 Canvas 和 CSS3。● 第 1 章介绍 3D 应用开发和 3D 图形的核心概念。● 第 2 章到第 5 章深入探讨基于 WebGL 的编程，涵盖核心
API 以及 Three.js 和 Tween.js 这两个图形和动画开发的常用开
源库。● 第 6 章研究 CSS3 中用于创建 3D 页面特效和界面的新特
性。● 第 7 章讲述 2D Canvas API，以及如何在稍低端的平台上用
它来模拟 3D 效果。
第二部分，应用开发技术。进入开发实战主题，包括 3D 内容的构建、使用应用框架构建程序，以及将应用部署到 HTML5 移动平台。● 第 8 章涵盖 3D 内容的各种构建方式，包括设计师用于构
建 3D 模型和动画的工具和文件格式。● 第 9 章着重介绍如何使用开发框架来提升应用开发效率，
并着重介绍了 Vizi——一个用于开发可复用 3D 组件的开源框
架。● 第 10 章和第 11 章深入介绍了几种类型的 3D 应用的开发，
从通过一个可交互物体来控制动画和互动的简单应用，到带精确
导航和各种交互对象的复杂 3D 环境。● 第 12 章探讨了在新一代支持 HTML5 的移动设备和操作系
统中开发 3D 应用的相关话题。排版约定
本书使用了下列排版约定。● 楷体表示新术语。● 等宽字体（constant width）表示程序片段，以及正文中出现的变量、函数名、数据库、
数据类型、环境变量、语句和关键字等。● 加粗等宽字体（constant width bold）表示应该由用户输入的命令或其他文本。● 斜体等宽字体（constant width bold）表示占位符，其内容应当被用户自定义的值或上下文决定的
值所替换。 该图标表示一般注记。本书的示例文件
你可以从 GitHub 上下载本书的所有示例代码，网址是：
https://github.com/tparisi/Programming3DApplications
注意，你得通过一个 Web 服务器来访问本书的大部分示例，而非直接使用 file:// URL 在桌面上打开它们。这是由于 JavaScript 代码中加载了一些额外的资源文件，例如 JPEG 或 PNG 格式的图片文件；由于 WebGL 安全模型中的跨域访问安全限制，这些资源文件必须通过 HTTP 从 Web 服务器传输到浏览器端。
我在 MacBook 上运行了一个标准本地版 LAMP 环境，不过你需要用到的仅仅是 LAMP 的一部分功能——像 Apache 这样的 Web 服务器。或者如果你的机器上装了 Python，你也可以利用 Python 内置的 SimpleHTTPServer 模块来启动一个 Web 服务器，使用命令行窗口定位到 examples 目录，然后输入：python -m SimpleHTTPServer
这样你就可以通过 http://localhost:8000/ 这个地址来访问本书的示例了。如果希望获取更多关于这方面的技术支持，请访问 Linux Journal 网站（http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python）。
示例文件提供了本书中创建的全部应用的完整版本，包含运行它们所需的所有文件。在某些示例中，你需要先下载一些额外的资源，例如 3D 模型资源，才能正确地运行它们。具体请查阅示例根目录中的 README 文件。 注意，本书中包含的许多资源受到版权限制。它们的创作者授权我将其作为本书编程示例支持，但仅可用于这一用途。如果你希望将这些代码用于其他目的，尤其是在你的应用中使用这些代码，那么你需要自行获取这些资源的许可，对于某些资源，你可能需要付费购买其许可证。使用示例代码
本书是要帮你完成工作的。一般来说，如果本书提供了示例代码，你可以把它用在你的程序或文档中。除非你使用了很大一部分代码，否则无需联系我们获得许可。比如，用本书的几个代码片段写一个程序就无需获得许可，销售或分发 O'Reilly 图书的示例光盘则需要获得许可；引用本书中的示例代码回答问题无需获得许可，将书中大量的代码放到你的产品文档中则需要获得许可。
我们很希望但并不强制要求你在引用本书内容时加上引用说明。引用说明一般包括书名、作者、出版社和 ISBN。比如：“Programming 3D Applications with HTML and WebGL by Tony Parisi (O'Reilly). Copyright 2014 Tony Parisi, 978-1-449-36296-6.”
如果你觉得自己对示例代码的用法超出了上述许可的范围，欢迎你通过 permissions@oreilly.com 与我们联系。联系我们
请把对本书的评价和问题发给出版社。
美国：
O'Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国：
北京市西城区西直门南大街 2 号成铭大厦 C 座 807 室（100035）
奥莱利技术咨询（北京）有限公司
O'Reilly 的每一本书都有专属网页，你可以在那儿找到本书的相关信息，包括勘误表、示例代码以及其他信息。本书的网站地址是：
http://oreil.ly/program-3d-apps-html5-webGL
对于本书的评论和技术性问题，请发送电子邮件到：bookquestions@oreilly.com
要了解更多 O'Reilly 图书、培训课程、会议和新闻的信息，请访问以下网站：
http://www.oreilly.com
我们在 Facebook 的地址如下：http://facebook.com/oreilly
请关注我们的 Twitter 动态：http://twitter.com/oreillymedia
我们的 YouTube 视频地址如下：http://www.youtube.com/oreillymedia致谢
本书是许多人努力的结果，其中不乏许多知名人士的帮助和支持。首先我想要感谢 O'Reilly 团队。我的编辑 Mary Treseler 是一名了不起的教练，她帮助我应对了第二本书创作过程中的许多挑战。本书的写作花费了将近一年的时间——这在互联网发展中可以算是很长的一段时间了——正因如此，在写作过程中我不得不随着技术发展反复地修改书的内容，以满足读者的需求。感谢 Mary 在此过程中无与伦比的耐心和支持。技术编辑 Brian Anderson 花费大量时间为本书的结构和流程提供了大量有用的建议，助理编辑 Meghan Connolly 在将我的 Word 原稿转换为 O'Reilly 出版格式的过程中展现了精湛的技术。
我还要感谢 Ray Camden、Raffaele Cecco、Mike Korcynski 和 Daniel Smith 为本书所做的出色的技术审阅。他们详细的评论帮助我澄清了许多概念，使得示例程序更加完善。同样重要的是他们积极的反应，这保证了我对写作材料的正确使用。
书中的许多内容涉及创建 3D 图形相关的程序。在此我要向我的艺术指导 TC Chang 致以无尽的感激，他帮助我完成了第 10 章到第 12 章中展示的 Futurgo 概念车。这无疑是本书非常夺目的一个亮点。我还要感谢允许我在本书示例中使用他们的工作成果的艺术家们。你可以在 README 以及每个示例的 HTML 文件和 JavaScript 文件中找到详细的艺术家名单。在此特别感谢 TurboSquid 的技术支持负责人 Christell Gause，多亏他的费心努力，我才得到了 TurboSquid 艺术家们的授权，使得他们的创作成果得以使用在本书中。
我们很幸运地得到了 3D Web 开发者社区的强力支持。感谢 Three.js 团队所做的开创性的工作，尤其是其创始人 Ricardo Cabello (Mr.doob)。Google 的 Ken Russell 和 Brandon Jones 是世界标准的 WebGL 的实现者，但是就算再忙，他们也会耐心地回答我的问题，为我解释了 API 设计方式的缘由，并分享了未来技术的发展方向。除了 WebGL，CSS 3D 和 2D canvas 也生机勃勃。David DeSandro、Keith Clark 和 Kevin Roast 在这些领域进行了突破性的研究，并且慷慨地允许我引用他们的成果。我还要为我的好友 Don Olmstead 叫好，他几年前和我进行的一系列设计讨论最终沉淀为 Vizi，我的新 3D 开发框架。这个框架在本书中占据了重要地位。
最后要感谢我的家人。我在写作本书的同时还做着全职工作，此外还要应付其他一些事情，在此期间他们表现出了极大的耐心。Marina 和 Lucian，我欠你们一个假期，或者说三个假期。第一部分基础知识第1章绪论
我们生活在 3D 世界中。人们的运动、思考和感受都是 3D 的。大多数媒体是 3D 的，尽管它们通常被展示在平面屏幕上。计算机生成的 3D 图像组成了动画电影；在线地图服务使我们能够在虚拟的 3D 环境中探索目的地；大多数电子游戏，不管是运行在专用游戏机上还是手机上，都是用 3D 渲染的；就连新闻都 3D 化了：为了在 24 小时滚动播出的新闻中吸引眼球，几年前美国有线电视新闻（CNN）的一位分析师在虚拟场景中手舞足蹈的滑稽场面，如今在有线频道的播出中已经司空见惯。
计算机 3D 图形的历史可以追溯到 20 世纪 60 年代，几乎和计算机本身的历史一样长。它被广泛应用于工程、教育、培训、建筑、金融、销售、市场、博彩、娱乐等各个领域。曾经，3D 图像只能用高端计算机系统搭配昂贵的软件来渲染，而过去十年中，这种情况已然改变。如今，所有的计算机和移动设备都搭载了 3D 图形处理硬件，普通智能手机甚至有着比十五年前的专业图形工作站更为优秀的图形处理能力。更重要的是现代 Web 浏览器也支持了 3D 渲染，相比过去昂贵的 3D 专用渲染软件，浏览器显然更普遍，更易于获取，并且还是免费的。
图 1-1 展示了一个名为“100 000 Stars”的、基于浏览器开发运1行的 3D 银河系飞行模拟程序的局部。你可以用鼠标绕银道面 旋转整个星系，以及放大观看你所感兴趣的星体。每颗星星都根据其视星2等 和颜色来渲染，并用标签注明其通用名。当鼠标移到标签上时，标签高亮显示。点击任意标签显示浮层，展示该星体的维基百科词条。点击浮层上的文字，浏览器会在新标签页里打开词条链接。100 000 Stars 的交互体验令人震撼，包括美丽的渲染效果、脉冲动画和宏伟的背景音乐，并巧妙地集成了 2D 用户界面。银道所在的主平面。银河系成员如恒星、尘埃云及气体等，绝1大部分都对称地分布在这个平面的两侧。——译者注
指观测者用肉眼所看到的星体亮度。——译者注2图 1-1：由 Google 创建的 100 000 Stars 项目（http://workshop.chromeexperiments.com/stars/）；图片由 Google 提供
100 000 Stars 是 Google 数据艺术小组的一个实验性项目，目的在于证明 Chrome 浏览器的丰富能力。尽管这个项目是实验性的，但它所依赖的技术却并不是：它基于被当今多数浏览器所支持的 HTML5 特性。星系和星体通过 WebGL 实时渲染，这是一项新的支持硬件 3D 加速渲染的图形标准；标签通过 CSS3 中的 3D 变换来实现与星体的位置对应；而浮层与 3D 内容可以无缝结合，则是由于所有的部件都被浏览器统一解析为页面元素来展现。
几年前，类似 100 000 Stars 这样的体验只能用本地客户端的形式来实现，用户需要下载庞大的安装包并安装到本地计算机上，而开发者们需要使用复杂的开发工具，并耗费大量的时间和金钱来实现它。现在，它可以用开源免费的工具和 Web 标准技术栈在浏览器中创建。此外，只要简单地重新加载页面，你就能立即看到最近的更新，通过 URL 在任何地方都可以加载信息，点击 3D 环境中的超链接还可以访问更多信息。
本书是关于如何利用现代浏览器的强大功能来创建在线可视化应用。其中一些应用可以看作传统 3D 产品的复刻，为覆盖更多的客户以及节省成本而使用浏览器技术来进行重构。而由于门槛的降低，各个领域的消费型应用也得以使用 3D 技术来构建——包括广告、产品营销、客户支持、教育、培训、旅游、游戏、娱乐，等等——这多么令人兴奋！ 3D 为交互体验带来了新的维度，得益于与 Web 技术的结合，全世界的人们现在都可以切身地感受这第三个维度。 100 000 Stars 是交互式媒体发展的力作，它的创作者之一 Michael Chang 为这个项目写了一份很好的案例分析。如果希望了解更多关于这个项目开发的事情，请访问 http://www.html5rocks.com/en/tutorials/casestudies/100000stars/。1.1 HTML5：新型的视觉媒介
HTML 早已不像最初那样只支持静态页面、表单和提交按钮。21 世纪初，浏览器通过 Ajax 技术使得页面能够局部动态更新，从而提供了更加丰富的交互。然而用 Ajax 切换页面的具体方式始终受限于 HTML 和 CSS 的图形特性。如果开发者希望打破这些限制，就必须使用一些浏览器媒体插件，例如 Flash 和 QuickTime。
这是 21 世纪初的普遍状况，而近几年情况已经改变。这段时期，许多浏览器在发展过程中逐步支持了 HTML5。有了 HTML5，浏览器就成为一个能够运行复杂应用的平台，这些应用在功能和性能上均可媲美本地应用。HTML5 是 HTML 标准的大规模修订，包括语法的清理、新的 JavaScript 语言特性和 API、移动端支持以及突破性的多媒体支持。HTML5 平台的核心是一系列先进的图形技术，本书将重点讲述这些图形技术。● WebGL，使得 JavaScript 支持硬件 3D 加速渲染。WebGL
基于 OpenGL，几乎所有的 PC 端浏览器都支持 WebGL，而越
来越多的移动端浏览器也开始支持 WebGL。● CSS3 3D 变换、平移以及可以支持更高级页面效果的用户
自定义滤镜。经过过去几年的发展，CSS 现在已经支持硬件 3D
加速渲染和动画。● Canvas 元素和相应的 2D 绘图 API。浏览器普遍支持这个
JavaScript 的 API，它使得开发者可以在一个 DOM 元素上绘制
任意图形。尽管 Canvas 是一个 2D 绘图 API，但如果使用一些
JavaScript 库的话，它也可以用于渲染 3D 效果——在不支持
WebGL 和 CSS3 3D 的平台上，这通常被作为 3D 渲染的替代解
决方案。
这些技术各有其优劣和适用场景，它们在构建 3D 可视化交互的过程中发挥着各自的作用。至于究竟要选择哪一种，你需要综合考虑多方面的因素——你想要构建什么，需要支持哪些平台，性能问题，等等。举例来说，如果你要开发一个具有高质量图像的第一人称射击游戏，若不借助 WebGL 访问图形硬件的能力，这将很难实现。又或者你在为某个视频网站开发一个有趣的调台器界面，包括当前视频缩略图、换频道的旋转效果，以及视频剪辑切换间隙的雪花噪点特效。在这个场景下，CSS3 会是创造优秀体验的良好选择。 总而言之，“HTML5”这个概念对大多数开发者而言指的是一系列技术和标准，包括已经被万维网联盟（W3C）采纳并被所有浏览器支持的标准，以及虽没有达到成熟标准的程度但已经被浏览器广泛支持的特性。还有如 WebGL 这类已经成熟和稳定，但不由 W3C 管理的标准。1.1.1 浏览器平台
HTML5 为 Web 带来了丰富的图形技术；然而，若非浏览器其他特性也得到相应的发展，这些图形技术将毫无用武之地。尤其是以下提及的几点，它们为真正的 HTML5 富互联网应用的产生铺平了道路。● JavaScript 虚拟机性能的提升WebGL 和 Canvas 2D 都是 JavaScript 的 API，JavaScript
的代码运行速度决定了用这些技术实现的动画和交互的运行速
度。几年前，JavaScript 虚拟机的性能是 3D 技术实用化的一大
阻碍，而如今虚拟机性能的提升，使得这个问题得以解决。● 图像合成速度的提升浏览器负责将页面上的元素快速合成渲染并避免不必要的重
绘。随着页面上的内容更加动态，浏览器在图像合成方面有了很
大的发展，包括对所有的视觉元素——不管是 2D 还是 3D——
使用 3D 硬件加速渲染。● 动画支持requestAnimationFrame() 函数是替代 setInterval() 和
setTimeout() 来驱动动画的新函数。这个新方法使得开发者能够
以和浏览器刷新页面元素同步的刷新频率来更新 canvas 元素的3
绘图内容，这大大地提升了性能，并防止了绘图残影 的产生。绘图残影：http://en.wikipedia.org/wiki/Visual_artifact。——译者3注
HTML5 浏览器同时也支持多线程编程（Web Workers）、全双工 TCP/IP 通信（WebSockets）、本地数据存储等新特性，利用它们，开发者得以构建世界级的 Web 应用。这些特性以及 WebGL、CSS3 3D 和 Canvas，结合起来象征着一个革命性的新平台，它为任何计算机和设备提供在线的可视化应用。
图 1-2 展示了 Epic Games 团队开发的 Epic Citadel 游戏的一个测试版本，它运行在 Firefox 浏览器中。Epic Citadel 使用 WebGL 来渲染图像，然而这个游戏的杰出表现，还是应当归功于游戏引擎的突破性发展。这款游戏使用了 Epic 团队实现的浏览器版 Unreal 引擎，这款引擎是本地版的 Unreal 引擎在 Web 端的移植，使用 4Emscripten 编译器 （https://github.com/kripken/emscripten/wiki）和 asm.js（一个新的底层优化程序集）来实现。浏览器用户只需在地址栏输入一个 URL，就可以访问渲染精良的全屏游戏，游戏的刷新率可以达到每秒 60 帧（60 fps）的水准，无需安装，只需很短的加载时间。
款可以将 C++ 代码编译成 JavaScript 代码的编译器。——译者4注图 1-2：运行在 Firefox 中的 Epic Citadel 测试版，一个使用 WebGL 和 asm.js 实现、刷新率达到 60 fps 的网页游戏；图片由 Epic Games 团队提供1.1.2 浏览器支持情况
在本书写作时，3D 特性并没有被各种浏览器完全支持。不同浏览器的支持情况存在细微的差异。关于这些问题，我们将在后续章节进行详细讨论，现在先列出比较重要的几点。● 所有的桌面浏览器都支持 WebGL。微软于 2013 年年底在
IE11 中支持 WebGL。虽然这已经落后于其他浏览器厂商，不过
看起来微软会迅速赶上。● 几乎所有的移动端浏览器都支持 WebGL：移动版
Chrome（Android）、移动版 Firefox（Android 和 Firefox OS）、
Amazon Silk（Kindle Fire HDX）、Intel 的新操作系统 TIzen、
BlackBerry 10。移动版 Safari 以一种受限的方式支持
WebGL（仅在 iAds 框架中）。● 所有的浏览器和移动平台都支持 CSS 3D 变换。而 CSS 自
定义滤镜仅仅被桌面版 Chrome、桌面版 Safari、移动版
Safari、BlackBerry 10 以实验性的方式支持，IE 和 Firefox 均不
支持此特性。
显然，目前浏览器对 3D 特性的支持并没有达到最佳状况，然而它是随着 Web 应用这个领域的兴起而发展的。浏览器兼容性问题向来为人诟病，随着 HTML5 特性以及设备和操作系统的飞速发展，这个情况并没有得到改善。值得安慰的是，本地应用的开发、测试、部署和发布更困难，相比之下 Web 开发还算好的。这就是 21 世纪 Web 开发者的现状。 如果这些标准都被支持了，那么所有代码都只需写一次就行。然而，现状并非是“一次编写，随处运行”，而是“一次编写，随处调试”。1.2 3D图形的基础知识
本节介绍 3D 图形的核心概念和术语。如果你仅仅有 2D Canvas 绘图和动画开发经验，请花一些时间去熟悉你以往没有接触过的概念，这些概念将贯穿本书。如果你有 3D 或 OpenGL 开发的相关经验，那么可以跳过本章，直接进入下一章。1.2.1 什么是3D
既然你拿起这本书，就说明你至少对我所使用的“3D 图形”（3D graphics）这个术语有基本的认知。然而为确保你对这个概念有足够清晰的认识，我们来看看它正式的定义。以下是维基百科上“3D 计算机图形”（3D computer graphics）的条目（http://en.wikipedia.org/wiki/3D_computer_graphics）：3D 计算机图形（相对 2D 计算机图形而言）是使用三个维度来表示几何数据（通常使用笛卡儿坐标系）并将其存储在计算机中，用于计算和绘制成屏幕上 2D 图像的一类图形。这类图形可被存储起来代随时浏览，也可用于实时显示。
这个定义可展开为几个部分：(1) 数据使用三维坐标系统表示；(2) 它最终被绘制（渲染）为一个 2D 图像（正如你在计算机显示器上看到的那样）；(3) 它支持实时显示，即当 3D 数据由于动画或用户操作发生改变的时候，图像可以在基本无延迟的情况下更新渲染。最后一点是创建交互式应用的关键。它非常重要，以至于催生了一个价值数十亿美元的、致力于发展支持实时 3D 渲染的图形专用硬件的产业。像 NVIDIA、ATI、Qualcomm 这些公司都是这个领域的佼佼者，对它们，你或许早有耳闻。
3D 图形并不依赖于像轨迹球、操纵杆这些特殊的输入设备，这在上文的定义中没有提及，但同样非常重要。它也不依赖于特殊的显示设备，立体眼镜和 OmniMax 电影院的昂贵门票都不是必需的。3D 图形通常被渲染在 2D 平面的显示设备上。当然这并不是说 3D 图形不能被展示为可以用立体眼镜观看的立体图像，或者是在立体电视的屏幕上播放——只是说，这不是必需的。
3D 编程需要通常 Web 开发者掌握的知识以外的新知识和技能。不过只要学会一点入门知识以及学会使用正确的工具，我们的学习进展就会非常迅速。本章接下来将着重讲解 3D 编程的基本概念，这些概念会贯穿全书。本章对这些概念的说明并不全面（有些书专门详细地讲解了这些概念），仅供入门。如果你有 3D 编程经验，完全可以跳至第 2 章。1.2.2 3D坐标系
如果你熟悉 2D 笛卡儿坐标系，例如 HTML 文档的窗口坐标系，那对 x 和 y 的含义一定不陌生。这些 2D 坐标定义了
绘制 3D 图形的方法有很多种。到目前为止，最常用的方法是网格（mesh）。一个网格通常由一个或多个多边形拼接而成，而这些多边形是由定义了 3D 空间位置（x, y, z 组）的顶点（vertice）构造出来的。在网格中，最常用的多边形是三角形（由三个顶点构造而成）和四边形（由四个顶点构造而成）。3D 网格通常简称模型（model）。
图 1-4 描绘了一个 3D 网格。深色线条勾勒出组成网格的四边形，定义出人脸的形状。（在最终渲染出来的图像中，你将不会看到这些线条，它们只是参考线。）网格顶点中的 x、y、z 属性仅仅定义了网格的形状，而网格的外观特性，如色彩和明暗等，则由其他属性来定义。下面，我们来简单地讨论这些属性。图 1-4：一个 3D 网格；遵循知识共享署名 - 相同方式共享 3.0 未本地化版本协议使用1.2.4 材质、纹理与光源
除 x、y、z 这几个顶点位置信息属性之外，还有一些其他属性被用来描述网格的外观，包括简单的色彩属性和复杂的反射、明暗等属性。你还可以使用一个或多个位图来表示外观信息，这通常被称为纹理映射（texture map），或简称纹理。单个纹理可以直接定义外观样式（正如一张图像被印在 T 恤上那样），也可以与其他纹理结合起来实现复杂的效果，如表面凹凸、光的衍射等。在大多数图形系统中，网格的外观属性统称材质（material）。材质的展现通常依赖于一个或多个光源（light）的存在，这些光源定义了一个场景被照亮的模式。
图 1-4 中的人头具有紫色的表面材质，一个从模型左边发出的光源造成了模型的明暗效果。注意，暗部在脸的右侧。1.2.5 变换与矩阵
顶点坐标的位置定义了整个 3D 网格的位置。当你希望改变一个网格在 3D 视图中的位置的时候，如果要一个个地改变每个顶点的位置，显然太麻烦了，尤其是当网格在进行持续动画的时候。为此，多数 3D 系统支持变换（transform）操作，即允许使用相对位置运算来移动网格，而非遍历所有顶点并确实改变它们的位置数值。变换允许你缩放、旋转以及平移（移动）一个渲染好的网格，而无需实际去改变所有顶点的数值。
图 1-5 描绘了 3D 变换操作，在这个场景中我们可以看到三个立方体。这三个立方体网格具有同样的顶点数值。当移动、旋转和缩放网格的时候，我们并没有实际去修改顶点的值，而是应用了变换。左边红色的立方体被向左平移了四个单位长度（x 轴上的 -4），并 围绕它自身的 x 轴和 y 轴进行了旋转。（注意，旋转值的单位是弧度，这个单位将在第 4 章中更详细地说明。）右边蓝色的立方体被向右平移了四个单位长度，并在三个维度上都放大了 1.5 倍。中间绿色的立方体没有进行任何变换。图 1-5：3D 变换——平移、旋转和缩放
3D 变换通常由一个变换矩阵（transformation matrix）来表示，这是一个包含一组用于计算转换后顶点位置的数值的运算量。绝大多数 WebGL 变换用一个 4×4 矩阵来表示——一个包含 16 个数字的、4 行 4 列的二维数组。图 1-6 展示了一个 4×4 矩阵的布局。平移被存储在元素 m12、m13、m14 中，分别对应 x、y、z 的平移值。x、y、z 的缩放值存储在元素 m0、m5、m10 中（矩阵的对角线）。旋转值存储在 m1 和 m2（x 轴），m4 和 m6（y 轴），m8 和 m9（z 轴）中。用这个矩阵去乘一个三维向量，便可得到变换后的值。图 1-6：一个 4×4 变换矩阵（http://www.songho.ca/opengl/gl_transform.html）；经许可进行了修改
如果你和我一样是线性代数爱好者，那你会觉得用矩阵来描述变换的概念相当容易接受。就算不是也不用怕，用于构建本书示例的工具都很好地隐藏了与这些矩阵操作相关的细节：你只需以平移、旋转、缩放的直观概念来处理程序就行。1.2.6 相机、透视、视口与投影
每个渲染好的场景都需要一个供用户查看场景的观察点。3D 系统中通常使用相机（camera）的概念来描述这个观察点。相机定义了用户相对于场景的位置和朝向，它具备现实世界中相机的属性，如视野（field of view）的尺寸，它定义了透视（perspective，即远处的物体看起来比较小）。相机的各种属性综合起来，提供了 3D 场景最终在 2D 视口（viewport）上的渲染结果，视口是由浏览器窗口或 canvas 元素决定的。
相机通常用一对矩阵来表示。第一个矩阵定义相机的位置和方向，类似变换矩阵（见前文）。第二个矩阵专门用于表示相机的 3D 坐标到视口的 2D 绘制空间坐标的转换，称为投影矩阵（projection matrix）。我就知道：讨厌的数学又来了。然而，相机矩阵的细节在多数工具中已经被很好地隐藏起来，一般来说，你只需对准、拍摄以及渲染。
图 1-7 描述了相机、视口和透视的基本概念。左下角有一个眼睛图标，它代表相机的位置。指向右侧的红色向量（在图中被标注为 x 轴）表示相机的指向。蓝色的立方体是 3D 场景中的物体，绿色和红色的矩形分别是近剪裁平面（near clipping plane）和远剪裁平面（far clipping plane）。这两个平面定义了一个 3D 空间子集的范围，通称视锥体或视见体（view volume 或 view frustum）。只有位于视见体中的物体才会被真正渲染到屏幕上。近剪裁平面等效于视口，在这里，我们会看到最终渲染出来的图像。图 1-7：相机、视口和透视（http://obviam.net/index.php/3d-programming-with-android-projections-perspective/）；经许可进行了修改
相机非常强大，它从根本上定义了观察者和 3D 场景之间的关系，并为这个关系提供了现实感。相机也为动画制作者提供了强有力的武器：通过动态改变相机的位置，可以创造电影般的效果并控制其叙事风格。1.2.7 着色器
为了渲染出一个网格的最终图像，开发者需要准确定义顶点、变换、材质、光源以及相机是如何相互作用并最终生成图像的。而承担这个工作的，是着色器（shader）。着色器（又称为“可编程着色器”）是一段源代码，它实现了将网格像素点投影到屏幕上的算法。图形硬件能够解析顶点、纹理以及其他底层的东西，但并不能处理材质、光源、变换以及相机。这些高级的结构由着色器程序来处理。着色器通常使用类 C 的高级语言编写，并被编译成可以被图形处理单元（GPU）执行的代码。 所有的现代计算机和设备都配备了图形处理单元，一个独立于 CPU 的、专门用于 3D 图形渲染的处理器。本书中讨论的主要 3D 编程技术都以 GPU 存在为前提。
着色器为程序员的双手注入了神奇的力量：借助着色器，程序员可以精准地控制每一个像素和每一次图像渲染。着色器驱动着好莱坞电影特效中那些令人拍案叫绝的视觉效果，驱动着“CG”动画电影，驱动着现代电子游戏中的实时渲染。随着 Web 浏览器对着色器的支持，我们的 WebGL 应用效果甚至可以媲美最好的电子游戏。而利用着色器，我们也得以更好地控制页面中 CSS 元素的展现和动画。
图 1-8 展示了一个使用可编程着色器渲染的 WebGL 水波模拟案例。碧波荡漾、光影跃动，逼真得惊人，而且你还可以实时地与场景进行交互，尽管它是虚拟的。提醒一下：这可是在一个 Web 浏览器中运行的！图 1-8 使用可编程着色器渲染的 WebGL 水波模拟，创作者 Evan Wallace（http://madebyevan.com/webgl-water/）；转载已被许可
除了 WebGL，借助 CSS 自定义滤镜（CSS Custom Filter）这项实验性的技术，基于着色器实现的特效同样可以应用于 DOM 元素。关于这一点，我们在第 6 章中将会详细讨论。
以下列举了一些与着色器相关的技术点，我们将在本书中讲述。● WebGL 和 CSS 自定义滤镜都使用 OpenGL ES 着色语言（GLSL ES）定义的着色器。在 WebGL 中编写着色器和为 CSS
编写着色器不太一样，但基本的编程语言是通用的。● 在 WebGL 中，物体的渲染绘制依赖于着色器。如果没有提
供着色器，或者编译或加载着色器过程出错，则所有物体都无法
成功渲染。● 在 CSS3 滤镜中，着色器是可配置的。当着色器被用来定
义 CSS3 滤镜的时候，它被称为自定义滤镜。● 2D Canvas API 不支持可编程着色器。如果你打算用 2D
Canvas 作为 WebGL 的降级方案，得在代码里面自己实现这套
机制。关于这一点，在第 7 章中将有详细说明。
着色器从某种意义上来说代表了一条学习曲线，你需要学习新的特性以及一门新的编程语言，这需要耗费大量的精力。如果你觉得这太可怕了，别担心，有许多流行的开源库和工具可供选择，如此一来，你就无需去关注那些艰涩的着色器具体实现细节。甚至在你的 3D 编程职业生涯中，你连一行 GLSL 代码都无需编写——不过我建议你还是试试看，这样一来，你就可以对别人说你做过这件事啦。
关于 3D 图形基础内容的介绍至此结束。书中提及的每种技术的具体实现会略有不同，但核心的概念都是一致的。在接下来的几章中，我们将深入研究如何使用 WebGL、CSS3 和 Canvas 2D 来创建 3D 内容并实现 3D 动画。第2章WebGL：实时 3D 渲染
WebGL 是 Web 3D 图形的标准 API，它使得运行在浏览器中的 JavaScript 程序也可以充分利用 3D 渲染硬件的强大能力。在 WebGL 出现之前，为提供硬件加速的 3D 体验，开发者只能借助浏览器插件或编写需要用户下载安装的本地软件。
尽管 WebGL 不属于 HTML5 官方标准，但绝大多数支持 HTML5 的浏览器都支持 WebGL——正如支持 Web Workers、WebSockets 等并未被 W3C 官方作为标准采纳的技术一样。要想将浏览器打造成一流的应用平台，3D 是不可或缺的部分，这是 Google、Apple、Mozilla、Microsoft、Amazon、Opera、Intel、BlackBerry 等各大公司开发者们的共识。1
主流的桌面浏览器和绝大多数手机浏览器都支持 WebGL。WebGL 已经可以运行在类似于你的家用机器和办公机器的数百万台设备上。包括游戏、数据可视化、计算机辅助设备、3D 打印和零售行业在内的许多使用了 WebGL 技术的网站也在蓬勃发展。在本书写作时，iOS 上的 Mobile Safari 还不支持 WebGL，这是1个很严重的问题。所幸利用某些适配工具包，我们可以将基于 HTML5 和 WebGL 的程序打包成本地应用在 iOS 平台上运行、研究，关于这个问题，在第 12 章中会有详细的说明。2
WebGL 是一套底层绘图 API：它通过解析数据和着色器阵列 来进行绘制。它不像 2D Canvas API 那样具有高度封装的结构，这可能会令习惯 2D 图形接口的人感到困惑。不过很多开源的 JavaScript 工具包都提供了更加高级的封装方法，这些工具包让开发者可以用与操作传统图形库更为接近的方式来操作 WebGL 的 API。虽然有了这些工具包，3D 开发也还是有一定的难度，但至少利用它们，对 3D 开发没什么经验的人可以比较方便地入门，而有经验的 3D 开发者也可以节省大量时间。阵列，指排成行和列的数学元素。矩阵就是一种典型的阵列形2式，此处姑且可以简单理解为一个数据 / 着色器二维数组。——译者注
为了让读者对 WebGL 有个基本印象，本章将简单介绍 WebGL 的底层基础。虽然我们在本书中使用的工具包可以让你不必去关注这些底层细节，但了解这些工具包是基于什么构建的也非常重要。所以，让我们从 WebGL 的核心概念和 API 开始学习。 正如不支持许多 HTML5 新特性一样，你的电脑可能也不支持 WebGL。主流桌面浏览器中，一部分浏览器只有比较新的版本才支持 WebGL（例如 IE 只有 IE11 及其之后的版本才支持 WebGL）。还有一些老机器的图形处理器不支持 3D 硬件加速，在这些老机器上，浏览器会直接关闭 WebGL。如果你想了解你的目标机器、设备或浏览器是否支持 WebGL，请访问 http://caniuse.com/，键入“WebGL”关键字进行搜索，或直接访问这个链接：http://caniuse.com/#search=WebGL。2.1 WebGL基础
WebGL 的雏形在 2006 年由 Mozilla 的工程师 Vladimir Vukićević 提出。Vladimir Vukićević 试图创建一套用于 Canvas 元素的 3D 绘图 API，作为已有的 2D Canvas API 的扩展。他基于 OpenGL ES（在移动端图形领域已经相当普及的 API 标准）设计了这套当时还被称为 Canvas 3D 的 API。到 2007 年，Mozilla 和 Opera 分别实现了各自浏览器上的 Canvas 3D 版本。
2009 年，来自 Opera、Apple 以及 Google 的其他参与者与 Vukićević 共同创建了 WebGL 工作组，这个工作组隶属于 Khronos Group 团队，Khronos Group 团队还维护着 OpenGL、COLLADA 以及其他一些你或许已经耳熟能详的标准。如今 Khronos 仍然在继续维护 WebGL 标准。Vukićević 担任 WebGL 小组负责人直到 2010 年，之后 Google 的 Kenneth Russell 接替了他。
以下是来自 Khronos 网站的 WebGL 官方描述：WebGL 是一套免费、跨平台的 API，它在 HTML 中以 3D 绘图上下文的形式实现了 OpenGL ES 2.0 的功能，并以底层的文档对象模型（Document Object Model，DOM）接口的形式将开发接口暴露出来。它使用 OpenGL 着色器语言 GLSL ES，并且可以与页面上的其他内容（可以分层的形式叠加在 3D 绘图区域的上方或下方）无缝融合。它非常适应于使用 JavaScript 编程语言构建的 3D Web 动态应用，并将被现代浏览器完美支持。
这个定义包括几个要点，下面我们来分别说明。● WebGL 是一套 API。它通过一套专门的 JavaScript 编程接
口来调用，不像 HTML 那样带有附带的标记。3D 渲染与 2D 绘
制同样使用 Canvas 元素来作为绘图上下文，开发者通过对
JavaScript API 的调用，在 Canvas 中实现 3D 内容的绘制。事实
上，对 WebGL 接口的访问是通过现有 Canvas 元素中的 3D 专
用绘图上下文来实现的。● WebGL 基于 OpenGL ES 2.0。OpenGL ES 是长久以来的
3D 渲染标准 OpenGL 的一个适配方案。ES 代表“嵌入式系统”（embedded system），这表示它专用于小型计算设备，尤其是手
机和平板电脑。OpenGL ES 是为 iPhone、iPad 和 Android 手机
提供 3D 图形渲染能力的标准接口。WebGL 的设计者们认为，
基于 OpenGL ES 更小的硬件占用量，可以更方便地提供一套统
一的、跨平台跨浏览器的、用于 Web 的 3D API。● WebGL 可以与其他 Web 页面元素相结合。WebGL 可以以
分层的形式置于其他页面内容的上方或下方。3D canvas 可以占
据页面的一部分或整个页面，它也可以被包含在被设置了 z-
index 属性的
建 3D 图形，而使用你所熟悉的 HTML 特性来构建其他页面元
素，并将它们（通过浏览器）无缝组合在同一个页面上展示给用
户。● WebGL 为创建动态 Web 应用而生。WebGL 在设计过程中
就考虑到了网络传输的需要。它始于 OpenGL ES，但它加入了
许多与浏览器适配的特性。它使用 JavaScript 编写，并且对
Web 传播相当友好。● WebGL 是跨平台的。WebGL 可以运行在任意操作系统上，
无论是手机、平板电脑还是台式电脑。● WebGL 是免费的。正如所有的开放 Web 标准那样，
WebGL 可以免费使用。没有人会因为你使用了 WebGL 而要求
你支付版权费用。
Chrome、Firefox、Safari 以及 Opera 的创造者们为发展和支持 WebGL 投入了众多的资源。来自这些浏览器开发组的工程师们同样也是 WebGL 标准组织的重要成员。WebGL 标准的 发展进程对 Khronos 小组的全体成员开放，同时也有对公众开放的邮件组。本书的附录中提供了邮件组和其他标准相关资源的详细信息。2.2 WebGL API
WebGL 基于成熟的图形 API——OpenGL。WebGL 始于 20 世纪 80 年代末期，在经历了来自微软的 DirectX 的竞争威胁后，成为了 3D 图形编程无可争议的行业标准。
但所有的 OpenGL 版本都不尽相同。不同平台——包括台式电脑、电视机机顶盒、智能手机以及平板电脑——具有不同的特性，因此针对不同平台的 OpenGL 版本也由此发展起来。OpenGL ES 是针对机顶盒和智能手机这类小型设备的 OpenGL 版本，因此，它成为了 WebGL 的理想核心。它小而精，这不仅意味着它可以直接被浏览器实现，更意味着不同浏览器的开发者都可以很方便地在浏览器中实现对 WebGL 的支持，从而使得在一款浏览器中编写测试的 WebGL 应用可以直接运行在另一款浏览器中。
WebGL 非常精巧，这使得 WebGL 应用的开发者们需要做更多3的工作。3D 场景本身不具备 DOM 结构 ，也没有原生支持的用于加载几何图形和动画的 3D 文件格式；除了几个底层的系统事件以外，3D canvas 并不具备内建的事件机制（例如，当你点击场景中的某个
试读结束[说明：试读内容隐藏了图片]