HTML5与WebGL编程

出版者:人民邮电出版社

作者:[美] Tony Parisi

页数:328

译者:潘 征

出版时间:2016-5

价格:元

装帧:平装

isbn号码:9787115421333

丛书系列:图灵程序设计丛书·Web开发系列

具体描述

本书介绍如何使用HTML5相关技术，如CSS3和新兴的Web图形标准WebGL，来创建具有高性能、震撼视觉效果的3D Web应用。书中内容分为两部分——基础知识和应用开发技术，不但提供了全面的理论介绍，还包括从简单3D产品可视化到沉浸式游戏及交互训练系统的实践，适合转向3D开发的Web开发人员阅读。

作者简介

作者简介：

Tony Parisi

Web 3D标准的先驱、企业家、CTO、架构师。VRML和X3D语言的联合作者，这两者已经成为Web 3D图形的ISO标准。另著有《WebGL入门指南》。

译者简介：

潘征

网名此方，目前就职于百度FEX前端研发团队，专注前端复杂应用研发，http://h5.baidu.com平台研发团队核心成员之一。

目录信息

前言　　xi
第一部分　基础知识
第1章　绪论　　2
1.1　HTML5：新型的视觉媒介　　4
1.1.1　浏览器平台　　4
1.1.2　浏览器支持情况　　6
1.2　3D图形的基础知识　　6
1.2.1　什么是3D　　6
1.2.2　3D坐标系　　7
1.2.3　网格、多边形与顶点　　8
1.2.4　材质、纹理与光源　　9
1.2.5　变换与矩阵　　9
1.2.6　相机、透视、视口与投影　　10
1.2.7　着色器　　11
第2章　WebGL：实时3D渲染　　13
2.1　WebGL基础　　14
2.2　WebGL API　　15
2.3　WebGL应用剖析　　16
2.4　一个简单的WebGL 示例　　16
2.4.1　Canvas元素和WebGL绘图上下文　　17
2.4.2　视口　　18
2.4.3　缓冲、缓冲数组和类型化数组　　18
2.4.4　矩阵　　19
2.4.5　着色器　　20
2.4.6　绘制图元　　22
2.5　创建3D 几何体　　23
2.6　添加动画　　27
2.7　使用纹理映射　　28
2.8　小结　　34
第3章　Three.js——一款JavaScript 3D引擎　　35
3.1　使用Three.js创建的代表性项目　　35
3.2　Three.js概览　　38
3.2.1　初始化Three.js　　40
3.2.2　Three.js工程结构　　40
3.3　一个简单的Three.js程序　　41
3.3.1　创建渲染器　　43
3.3.2　创建场景　　43
3.3.3　运行循环的实现　　45
3.3.4　为场景添加光照　　46
3.4　小结　　48
第4章　Three.js中的图形和渲染　　49
4.1　几何图形和网格　　49
4.1.1　预置的几何形状类型　　49
4.1.2　路径、形状和挤出　　50
4.1.3　几何形状基础类　　52
4.1.4　用于优化网格渲染的BufferGeometry　　55
4.1.5　从建模软件包中导入网格数据　　56
4.2　场景图和空间变换的层级结构　　57
4.2.1　利用场景图来管理复杂场景　　57
4.2.2　Three.js中的场景图　　57
4.2.3　平移、旋转和缩放的表示　　61
4.3　材质　　61
4.3.1　标准网格材质　　61
4.3.2　使用多重纹理增添逼真效果　　63
4.4　光源　　67
4.5　阴影　　69
4.6　着色器　　73
4.6.1　ShaderMaterial类：编写你自己的着色器代码　　74
4.6.2　在Three.js中使用GLSL着色器代码　　75
4.7　渲染　　78
4.7.1　后处理和多道渲染　　79
4.7.2　延迟渲染　　80
4.8　小结　　80
第5章　3D动画　　81
5.1　使用requestAnimationFrame()来驱动动画　　82
5.1.1　在你的应用中使用requestAnimationFrame()　　83
5.1.2　requestAnimationFrame()和性能　　84
5.1.3　基于帧的动画和基于时间的动画　　85
5.2　使用程序更新属性的方式来构建动画　　85
5.3　使用补间来进行动画过渡　　87
5.3.1　插值　　87
5.3.2　Tween.js库　　88
5.3.3　缓动　　90
5.4　使用关键帧来实现复杂动画　　91
5.4.1　Keyframe.js——一个简单的帧动画通用库　　92
5.4.2　使用关键帧创建关节动画　　94
5.5　使用曲线和路径创建平滑自然的运动　　96
5.6　使用变形目标来创建人物和面部动画　　99
5.7　使用蒙皮来构建角色动画　　100
5.8　使用着色器来进行动画　　104
5.9　小结　　109
第6章　CSS3：高级页面效果　　110
6.1　CSS变换　　112
6.1.1　使用3D变换　　113
6.1.2　添加透视　　115
6.1.3　创建变换层级　　117
6.1.4　控制背面渲染　　119
6.1.5　CSS变换属性汇总　　122
6.2　CSS过渡　　122
6.3　CSS动画　　127
6.4　挑战CSS的极限　　130
6.4.1　渲染3D物体　　130
6.4.2　渲染3D环境　　132
6.4.3　使用CSS自定义滤镜来实现高级着色器效果　　134
6.4.4　用Three.js来渲染CSS 3D　　135
6.5　小结　　135
第7章　Canvas：通用2D绘图　　137
7.1　Canvas基础　　137
7.1.1　Canvas元素和2D绘图上下文　　138
7.1.2　Canvas API的功能　　139
7.2　使用Canvas API来渲染3D　　144
7.3　基于Canvas渲染的3D 库　　147
7.3.1　K3D　　147
7.3.2　Three.js的Canvas渲染　　148
7.4　小结　　153
第二部分　应用开发技术
第8章　3D内容制作流程　　156
8.1　3D内容创建过程　　156
8.1.1　建模　　157
8.1.2　纹理映射　　157
8.1.3　动画　　158
8.1.4　技术美工　　159
8.2　3D建模和动画工具　　160
8.2.1　传统3D软件　　160
8.2.2　基于浏览器的集成环境　　164
8.2.3　3D内容仓库和现成素材　　167
8.3　3D文件格式　　168
8.3.1　模型格式　　168
8.3.2　动画格式　　170
8.3.3　全功能的场景格式　　171
8.4　加载3D内容到WebGL应用中　　178
8.4.1　Three.js JSON格式　　179
8.4.2　Three.js的二进制格式　　184
8.4.3　使用Three.js来加载COLLADA场景　　185
8.4.4　使用Three.js来加载gITF场景　　188
8.5　小结　　189
第9章　3D引擎和框架　　190
9.1　3D框架概念　　191
9.1.1　什么是框架　　191
9.1.2　WebGL框架需求　　192
9.2　WebGL框架概况　　194
9.2.1　游戏引擎　　194
9.2.2　展示框架　　196
9.3　Vizi：一个基于组件的用于可视化Web 应用的框架　　198
9.3.1　背景和设计理念　　199
9.3.2　Vizi架构　　200
9.3.3　Vizi入门　　201
9.3.4　一个Vizi应用示例　　202
9.4　小结　　207
第10章　开发一个简单的3D应用　　209
10.1　设计应用　　211
10.2　创建3D内容　　212
10.2.1　导出Maya场景到COLLADA　　213
10.2.2　将COLLADA文件转换glTF格式　　214
10.3　预览和测试3D内容　　214
10.3.1　基于Vizi的预览工具　　214
10.3.2　Vizi查看器类　　216
10.3.3　Vizi加载类　　217
10.4　将3D 集成到应用中　　220
10.5　开发3D行为和交互　　223
10.5.1　Vizi场景图API方法：findNode()和map()　　223
10.5.2　使用Vizi.FadeBehavior来动画透明度　　225
10.5.3　使用Vizi.RotateBehavior来自动旋转内容　　227
10.5.4　使用Vizi.Picker来实现鼠标悬停时显示信息　　227
10.5.5　使用用户界面来控制动画　　229
10.5.6　使用颜色选择器来改变颜色　　230
10.6　小结　　232
第11章　开发一个3D环境　　233
11.1　创建环境素材　　235
11.2　预览和测试环境　　236
11.2.1　以第一人称模式预览场景　　237
11.2.2　检查场景图　　237
11.2.3　检查对象属性　　240
11.2.4　显示边界框　　242
11.2.5　预览多个对象　　244
11.2.6　使用预览工具来查找场景中的其他问题　　246
11.3　使用skybox创建一个3D背景　　247
11.3.1　3D skybox　　247
11.3.2　Vizi skybox对象　　248
11.4　集成3D 内容到应用中　　250
11.4.1　加载和初始化场景　　250
11.4.2　加载和初始化车模型　　253
11.5　实现第一人称导航　　255
11.5.1　相机控制器　　256
11.5.2　第一人称控制器中的数学　　257
11.5.3　鼠标视角　　258
11.5.4　简单碰撞检测　　259
11.6　使用多个相机　　260
11.7　创建定时的动画过渡　　262
11.8　对象行为脚本　　263
11.8.1　基于Vizi.Script实现自定义组件　　264
11.8.2　驾驶车的控制器脚本　　264
11.9　给环境添加声音　　270
11.10　渲染动态纹理　　272
11.11　小结　　276
第12章　开发移动3D应用　　278
12.1　移动3D平台　　278
12.2　为移动浏览器开发　　280
12.2.1　增加触摸支持　　281
12.2.2　在桌面版Chrome上调试移动功能　　285
12.3　创建Web应用　　287
12.3.1　Web应用开发和测试工具　　287
12.3.2　打包成Web应用来发布　　288
12.4　开发原生/HTML5混合应用　　289
12.4.1　CocoonJS：一种为移动设备构建HTML游戏及应用的技术　　290
12.4.2　使用CocoonJS组装应用　　292
12.4.3　WebGL混合开发：问题　　298
12.5　移动3D性能　　298
12.6　小结　　300
附录　资源　　301
作者介绍　　311
封面介绍　　311
· · · · · · (收起)

用户评价

拿到这本书，最先吸引我的是它厚实的体积，这通常意味着内容非常丰富，能够提供一个全面的视角。书名直指HTML5和WebGL，这两个技术组合在一起，几乎就构成了现代Web端3D图形和富媒体应用的核心。我一直觉得，HTML5已经远远超出了简单的网页结构标记，它融合了Canvas、SVG、Video、Audio等一系列强大的API，为前端开发带来了无限可能，尤其是在图形和多媒体领域。而WebGL，作为浏览器中的3D图形标准，更是将Web的视觉表现力提升到了一个新的高度。我迫切希望这本书能够系统地讲解如何将HTML5的各项特性与WebGL结合起来，创造出令人惊叹的视觉效果。想象一下，在网页中实现流畅的3D场景切换，或者开发出具有高度交互性的3D产品展示，甚至是一个完整的、能在浏览器中运行的3D游戏，这些都让我充满期待。我尤其关注书中是否会深入讲解WebGL的渲染管线、着色器编程，以及如何优化性能，因为这些是实现复杂3D效果的关键。一个好的教程，应该能帮助我理解背后的原理，而不是仅仅停留在API的调用层面。我希望能看到书中提供清晰的代码示例，并且这些示例是经过精心设计，能够体现出HTML5和WebGL的最佳实践。

这本书的书脊设计简洁明了，封面上的标题“HTML5与WebGL编程”也十分直观。作为一名对Web前端技术有一定了解的开发者，我对HTML5的最新进展以及WebGL在构建动态、交互式3D内容方面的潜力一直抱有浓厚的兴趣。我知道WebGL是基于OpenGL ES的，这意味着它拥有强大的图形处理能力，能够直接利用GPU，在浏览器中实现高性能的3D渲染。但是，WebGL的API相对复杂，而且需要配合HTML5的Canvas元素来使用，这其中涉及到不少细节和技巧。我特别希望这本书能够提供一个清晰的学习路径，从HTML5的基础知识开始，逐步过渡到WebGL的核心概念，例如顶点缓冲、纹理映射、着色器语言（GLSL）等。我更希望书中能够包含一些实际的项目案例，例如如何构建一个简单的3D场景编辑器，或者一个能够播放3D动画的播放器。这些案例不仅能帮助我理解技术细节，更能让我体会到HTML5与WebGL结合的强大之处。对于性能优化方面的讲解，我也是非常期待的，因为在浏览器环境中，性能往往是制约3D应用发挥的关键因素。

从书脊上就能感受到这本书的厚重感，这通常意味着内容非常详实，能够深入地探讨其技术主题。书名“HTML5与WebGL编程”精准地捕捉到了Web开发的前沿动态，HTML5不断丰富的功能为开发者提供了更广阔的创作空间，而WebGL则为浏览器注入了强大的3D图形处理能力。我一直对如何用Web技术创造出令人惊叹的视觉奇观抱有强烈的愿望，比如那些在网页中流畅展现的3D动画、交互式数据可视化，甚至是可以玩的小型3D游戏。我期待这本书能够带领我全面理解HTML5的最新标准，并在此基础上，深入到WebGL的世界。这其中，我希望能够学到关于WebGL着色器语言（GLSL）的编写，以及如何有效地管理图形资源，比如几何体、纹理和材质。同时，我也非常希望书中能够提供一些实用的开发技巧和项目案例，让我能够学以致用，亲手打造出自己的3D Web应用。如果书中还能涉及到一些WebVR/WebAR相关的技术，那将是锦上添花。

翻开这本书，首先映入眼帘的是其排版风格，清晰的段落划分和适中的行间距，都预示着这是一本阅读体验良好的技术书籍。书名“HTML5与WebGL编程”准确地概括了其核心内容，这两个技术组合在一起，无疑是在Web端构建沉浸式、高性能3D体验的基石。我一直认为，HTML5不仅仅是网页的骨架，它还包含了强大的媒体处理能力和交互API，而WebGL则是在此基础上，将3D图形的渲染能力带入了浏览器。我期待这本书能够深入浅出地讲解如何将HTML5的各项特性（如Canvas、DOM操作、事件处理等）与WebGL的3D渲染管线有机结合。我尤其关注书中对于WebGL底层原理的阐述，比如着色器的编写、矩阵变换、光照模型等，这些都是构建逼真3D世界的关键。另外，我希望能看到书中提供一些富有创意和实际应用价值的示例，例如如何制作一个可以在线展示3D模型的网站，或者一个基于WebGL的简单游戏。如果书中还能包含一些跨浏览器兼容性的探讨，以及性能优化的建议，那将是对我非常有价值的补充。

书的整体风格，从封面设计到书名，都传递出一种专业且现代的气息。我对HTML5和WebGL这两个领域一直抱有浓厚的学习兴趣。HTML5的强大之处在于其多媒体支持和API的丰富性，它让Web应用的功能边界不断拓展。而WebGL，作为浏览器端的3D图形标准，更是将Web的视觉表现力推向了新的高度。我非常期待这本书能够系统地梳理HTML5与WebGL结合的开发流程，从最基础的WebGL API讲解，到如何与HTML5的Canvas元素无缝对接，再到如何利用HTML5的其他特性（如Web Workers、Web Audio等）来增强WebGL应用的体验。我希望书中能包含一些实际的开发案例，比如如何创建一个可以在网页上自由旋转的3D模型展示，或者如何实现一个简单的3D场景编辑器。如果书中还能涉及一些3D图形学的基本原理，以及如何进行性能优化，那将是非常宝贵的。毕竟，在Web环境中，性能永远是需要关注的重点。我期待这本书能让我真正掌握利用这两个技术构建强大、富有表现力的Web应用的能力。

这本《HTML5与WebGL编程》的书籍封面设计相当别致，图案的风格让我想象到一些艺术家的3D数字雕塑作品。书名本身就暗示了一个技术交汇的领域，HTML5作为前端开发的基石，其不断演进的功能为Web应用提供了更强大的支撑，而WebGL则为在浏览器中实现高质量的3D图形渲染打开了新的大门。我一直对如何利用Web技术创造出令人惊艳的视觉效果感到着迷，特别是那些能够在浏览器中流畅运行的3D交互应用。我希望这本书能够详尽地介绍HTML5的各种高级特性，并在此基础上，深入讲解WebGL的编程模型。这包括如何设置WebGL上下文、管理缓冲区、编写着色器程序，以及如何将3D模型和纹理加载到场景中。更重要的是，我希望书中能够提供一些实际的项目案例，这些案例最好能覆盖不同类型的应用，例如3D数据可视化、交互式产品展示，甚至是一个简单的网页版3D游戏。能够学到如何优化WebGL应用的性能，处理复杂的场景渲染，以及如何在不同的设备和浏览器上保证良好的兼容性，也是我非常期待的内容。

这本书的装帧设计给人一种扎实可靠的感觉，书名“HTML5与WebGL编程”非常明确地指出了其内容核心，这两个技术组合在一起，正代表着Web前端图形和交互能力的巅峰。我一直以来都对能够用浏览器技术创造出令人惊叹的3D视觉效果感到着迷，从动态的2D图形到逼真的3D场景，HTML5提供了坚实的基础，而WebGL则赋予了强大的3D渲染能力。我非常期待这本书能够成为我学习这两项技术的重要指引，能够系统地讲解如何将HTML5的强大功能与WebGL的3D渲染能力完美结合。我希望书中能够深入探讨WebGL的底层机制，包括如何使用着色器语言（GLSL）来控制GPU的渲染过程，如何管理顶点数据和纹理，以及如何实现复杂的3D效果，如光照、阴影和后期处理。同时，我也期待书中能够提供一些完整的项目示例，例如如何构建一个简单的3D游戏引擎，或者开发一个交互式的3D数据可视化平台。学习如何优化WebGL应用的性能，以及如何在不同的设备和浏览器上实现平滑的用户体验，也是我非常关注的重点。

这本书的封面设计风格简洁而现代，给人一种专业且充满科技感的感觉。书名“HTML5与WebGL编程”直接点出了核心技术，这两者结合起来，无疑是构建现代Web端沉浸式体验和高性能3D图形的关键。我一直对如何在浏览器中实现逼真的3D渲染充满好奇，并希望能够掌握相关的编程技术。我期待这本书能够提供一个清晰的学习脉络，从HTML5的基础概念出发，深入讲解Canvas API在图形绘制中的应用，然后再逐步引导读者进入WebGL的世界。我希望书中能够详细解释WebGL的核心概念，例如渲染上下文、着色器、缓冲区、纹理和矩阵变换等，并提供相应的代码示例。更重要的是，我希望能看到书中包含一些实际的项目案例，例如如何制作一个交互式的3D地图，或者一个可以在线展示3D模型的应用。能够学到如何优化WebGL应用的性能，并处理好跨浏览器兼容性问题，也是我非常看重的方面。

这本书的版式设计给我的第一印象是严谨而清晰，字体选择恰当，段落过渡自然。书名“HTML5与WebGL编程”直接点明了技术方向，这正是当前Web开发中最具挑战性和吸引力的领域之一。HTML5在多媒体、图形和交互方面的进步，为Web应用提供了前所未有的可能性，而WebGL则让这一切在3D层面得以实现。我一直渴望能够深入理解如何在浏览器中构建复杂、高性能的3D图形应用，而这本书正是我寻找的指南。我希望书中能够详细讲解WebGL的渲染管线，包括顶点处理、片段处理、纹理映射、光照计算等核心概念。同时，我也期待书中能够提供关于如何利用HTML5提供的各种API（如Canvas API、Fetch API、WebSockets等）来支持和增强WebGL应用。一个优秀的教程，不应该只是API的堆砌，更应该包含实际的项目实践，例如如何构建一个交互式的3D城市模型，或者开发一个可以在线玩的小型3D游戏。我尤其看重书中是否能提供关于性能优化的详细指导，因为在浏览器环境中，性能是决定用户体验的关键。

这本书的封面设计就足够吸引眼球，色彩搭配和谐，字体也恰到好处，一看就是精心打磨过的作品。封面上“HTML5与WebGL编程”几个字，让我立刻联想到那些在浏览器中呈现的炫酷3D动画和交互式应用，仿佛看到了无数可能性在眼前展开。我一直对用网页技术构建沉浸式体验充满好奇，尤其是WebGL，它能直接调用GPU进行图形渲染，这意味着我们能创造出前所未有的视觉效果。但WebGL的API和概念相对底层，需要扎实的基础知识才能驾驭，而HTML5作为基础，其强大之处也常常被我们忽视。我期待这本书能像一位经验丰富的向导，带领我一步步深入HTML5的最新特性，理解其在现代Web开发中的核心地位，然后再将我引入WebGL的世界。我希望书中不仅仅是技术的堆砌，更能包含一些实际的项目案例，让我能亲手实践，将理论知识转化为看得见摸得着的成果。例如，能否通过这本书学会如何构建一个简单的3D模型展示平台，或者一个可以进行交互的3D游戏原型？这些都是我非常感兴趣的方向。而且，编程学习最怕枯燥，如果书中能穿插一些有趣的讲解和比喻，甚至是一些开发者的小故事，我想我的学习过程一定会更加愉快和高效。我最看重的是学习过程的连贯性和深入性，希望它能从最基础的概念讲起，循序渐进，逐步深入到高级主题，而不是跳跃式地呈现知识点。

这本书不是详细教程那种，更像是总体介绍。而且这个书名也不太合适，里面其实讲Three.js更多一些。对相关的基础概念讲解还是很不错的！

这本书不是详细教程那种，更像是总体介绍。而且这个书名也不太合适，里面其实讲Three.js更多一些。对相关的基础概念讲解还是很不错的！

这本书不是详细教程那种，更像是总体介绍。而且这个书名也不太合适，里面其实讲Three.js更多一些。对相关的基础概念讲解还是很不错的！

这本书不是详细教程那种，更像是总体介绍。而且这个书名也不太合适，里面其实讲Three.js更多一些。对相关的基础概念讲解还是很不错的！

这本书不是详细教程那种，更像是总体介绍。而且这个书名也不太合适，里面其实讲Three.js更多一些。对相关的基础概念讲解还是很不错的！