编辑推荐
Web 3D标准先驱人物的WebGL力作!通过学习,你会学到实用的WEBGL开发知识和概念,并实用three.js这一开发引擎进行开发,并通过综合应用,教你实用WEBGL构建一个完整的3D应用。
内容简介
书籍 计算机书籍
WebGL是一项新的Web 3D图形标准,也是HTML5大家庭中的一员。《WebGL入门指南(译者签名本)》从WebGL和3D图形学的基础概念讲起,循序渐进,用多个简单的实例直观地讲解了各个知识点,包括从坐标系统到投影矩阵这些数学基础,也包括从纹理贴图到模型动画这些图形效果;随后又理论结合实际,介绍了在现实开发环境中需要注意的各种问题,例如,如何挑选WebGL框架以及使用哪种3D内容交换格式;在最后一章,作者把全书所有讲过的知识综合到一起,制作了一个完整的WebGL游戏,让读者能够基本了解WebGL这一新技术的开发流程,以便读者可以独立开发自己的WebGL应用。
除此之外,在多个实例中作者还应用了一些非常便捷有效的图形开发技巧,这些脱胎于作者多年图形经验的小技巧可以节省很多工作量,也让初入图形学门槛的读者可以眼前一亮,领会到图形开发的美妙和乐趣。
《WebGL入门指南(译者签名本)》适合Web开发人员阅读,尤其是对3D开发感兴趣的读者。
作译者
Tony Parisi 著名的Web 3D标准的先驱人物,他曾先后创办了数家公司并担任CTO,然后出售其公司。Tony还是VRML和X3D语言的联合创建者,目前VRML和X3D已经成为网络3D图形的ISO标准。
郝稼力 国内最大的WebGL技术社区及资讯站HiWebGL.com的创始人,首次把业界知名度最高的WebGL教程《LearningWebGL》翻译为中文,受到众多WebGL学习者的好评;致力于推动WebGL技术在国内的普及,曾在北京、上海等多地举办WebGL技术宣讲和讨论会。目前正和伙伴走在创业的道路上,运营着国内首个WebGL网站——捞3D网站(Lao3D.com)。
目录
《WebGL入门指南(译者签名本)》
第1章 WebGL简介 1
1.1 WebGL——一个技术定义 2
1.2 3D图形学——入门 4
1.2.1 3D坐标系 4
1.2.2 网格、多边形和顶点 5
1.2.3 材质、纹理和光源 5
1.2.4 变换与矩阵 6
1.2.5 相机、透视、视口和投影 6
1.2.6 着色器 7
1.3 WebGL原生API 8
1.3.1 WebGL应用结构剖析 9
1.3.2 画布元素与绘制上下文 9
1.3.3 视口 10
1.3.4 Buffer、ArrayBuffer和类型化数组 10
1.3.5 矩阵 11
1.3.6 着色器 12
1.3.7 绘制图元 13
1.4 本章小结 14
第2章 你的第一个WebGL程序 15
2.1 Three.js——一个JavaScript 3D引擎 15
2.2 建立Three.js运行环境 17
2.3 一个简单的Three.js网页 17
2.4 一个真实的3D示例 20
2.4.1 为场景着色 23
2.4.2 添加纹理映射 24
2.4.3 旋转物体 25
2.4.4 循环重绘和requestAnimationFrame() 25
2.4.5 让页面贴近生活 26
2.5 本章小结 27
第3章 图形 28
3.1 Sim.js——一个轻量级的WebGL模拟框架 29
3.2 创建网格 30
3.3 使用材质、纹理和光源 34
3.3.1 光源的种类 35
3.3.2 使用多重纹理创建更具真实感的场景 37
3.3.3 纹理与透明 42
3.4 构建变换层级 42
3.5 创建自定义几何体 46
3.6 点和线的渲染 49
3.6.1 使用粒子系统绘制点 50
3.6.2 线的绘制 52
3.7 编写着色器 53
3.7.1 WebGL着色器基础 53
3.7.2 Three.js中的着色器 55
3.8 本章小结 60
第4章 动画 61
4.1 动画基础 61
4.1.1 帧动画 61
4.1.2 时间动画 62
4.1.3 插值与补间动画 62
4.1.4 关键帧 63
4.1.5 关节动画 64
4.1.6 蒙皮动画 64
4.1.7 目标变形动画 64
4.2 使用Tween.js库来创建补间动画 65
4.2.1 创建一个基本的补间动画 66
4.2.2 带缓动效果的补间动画 68
4.3 为带关节的模型制作关键帧动画 71
4.3.1 载入模型 71
4.3.2 为模型制作动画 73
4.4 材质和光源动画 76
4.5 纹理动画 78
4.6 蒙皮动画和变形动画 80
4.7 本章小结 80
第5章 交互 81
5.1 点击检测、拾取和投影 81
Three.js中的点击检测 82
5.2 处理鼠标移入和点击 85
5.3 处理拖曳 88
在拖曳中使用补间动画 91
5.4 使用点击点和法线信息 91
5.5 基于相机的交互 92
5.5.1 利用镜头控制制作一个模型浏览器 93
5.5.2 场景漫游 95
5.6 本章小结 96
第6章 2D与3D的整合 98
6.1 整合动态HTML和WebGL 99
6.1.1 创建DIV元素弹出层 99
6.1.2 利用2D屏幕坐标为3D物体添加注释 103
6.1.3 为3D场景添加背景图片 104
6.2 在2D页面上插入3D浮层 105
6.3 利用2D Canvas创建动态纹理 107
6.4 使用视频作为纹理 115
6.5 渲染动态3D文字 119
6.6 WebGL中的终极整合 121
6.7 本章小结 123
第7章 实战WebGL 124
7.1 如何选择运行库和框架 124
7.2 载入3D内容 126
7.2.1 COLLADA:数字资产交换格式 126
7.2.2 Three.js中的JSON模型文件格式 130
7.2.3 Three.js二进制模型文件格式 134
7.2.4 压缩3D模型 135
7.2.5 Three.js中的JSON场景文件格式 136
7.3 创建3D内容 137
7.3.1 从Blender中导出3D内容 137
7.3.2 把OBJ文件转换为Three.js JSON文件 139
7.3.3 把OBJ文件转换为Three.js二进制文件 139
7.3.4 其他软件或格式的转换 139
7.4 浏览器支持度 140
7.4.1 检测浏览器的WebGL支持 141
7.4.2 在Safari中开启WebGL支持 142
7.5 处理丢失上下文事件 143
7.6 WebGL的安全性 146
7.7 本章小结 149
第8章 你的第一个WebGL游戏 150
8.1 构建游戏的各个部分 151
8.1.1 相机、角色和控制 152
8.1.2 美术设计 159
8.1.3 模型预览器 161
8.1.4 创建粒子系统 163
8.1.5 添加声音 166
8.2 万物归一 167
8.3 本章小结 180
后记 181
附录A WebGL在线资源 183
译者序
自从互联网诞生以来,如何让网页变得更绚丽、更美观一直是人们在不断追求的目标。为了达到这个目的,我们发明了HTML标记语言来确定网页的结构,发明了CSS层叠式样式表来规范网页的外观,发明了JavaScript来实现各种特效,发明了Flash等插件来嵌入视频和动画效果。但是直到WebGL技术的出现,人仃,才得以从计算机图形学这一学术根基上解决了这一问题。由于直接和GPU交互,如果愿意的话,设计师可以用 WebGL精确控制网页中的每一个像素。这是之前所有的技术都无法企及的高度。 WebGL技术诞生的年代正是Web 2.0时代的后期,人们正在急切地寻找下一代互联网应当前进的方向。HTML5被业界认为是合理的答案之一。使用了Canvas的WebGL正好贴合HTML5,成为了这个大家庭中的一分子。与传统的前端技术以及HTML5中其他技术成员不同的是,WebGL是被设计成直接工作在显卡(GPU)端的,所以它比目前其他的典型的Web技术都要更加复杂。总的来说,WebGL的原生API是相当的低等级的。但这也正是它为什么能够如此迅速地完成大量的计算,并实现复杂的实时3D渲染的原因。另外,由于WebGL师承openGLES,而OpenGLES又脱胎自OpenGL,这一切都离不开计算机图形学,而这门科学对于之前所有的前端工程师来说,都是很少染指的。于是WebGL的教学和普及陷入了一个两难境地,图形工程师不懂前端,而前端工程师更不懂图形。从这个角度上说,本书很好地解决了这个问题。作者用简单易懂的语言介绍了图形学的基本概念,同时又兼顾Web开发中的疑点和难点,无论读者之前专注于哪个领域,都能够很好地入门WebGL开发。另外,本书最后一章也是全书最大的亮点之一,在这一部分作者综合全书的知识点,一步一步陪着读者搭建了一个完整的 WebGL游戏。为读者之后独立搭建自己的WebGL应用奠定了基础。这对于目前WebGL实验性示例频出但完整应用依然匮乏的局面来说,有显著的推动意义。本书中文版翻译之时,发生了两件事。一是GoogleChrome浏览器移除了WebGL上下文关键字中的“实验性”描述,二是微软IntemetExplorerll被发现开始支持WcbGL。前者标志着WebGL已经离开实验阶段,正式扬帆起航;后者或许意味着WebGL难得地作为一项前沿先锋技术即将实现所有浏览器厂商的大一统局面。也许未来,WebGL会像今天的CSS一样普遍,真真切切地改变着互联网的外观,改变我们的生活!
序言
1996年夏天,我曾在SiliconGraphic公司的CosmoSoftware部门做暑期实习生,这家公司正在开发用于Web浏览器中的VRML(VirtualRealityMarkupLanguage)播放器。 VRML第一次将交互式的3D图形带人万维网中。当时的Web还很稚嫩,在如此早期的时候,能在浏览器中看到整合的3D体验还是相当令人激动的。遗憾的是,VRML并没有获得原本想象中的那么多的支持和使用。从纯技术角度讲,有两个原因:首先,VRML的可编程性受到性能孱弱的脚本语言虚拟机的限制,也就是说,人们不可能编写出用于整个3D场景的通用代码,这也就从根本上限制了VRML的应用领域;其次,VRML的渲染模型是基于原始的OpenGLAPI的固化图形管线的。这意味着除了内置于系统中的视觉效果之外,人们无法添加新的自定义效果。在随后的16年中,图形技术和编程语言获得了翻天覆地的发展。3D图形管线也变成厂完全可编程的,这意味着美术人员和设计师可以凭借他们的想象力创造出无穷的光影着色效果。另外,JavaScript的虚拟机的性能也得到了巨大提升,流畅地改变3D场景的外观成为可能,甚至可以完全改变三角形的每个顶点。这样的灵活性第一次让在浏览器中自由地编写3D应用成为可能。随着近几年来OpenGLES 2.0APl的发展,计算机图形学的研发工作达到了顶峰; WebGLAPl正是基于OpenGLES 2.0API的。后者是一个轻量级的纯基于着色器的图形库,广泛应用于目前几乎所有的新的智能手机和移动设备。WebGL工作组和开发社区希望将3D图形处理器的威力以健壮和安全的方式释放到Web上,掀起新的激动人心的3DWeb应用的浪潮,覆盖每一种操作系统和每——种计算设备。 Tony的这本书通俗易懂,涵盖了在Web上开发3D应用的大部分实用知识。这本书既能帮助初学者快速人门,也包含了·相当多的高级开发技巧,这部分信息即使对于资深的3D图形专家来说,也会眼前一亮。Tony从显示基本的3D网格开始,不断介绍一些很有趣的内容,如视觉效果、动画、交互、创作3D内容等,这些内容组合在一起形成了一个3D游戏的原型。这本书非常好看,我非常喜欢,希望你也同样喜欢。
———Ken Russell
科纳斯组织(mhroBosGroup)WebGL工作组主席
媒体评论
“这是一本理想的Web 3D编程的入门教材。此书写作上乘,清晰明了,且诙谐有趣。我真希望当年我开始学习WebGL的时候有这样一本好书。”
——Giles Thomas
LearningWebGL.com创始人
“如果你是一位对3D感兴趣的Web开发者,或者是对Web开发感兴趣的3D开发者,我推荐本书作为您的必备伴侣。”
——Raffaele Cecco
视频游戏开发者、Web开发者、Supercharged JavaScript Graphic一书作者