《WebGL编程指南》详细阐述了与WebGL程序设计相关的基本解决方案,主要包括WebGL概述,渲染几何体,光照,相机,实现方案,颜色、深度测试以及Alpha混合,纹理,拾取操作,整合方案以及高级话题等内容。此外,《WebGL编程指南》还提供了相应的示例、代码以及伪代码,以帮助读者进一步理解相关方案的实现过程。《WebGL编程指南》可以作为高等院校计算机及相关专业的教材和教学参考书,也可作为相关开发人员的自学教材和参考手册。
作为一种新兴的Web技术,WebGL向浏览器添加了基于硬件加速的3D图形功能,且用户无须安装附加软件。WebGL源自OpenGL,因而对Web程序开发而言,这带来了全新的3D图形程序设计理念,即使对于资深的Web开发人员来说,这一说法亦不为过。
本书涵盖了大量示例,进而阐述WebGL的学习方式。其中,各章节分别对3D图形程序设计的某一重要问题加以讨论,并辅以练习以对相关理论予以直接测试。
关于WebGL的学习方式,本书提供了一幅清晰的线路图。各章均提供了相应的学习目标,随后是对相关内容的深入讨论。除此之外,本书示例丰富,并引入了基于WebGL的最新理念,包括绘制机制、颜色、纹理、转换操作、帧缓冲区、光照、对象表面、几何体对象等。在WebGL环境下,各章示例使理论与实际得以有机结合,进而全面提升读者的3D图形程序设计水平。本书使用WebGL和JavaScript语言,并涵盖了与3D Web图形应用程序相关的大量信息,因而其实用性和重要性毋庸置疑。
本书内容
第1章引入了HTML 5 canvas元素,阐述了与其相关的WebGL上下文环境,并于随后讨论了WebGL应用程序的基本结构。作为WebGL功能展示,本书将对车辆仓库应用程序予以分析,该示例体现了WebGL应用程序中的各方面内容。
第2章介绍了WebGL API,并以此定义、处理和渲染对象。同时,本章还讲述了基于AJAX和JSON的异步几何体对象加载方式。
第3章讲解WebGL环境中的ESSL着色器语言,以及ESSL着色器中WebGL场景的光照实现方案。另外,本章还将深入分析着色器机制和反射光照模型背后的理论知识,并将其与多个示例加以结合。
第4章探讨了矩阵代数,并在WebGL中构建和操控相机对象,其相关内容涉及WebGL场景中的透视和法线矩阵,描述了此类矩阵与ESSL着色器之间的传递方式,进而将其应用于各顶点上,并展示了与WebGL相机构建方式相关的多个示例。
第5章对矩阵应用进行了适当的扩展,进而执行场景元素的转换行为(如移动、旋转以及缩放操作)。同时,本章还引入了矩阵栈这一概念,据此可针对场景中的各对象执行并维护独立转换。另外,本章还通过矩阵栈和JavaScript计时器讨论了多种动画技术,并通过具体示例予以展示。
第6章深入分析了ESSL中的颜色应用,其中包括WebGL场景中的多光源的定义和操作方式、深度测试概念、Alpha混合机制,以及基于此类特性的透明对象的创建方式,并辅以多个示例对相关概念予以说明。
第7章解释了WebGL场景中的纹理的创建、管理以及映射方式,纹理坐标以及纹理贴图机制。相关示例展示了多种贴图技术。另外,本章还阐述了多重纹理和立方体贴图的应用方式。
第8章描述了拾取操作的简单实现方案,该术语体现了用户与场景对象的选取和交互方式。拾取操作计算鼠标的单击坐标,并确定用户是否在canvas渲染对象上执行了单击操作。该方案的框架通过多个回调钩子函数加以定义,进而实现特定逻辑的应用程序。同样,本章依然提供了多个演示示例。
第9章回顾了示例代码的框架结构,并对第1章提及的虚拟车辆仓库应用程序予以回顾,还进行了适当的扩展。作为学习示例,该应用程序显示了Blender模型于WebGL场景之间的导入方式,以及如何创建ESSL着色器以支持Blender中的材质数据。
第10章探讨了多个高级话题,如后处理技术、点精灵对象、法线贴图以及光线跟踪技术,并辅以对应示例。通过阅读本书,读者可为日后的学习打下坚实的基础。
本书适用读者
本书适用于对3D Web开发感兴趣的JavaScript使用者,读者应理解基本的DOM对象模型、jQuery库、AJAX以及JSON等技术,但此类技术并非必需。同时,读者无须具备WebGL知识。此外,本书假设读者了解基本的线代数运算。
本书结构
本书包含了大量的示例,以对所学内容进行多方尝试。另外,本书对于各种信息采取了不同的叙述方式。例如,代码通常描述为"通过某一支持的浏览器打开ch1_Canvas.html文件"。
对应代码结构如下所示。
WebGL Beginner's Guide - Setting up the canvas
canvas {border: 2px dotted blue;}
需要着重强调的代码则采用黑体表示,如下所示。
WebGL Beginner's Guide - Setting up the canvas
canvas {border: 2px dotted blue;}
命令行输入或输出内容则通过下列方式编写。
--allow-file-access-from-files
图标表示较为重要的概念,而图标则表示提示或相关操作技巧。
资源下载
读者可访问http://www.packtpub.com下载本书中的示例代码文件;或者访问http://www. packtpub.com/support,经注册后可直接通过邮件方式获取相关文件。
除此之外,读者还可获取PDF格式文件,文件中包含了本书涉及的截图和图标,这将有助于读者理解不同输出结果之间的差异。读者可访问http://www.packtpub.com/ sites/default/files/downloads/1727_images.pdf下载该文件。
勘误表
尽管我们在最大程度上做到尽善尽美,但错误依然在所难免。如果读者发现谬误之处,无论是文字错误抑或是代码错误,还望不吝赐教。这对于其他读者以及本书的再版工作,将具有十分重要的意义。对此,读者可访问http://www.packtpub.com/support,选取对应书籍,单击errata submission form超链接,并输入相关问题的详细内容。经确认后,填写内容将被提交至网站,或添加至现有勘误表中(位于该书籍的Errata部分)。同时,读者还可访问http://www.packtpub.com/support查看当前勘误表。
版权须知
一直以来,互联网上的版权问题从未间断,Packt Publishing出版社对此类问题异常重视。若读者在互联网上发现本书任意形式的副本,请告知网络地址或网站名称,我们将对此予以处理。
关于盗版问题,读者可发送邮件至copyright@packtpub.com。
对于作者的爱护,我们表示衷心的感谢,并于日后向读者呈现更为精彩的作品。
问题解答
若读者对本书有任何疑问,均可发送邮件至questions@packtpub.com,我们将竭诚为您服务。
本书作者及审校人员
Diego Hernando Cantor Rivera出生于哥伦比亚波哥大,目前是一名软件工程师。Diego于2002年完成了其大学学业,从事计算机视觉系统开发工作,即与计算机交互的视觉跟踪技术,并于2005年获取了计算机工程硕士学位,其专业方向为计算机软件体系结构和医学图像处理技术。期间,作为一名实习生,Diego曾分别参与了法国里昂CREATIS图形处理实验室,以及澳大利亚布里斯班E-Health研发中心的实习工作。目前,Diego正在位于加拿大伦敦的西安大略大学攻读博士学位,并负责神经外科增强现实系统的研发工作。
2010年早期,当WebGL技术首次出现于浏览器时,Brandon Jones即从事该领域的研发工作,Brandon具有8年的Web开发经验,对实时图形学抱有极大的热情,并致力于二者的完美结合。目前,Brandon在摩托罗拉移动公司从事HTML 5研发工作。
Paul Brunt具有10年的Web开发经验,并于初期从事电子商务方面的开发工作。强大的程序设计背景以及扎实的数学知识,使得他在HTML 5产生初期即有机会从事媒体技术方面的开发工作,即基于Web技术的游戏研发。在HTML 5刚出现时,Paul通过JavaScript技术开发游戏以及其他应用程序(SVG扩展应用、canvas以及高速JavaScript引擎开发),其中包括称为Berts Breakdown的、基于概念平台的游戏展示模型。
在计算机技术、Blender以及实时图形学的基础上,WebGL的出现催生了GLGE的发展。2009年,当WebGL尚处于雏形期时,Paul即从事GLGE方面的研发工作,并将目光关注于在线游戏开发。
在离开GLGE后,Paul从事WebGL框架等项目的研发工作。2010年,他将JigLib物理库整合至JavaScript中,并首次在浏览器中展示了2D物理效果。
Dan Ginsburg是Upsample Soft ware、LLC的奠基人,该公司提供了3D图形以及GPU计算技术方面的专业咨询服务。除此之外,Dan还是OpenGL ES 2.0 Programming Guide和OpenGL Programming Guide的联合作者。Dan分别在伍斯特理工学院和本特利大学获得计算机科学理学士和工商管理学硕士学位。
Andor Salga毕业于圣力嘉学院并获得软件学士学位。目前,他在Seneca开源研究实验室(CDOT)担任助理研究员和技术主管,从事WebGL库的开发工作,其中包括Processing. Js、C3DL和XB PointStream,并分别在SIGGRAPH、MIT和Seneca开源学术报告会展示了他的研究成果。
Giles Thomas于7岁时接触了ICL DRS 20,并开始了其编码生涯。自此开始,他的激情从未消退。12岁时,他编写了个人的首个编程语言;14岁时,他开发了首个操作系统。目前,他致力于改进一款名为PythonAnywhere的云计算系统。平时,他的言行多反映于博客上,其博客地址是http://learningwebgl.com/。
致谢
本书的出版得益于以下人员的支持,他们是:我的同事Jose,感谢你的爱和无限的耐心;我的家庭成员Cecy、Fredy和Jonathan;我的良师益友Terry Peters博士和Robert Bartha博士,感谢你们的支持和鼓励;感谢我的朋友兼同事Danielle Pace和Chris Russ,你们的正直、专业以及奉献精神给予了我极大的鼓舞,谢谢你们在本书编写时给予我的极大支持。
感谢我的合作作者Brandon Jones,他的出现使得WebGL世界变得更加精彩。Brandon参与了glMatrix库、第7章以及第10章的编写工作,并为本书的出版付出了辛勤的劳动。
在本书的编写过程中,审校人员功不可没,他们是Dan Ginsburg、Giles Thomas、Andor Salga和Paul Brunt,感谢你们精彩的见解。
感谢辛勤的PACKT团队,以及为本书出版付出劳动的相关人士,他们是Joel Goveya、Wilson D'souza、Maitreya Bhakal、Meeta Rajan、Azharuddin Sheikh、Manasi Poonthott am、Manali Mehta、Manmeet Singh Vasir、Archana Manjrekar和Duane Moraes。
最后,感谢我的妻子Emily,爱犬Cooper,感谢你们给予我极大的耐心;感谢Zach,是你让我变得更加自信。
读者反馈和技术支持
欢迎读者对本书的建议或意见予以反馈,以进一步了解读者的阅读喜好。反馈意见对于我们来说十分重要,以便改进我们日后的工作。
对此,读者可向feedback@packtpub.com发送邮件,并以书名作为邮件标题。
若读者意欲查询出版信息,则可在www.packtpub.com网站的SUGGEST A TITLE表项中填写相关信息,或发送邮件至suggest@packtpub.com。
若读者针对某项技术具有专家级的见解,抑或计划撰写书籍或完善某部著作的出版工作,则可阅读www.packtpub.com/authors中的author guide一栏。
第1章 WebGL概述
1.1 系统需求
1.2 WebGL提供的渲染类型
1.3 WebGL应用程序结构
1.4 HTML 5 canvas的生成方式
1.5 访问WebGL上下文环境
1.6 WebGL状态机
1.7 加载3D场景
1.8 本章小结
第2章 渲染几何体
2.1 顶点和索引
2.2 WebGL渲染管线概述
2.3 在.WebGL中渲染几何体
2.4 将属性关联至VBO
2.5 渲染机制 第1章 WebGL概述
1.1 系统需求
1.2 WebGL提供的渲染类型
1.3 WebGL应用程序结构
1.4 HTML 5 canvas的生成方式
1.5 访问WebGL上下文环境
1.6 WebGL状态机
1.7 加载3D场景
1.8 本章小结
第2章 渲染几何体
2.1 顶点和索引
2.2 WebGL渲染管线概述
2.3 在.WebGL中渲染几何体
2.4 将属性关联至VBO
2.5 渲染机制
2.6 整合过程
2.7 渲染模式
2.8 缓冲区操控
2.9 高级几何体加载技术:JSON和AJAX
2.10 使用AJAX+JSON加载圆锥体对象
2.11 本章小结
第3章 光照
3.1 光照、法线和材质
3.2 在管线中使用光源、法线和材质
3.3 着色方案和光照反射模型
3.4 0penGLES着色语言ESSL
3.5 编写ESSL程序
3.6 返回至WebGL
3.7 位置光源
3.8 本章小结
第4章 相机
4.1 WebGL不存在相机对象
4.2 法线转换
4.3 WebGL实现方式
4.4 模型一视见矩阵
4.5 相机矩阵
4.6 透视矩阵
4.7 WebGL示例结构
4.8 本章小结
第5章 实现方案
5.1 矩阵栈
5.2 3D场景的动画操作
5.3 计时策略
5.4 体系结构更新
5.5 连接矩阵栈和JavaScript计时器
5.6 参数曲线
5.7 优化策略
5.8 插值方案
5.9 本章小结
第6章 颜色、深度测试以及Alpha混合
6.1 在WebGL中使用颜色
6.2 使用对象中的颜色
6.3 使用光照颜色
6.4 体系结构的更新操作
6.5 通过iQuery UI实现互动性
6.6 有向点光源
6.7 使用场景中的颜色值
6.8 深度测试
……
第7章 纹理
第8章 拾取操作
第9章 整合方案
第10章 高级话题