Programming 3D Applications with HTML5 and WebGL cover

Programming 3D Applications with HTML5 and WebGL

No rating yet
Word count
487K words
Chapters
40
Series
Turing Programming Series
ISBN
9787115421333

Tags

Summary

This book is by Tony Parisi, an American pioneer of Web 3D and co-author of the VRML and X3D languages. The Chinese edition was published by Posts & Telecom Press in 2016 as part of the Turing Programming Series, translated by Pan Zheng, formerly of Baidu's FEX front-end team. Aimed at developers with a foundation in JavaScript and HTML, it systematically explains how to build 3D applications in the browser using the HTML5 technology stack, covering both desktop and mobile scenarios. The book has two parts. Part I, "Foundations," begins with HTML5 as a new visual medium and introduces the browser platform and the state of compatibility, the basic concepts of 3D graphics (coordinate systems, meshes and polygons, materials, textures and lights, transformations and matrices, cameras and projection, shaders), and then goes deep into WebGL's real-time rendering mechanism: the drawing context, the viewport, buffers and typed arrays, writing shaders and drawing primitives, working through a complete simple WebGL example. It then introduces the JavaScript 3D engine Three.js, covering project structure, renderer, scene, run loop, and lighting, and extends to geometries and meshes, scene graphs and transformation hierarchies, materials and textures, lights and shadows, custom shaders, and post-processing. It also discusses animation driven by requestAnimationFrame, tweening and keyframes, CSS3 3D transforms and filters, Canvas 2D drawing, and the Canvas renderer. Part II, "Application Development," turns to practice: the 3D content production pipeline and modeling and animation tools, game engines and frameworks (including the author's own Vizi framework), and case studies such as a 3D product browser, a game, and an interactive training system that demonstrate complex multi-object scenes and interaction, closing with a dedicated analysis of performance and adaptation issues for WebGL applications on mobile browsers. At 311 pages and about 487,000 characters, the book balances theory and practice and suits intermediate and advanced web developers and browser game developers seeking a systematic grounding in web 3D technology.

Editor's review

Web 上做 3D,最容易踩的坑不是“不会写 GLSL”,而是“不知道 HTML5 这一整套技术栈各自该管哪一段”。这本书的价值正体现在把这条链路打通:Canvas 拿绘图上下文,WebGL 负责实时渲染,Three.js 提供场景图与材质体系,CSS3 兜底 UI 与轻量 3D 效果,最后用 Tween.js、Keyframe.js 之类的小工具把动画串起来。作者 Tony Parisi 是 VRML 与 X3D 的联合作者,这两者已成为 Web 3D 图形的 ISO 标准,他对“Web 3D 该长成什么样”有第一手判断,行文不像很多图形学教材那样一头扎进矩阵推导,而是始终围绕“浏览器里能跑起来的东西”。 结构上也体贴:第一部分打地基,从 3D 概念到 WebGL 最小示例再到 Three.js 的几何体、材质、灯光、阴影、自定义着色器与后期处理,每一步都有可运行的代码;第二部分直接上案例,3D 内容管线的讲解尤其少见——很多人会写渲染循环,却不知道模型从建模软件导出来之后要走哪些工序。最后一章专讲移动端 WebGL,涉及性能与适配,这在当年相当超前。 需要提醒的是,本书原版出版于 2014 年,中文版 2016 年引进,示例基于当年的 Three.js 版本与老式 API,今天照抄代码大概率要改。但渲染管线、场景图、材质与贴图、动画驱动方式这些底层认知并不过时,把它当作“Web 3D 的体系入门 + Three.js 概念地图”来读,性价比仍然很高。译者潘征出身百度 FEX 前端团队,术语处理稳妥,读起来不别扭。

Who it's for

A good fit for

  • 有两三年 JavaScript 与 HTML 经验、想转向网页 3D 开发的前端工程师
  • 做页游或 Web 互动项目,需要评估 Three.js、Canvas、CSS3 技术选型的开发者
  • 计算机相关专业学生,想通过可运行示例理解 3D 渲染管线与着色器
  • 需要为产品展示、在线培训等场景搭建 3D 交互应用的技术负责人

Not a good fit for

  • 完全没有 JavaScript 基础的编程零起点读者
  • 想查找最新 Three.js 版本 API 或 WebGPU 内容的读者,本书版本已明显陈旧
  • 只需做 2D 页面排版与样式、不涉及图形渲染的从业者

Reading tips

  1. 先读第 1 章的 3D 图形基础概念,矩阵与相机部分不必一次学透,留到第 2 章示例中回看。
  2. 务必动手跑通第 2 章的 WebGL 最小示例,理解缓冲区、着色器与绘制图元三步流程,再看 Three.js 会轻松很多。
  3. 读第 3 至 5 章时,边读边把示例迁移到当前版本的 Three.js 上,遇到 API 差异就查官方文档,这本身就是很好的练习。
  4. 第 8 至 12 章的应用开发部分可以不按顺序读,挑与自己项目最接近的案例(产品浏览器、游戏或培训系统)优先实践。

About the publisher

Posts & Telecom Press China · Founded in 1953

Posts & Telecom Press is known for its strengths in science and technology, computing, and information and communications titles, and has extended its publishing into photography, art, software learning, and inspirational growth, giving it a fairly diverse range. Its catalog includes computing and communications works such as Refactoring and Patterns (Revised Edition) and Huawei Switch Learning Guide (Second Edition), alongside bilingual collector's editions such as The Little Prince (Chinese-English-French illustrated collector's edition), The Great Gatsby, and Three Days to See. Beijing Ten Years: 1980-1990 and Ghost Blade: WLOP Personal Illustration Collection reflect its presence in photography and art. Its authors include Antoine de Saint-Exupéry, Helen Keller, Joshua Kerievsky, Wang Da, Zhang Zhaozeng, and WLOP.

Contents

  1. Preface
  2. Part I Foundations
  3. Chapter 1 Introduction
  4. 1.1 HTML5: A New Visual Medium
  5. 1.1.1 The Browser Platform
  6. 1.1.2 Browser Support
  7. 1.2 Basic Concepts of 3D Graphics
  8. 1.2.1 What Is 3D
  9. 1.2.2 3D Coordinate Systems
  10. 1.2.3 Meshes, Polygons, and Vertices
  11. 1.2.4 Materials, Textures, and Lights
  12. 1.2.5 Transformations and Matrices
  13. 1.2.6 Cameras, Perspective, Viewports, and Projection
  14. 1.2.7 Shaders
  15. Chapter 2 WebGL: Real-Time 3D Rendering
  16. 2.1 WebGL Basics
  17. 2.2 The WebGL API
  18. 2.3 Anatomy of a WebGL Application
  19. 2.4 A Simple WebGL Example
  20. 2.4.1 The Canvas Element and the WebGL Drawing Context
  21. 2.4.2 The Viewport
  22. 2.4.3 Buffers, Buffer Arrays, and Typed Arrays
  23. 2.4.4 Matrices
  24. 2.4.5 Shaders
  25. 2.4.6 Drawing Primitives
  26. 2.5 Creating 3D Geometry
  27. 2.6 Adding Animation
  28. 2.7 Using Texture Mapping
  29. 2.8 Summary
  30. Chapter 3 Three.js: A JavaScript 3D Engine
  31. 3.1 Notable Projects Built with Three.js
  32. 3.2 Three.js at a Glance
  33. 3.2.1 Initializing Three.js
  34. 3.2.2 Three.js Project Structure
  35. 3.3 A Simple Three.js Program
  36. 3.3.1 Creating the Renderer
  37. 3.3.2 Creating the Scene
  38. 3.3.3 Implementing the Run Loop
  39. 3.3.4 Adding Lighting to the Scene
  40. 3.4 Summary

FAQ

这本书的原版是哪一本,中文版是完整翻译吗?
原版是 Tony Parisi 所著、O'Reilly 于 2014 年出版的《Programming 3D Applications with HTML5 and WebGL》。中文版由潘征翻译,人民邮电出版社 2016 年出版,属“图灵程序设计丛书”,全书 311 页、约 48.7 万字,两部分共 12 章,内容对应完整。
书里的代码今天还能直接运行吗?
原书示例基于 2014 年前后的 Three.js、Tween.js 等库版本,直接照抄很可能报错,尤其是几何体构造、材质与着色器相关 API 已有较大变化。建议理解思路后改写为当前版本,或参照作者在 GitHub 上公开的示例代码做相应调整。
读这本书需要先学图形学吗?
不需要。第 1 章专门用一节讲 3D 坐标系、网格与顶点、材质纹理与光源、变换矩阵、相机与投影、着色器等基本概念,属于面向开发者的简明导引。但需要具备 JavaScript 与 HTML 基础,否则示例代码会读不懂。
这本书和《WebGL编程指南》有什么区别?
《WebGL编程指南》以原生 WebGL API 为主线,偏底层原理与逐行示例;本书则以“做出 Web 3D 应用”为目标,原生 WebGL 只占前两章,重点在 Three.js、CSS3、Canvas、动画与内容管线,覆盖面更广、更贴近工程实践。
移动端开发部分现在还适用吗?
第 12 章讨论的是移动浏览器 WebGL 的性能瓶颈、资源限制与适配策略,这类思路仍然有效;但涉及当年浏览器特性与设备限制的具体数据已经过时,建议结合如今的移动端实测情况参考。

Comments

Find this book

This site is an index: you start “Search all sources” in your browser, and the entries it lists all point to third-party sites; please judge their availability yourself.

Top rated in the same category