具体描述
WebGL 是一项在网页上渲染三维图形的技术，也是HTML5 草案的一部分。
《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识，包括渲染管线、着色器、矩阵变换、着色器编程语言（GLSL ES）等等，也讲解了使用WebGL 渲染三维场景的一般技巧，如光照、阴影、雾化等等。《WebGL编程指南》提供了丰富的示例程序供读者钻研，也提供了极具价值的附录供读者参考。
《WebGL编程指南》适合有一定前端开发基础，希望学习WebGL，但对三维图形学缺乏了解的程序员们阅读。
《WebGL编程指南》 本书将带您踏上一段探索三维图形编程的精彩旅程，深入剖析 WebGL——一项基于 OpenGL ES 2.0 的 JavaScript API，它允许您在网页浏览器中创建令人惊叹的交互式 3D 图形和动画。无论您是希望为您的网站增添引人注目的视觉效果，还是热衷于探索计算机图形学的奥秘，本书都将为您提供扎实的理论基础和实用的编码技巧。 内容概述： 本书内容结构清晰，从基础概念到高级技术，层层递进，力求让读者循序渐进地掌握 WebGL 的精髓。 第一部分：WebGL 基础 第一章：三维图形基础概念 本章将为您扫清学习 WebGL 的道路上的第一道障碍，为您介绍计算机图形学领域最核心的几个概念。我们将从理解三维空间中的坐标系入手，包括模型坐标系、世界坐标系、视图坐标系和投影坐标系，以及它们之间的转换关系。您将学习到点、线、面的表示方法，以及如何使用向量和矩阵来进行变换，例如平移、旋转和缩放。此外，我们还将探讨多边形填充、光栅化等基本渲染管线中的概念，为后续深入学习打下坚实的基础。 第二章：WebGL 入门 本章是您与 WebGL 的第一次亲密接触。我们将首先介绍 WebGL 的发展历程及其在现代 Web 开发中的重要地位，并解释它如何突破了传统 HTML 和 CSS 的局限，实现浏览器端的 3D 渲染。您将学习如何获取 WebGL 上下文，这是与 GPU 交互的入口。我们将通过一系列简单的代码示例，展示如何在 HTML Canvas 元素上绘制基本的几何图形，例如三角形和正方形。您还将了解 WebGL 的基本绘图流程，包括数据准备、着色器编写、渲染管线配置和绘制命令的调用。 第三章：着色器编程（GLSL） 着色器是 WebGL 编程的核心。本章将带领您深入了解 GLSL（OpenGL Shading Language），一种专门用于编写图形着色器的 C 语言风格的语言。我们将详细讲解顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）的作用和工作原理。您将学习如何编写简单的 GLSL 程序，以控制顶点的位置、颜色以及最终像素的颜色。我们将介绍 GLSL 的基本语法，包括变量、函数、内置函数以及 uniform、attribute 和 varying 等关键字的用法。通过实践，您将理解着色器如何与 JavaScript 代码进行数据交互，实现动态的视觉效果。 第四章：绘制复杂图形 掌握了基础的着色器编程后，本章将引导您绘制更复杂的图形。我们将学习如何利用顶点缓冲对象（VBOs）和索引缓冲对象（IBOs）来高效地管理和传递顶点数据，这对于绘制大量顶点和面至关重要。您将了解如何构建和绘制模型，例如立方体、球体以及更复杂的网格模型。我们将进一步探讨纹理映射，学习如何将 2D 图像应用到 3D 模型表面，赋予其丰富的细节和质感。 第二部分：高级 WebGL 技术 第五章：相机和视图变换 在本章中，我们将重点关注如何构建和控制虚拟摄像机，以便从不同的角度观察和浏览 3D 场景。您将学习如何实现透视投影和正交投影，以及如何通过视图矩阵来模拟摄像机的移动和旋转。我们将深入讲解 LookAt 矩阵的构建，以及如何利用它来轻松地将摄像机定位在场景中的任意位置并指向特定的方向。通过这些技术，您可以为您的应用程序提供灵活的视角控制，让用户自由探索三维世界。 第六章：光照模型 光照是创建逼真三维场景的关键。本章将为您揭示各种经典的光照模型，帮助您理解光线与物体表面交互的原理。我们将从最基础的漫反射（Diffuse）和镜面反射（Specular）光照模型讲起，介绍光源类型，如方向光、点光源和聚光灯，以及它们如何影响物体的明暗和高光效果。您还将学习如何实现环境光（Ambient Light），为整个场景提供基础的亮度。此外，我们还将触及更高级的光照技术，如 Blinn-Phong 模型，以及如何通过法线贴图（Normal Mapping）来模拟表面细节，进一步提升视觉真实感。 第七章：纹理和材质 纹理和材质能够赋予 3D 模型丰富的视觉表现力。本章将深入探讨纹理的应用，包括纹理坐标的生成、纹理过滤（如线性过滤和各向异性过滤）以及纹理混合。您将学习如何创建和应用多种纹理，例如颜色贴图、法线贴图、高光贴图等，以实现更加复杂和逼真的材质效果。我们将探讨 PBR（Physically Based Rendering）材质模型的基本概念，虽然 WebGL 本身并不直接支持 PBR，但我们可以通过模拟其核心属性（如金属度、粗糙度）来达到类似的效果，从而创建出更具物理真实感的表面。 第八章：动画和骨骼动画 让三维场景动起来是 WebGL 的一大魅力。本章将为您介绍多种动画技术。您将学习如何通过插值（例如线性插值和 Slerp 插值）来平滑地改变顶点属性或变换矩阵，从而实现物体的平移、旋转和缩放动画。我们将探讨关键帧动画的概念，以及如何根据预设的关键帧来驱动动画的播放。对于更复杂的角色动画，我们将初步介绍骨骼动画（Skeletal Animation）的基本原理，包括骨骼的创建、蒙皮（Skinning）以及如何通过骨骼的变换来驱动模型的变形。 第九章：后处理和后期特效 为了进一步提升渲染效果，本章将引导您探索后处理（Post-processing）技术。您将学习如何通过屏幕空间的图像处理来添加各种视觉特效，例如模糊（Blur）、边缘检测（Edge Detection）、颜色校正（Color Correction）、辉光（Bloom）等。我们将讲解如何利用帧缓冲对象（Framebuffers）将渲染结果离屏存储，然后将其作为纹理再次输入到着色器中进行处理，实现这些后期特效。 第十章：性能优化 在 WebGL 编程中，性能优化是至关重要的，尤其是在处理复杂场景和大量数据时。本章将为您提供一系列实用的性能优化技巧。您将学习如何有效地管理和重用顶点数据，减少不必要的绘制调用，以及如何优化着色器代码以提高 GPU 的利用率。我们将探讨批处理（Batching）技术，以及如何利用实例化（Instancing）来一次性绘制大量相同的模型。此外，您还将了解如何使用性能分析工具来识别瓶颈，并针对性地进行改进。 第三部分：进阶应用与扩展 第十一章：与其他 Web 技术的结合 WebGL 的强大之处在于它能够无缝地融入到现代 Web 生态系统中。本章将展示如何将 WebGL 与其他 Web 技术结合，创造更丰富的用户体验。您将学习如何使用 HTML5 的 Canvas API 与 WebGL 渲染结果进行交互，例如响应用户输入、绘制 2D 叠加 UI 等。我们还将探讨如何利用 Web Workers 来在后台处理复杂的计算或数据加载，以避免阻塞主线程，保持界面的流畅响应。此外，您还将了解如何将 WebGL 渲染的内容导出为图像或视频，或者与其他 JavaScript 库（如 Three.js）结合，以加速开发进程。 第十二章：物理引擎和复杂交互 在本章中，我们将探索如何为您的 3D 场景添加物理模拟，使其更具动态和真实感。我们将介绍一些流行的 JavaScript 物理引擎，例如 Ammo.js（Bullet 物理引擎的 JavaScript 移植版）或 Cannon.js，并演示如何将 WebGL 渲染的几何体与这些物理引擎集成。您将学习如何为物体设置碰撞体、施加力、模拟重力以及处理各种物理交互，例如碰撞检测和响应。这将为您的应用程序带来更生动、更具挑战性的交互体验。 第十三章：WebGL 2.0 新特性 随着 WebGL 2.0 的发布，WebGL 的能力得到了显著提升。本章将为您介绍 WebGL 2.0 引入的关键新特性，例如统一缓冲区对象（Uniform Buffer Objects）、实例化渲染（Instancing）、多渲染目标（Multiple Render Targets）、纹理数组（Texture Arrays）、以及对 Sampler 对象的改进等。您将学习这些新特性如何帮助您编写更高效、更灵活的着色器代码，并实现更复杂的渲染效果。通过学习 WebGL 2.0，您可以充分利用现代 GPU 的强大能力，创造出超越以往的视觉效果。 第十四章：实战项目：构建一个简单的 3D 游戏场景 为了巩固所学知识，本章将引导您从头开始构建一个完整的实战项目。我们将选择一个具有代表性的场景，例如一个简单的太空探索游戏或一个交互式的 3D 模型展示器。您将运用之前学到的所有技术，包括场景搭建、模型加载、相机控制、光照渲染、纹理应用、动画播放以及用户交互等。通过这个项目，您将获得宝贵的实践经验，并能够独立完成复杂的 WebGL 应用开发。 第十五章：进一步学习资源与社区 在掌握了 WebGL 的基础和进阶技术后，您可能会希望继续深入学习。本章将为您推荐一系列宝贵的学习资源，包括官方文档、优秀的在线教程、技术博客、以及活跃的开发者社区。您将了解如何利用这些资源来解决开发中遇到的问题，跟进 WebGL 的最新发展，并与其他开发者交流经验。 本书特色： 循序渐进的教学方法： 从最基础的概念开始，逐步引入更高级的技术，确保读者能够轻松理解和掌握。 大量的代码示例： 提供清晰、可运行的代码片段，帮助读者快速上手并验证所学知识。 强调实践应用： 通过实战项目，将理论知识转化为实际能力，让读者能够独立开发 WebGL 应用。 深入浅出的讲解： 用通俗易懂的语言解释复杂的计算机图形学原理，即使是没有相关背景的读者也能轻松理解。 涵盖 WebGL 的各个方面： 从基础的绘图到高级的光照、动画和性能优化，本书力求全面覆盖 WebGL 的核心内容。 无论您是初学者还是有一定基础的开发者，《WebGL编程指南》 都将是您探索三维 Web 图形世界的理想伙伴。通过本书，您将能够自信地驾驭 WebGL，创作出令人惊艳的交互式 3D 内容。
作者简介
关于作者
Kouichi Matsuda 博士是多媒体产品用户界面和用户体验设计方面的专家。他先后供职于日本电气(NEC)、索尼(Sony) 研发中心、索尼(Sony) 计算机科学实验室，曾经做过产品研发，也做过科学研究，最终回到产品研发的岗位。目前，他是用户体验和人机交互领域的首席研究员，负责多款消费类电子产品的设计。他曾经设计了社交三维虚拟世界“PAW”，也曾经参与过VRML97(ISO/IEC 14772-1:1997) 标准的开发工作，在VRML和X3D(WebGL 的前身) 社区中仍然非常活跃。他撰写过15 本计算机技术的书籍，并翻译过25 本相关书籍。他专长于用户体验、用户界面、人机交互、自然语言处理和面向娱乐的网络设备，以及接口代理系统等领域。他不仅对技术领域的新鲜事物充满热情，还热衷于温泉、夏季的海滩、红酒和漫画（为此他已经沉迷于绘制插画一段时间了）。他在东京大学工程系获得了博士学位，你可以通过WebGL.prog.guide@gmail.com 联系他。
Rodger Lea 博士是卑诗大学媒体与图像跨学科中心的兼职教授，对多媒体和分布式计算等领域很感兴趣。他和他带领的研究小组在学术和工业领域耕耘超过20 年，参与制定了VRML97 标准，开发了多媒体操作系统、可交互数字电视原型，并领导了家用多媒体网络标准的制定工作。他发表了60 多篇学术论文，著有3 本技术书籍，并拥有12 项专利。目前，他的研究集中在探索发展中的互联网，但他仍然对有关多媒体和图形学的一切抱有热情。
关于译者
谢光磊，毕业于南京大学，目前为中科院在读硕士，即将成为淘宝UED 的一名前端工程师。因一次偶然的机会接触WebGL 而对其萌生兴趣，并愿意持久深入地研究这项技术。个人站点为 www.xieguanglei.com。
目录信息
第1 章 WebGL 概述...................... 1
WebGL 的优势 ...........................................3
使用文本编辑器开发三维应用 ...............3
轻松发布三维图形程序 .................................4
充分利用浏览器的功能 ...........................5
学习和使用WebGL 很简单 ...................5
WebGL 的起源 .................................................5
WebGL 程序的结构 ...................................6
总结 .....................................7
第2 章 WebGL 入门.................... 9
Canvas 是什么？ ........................................10
使用<canvas> 标签 ................................11
DrawRectangle.js .............................................13
最短的WebGL 程序：清空绘图区 ....................16
HTML 文件（HelloCanvas.html）.............................16
JavaScript 程序（HelloCanvas.js） ............................17
用示例程序做实验 ..............................................22
绘制一个点（版本1） ............................................22
HelloPoint1.html ..............................................24
HelloPoint1.js ....................................................24
着色器是什么？ ...........................................25
使用着色器的WebGL 程序的结构 .................................27
初始化着色器 ...........................................29
顶点着色器 ......................................................31
片元着色器 ...........................................33
绘制操作 .............................................34
WebGL 坐标系统 ....................................35
用示例程序做实验 ................................37
绘制一个点（版本2） ..............................38
使用attribute 变量..................................38
示例程序（HelloPoint2.js） .........................................39
获取attribute 变量的存储位置.......................41
向attribute 变量赋值.............................................42
gl.vertexAttrib3f() 的同族函数 .........................44
用示例程序做实验 ...............................45
通过鼠标点击绘点 ...........................................46
示例程序（ClickedPoints.js） ...........................47
注册事件响应函数 ..................................48
响应鼠标点击事件 ............................50
用示例程序做实验 ..............................53
改变点的颜色 ............................................55
示例程序（ColoredPoints.js） ..............................56
uniform 变量 ........................................58
获取uniform 变量的存储地址 .....................59
向uniform 变量赋值 .................................60
gl.uniform4f() 的同族函数 .......................61
总结 ............................62
第3 章 绘制和变换三角形................ 63
绘制多个点 ...............................................64
示例程序（MultiPoint.js） ........................................66
使用缓冲区对象 ....................................69
创建缓冲区对象（gl.createBuffer()） ...................70
绑定缓冲区（gl.bindBuffer()） .....................................71
向缓冲区对象中写入数据（gl.bufferData()）..............72
类型化数组 ........................................74
将缓冲区对象分配给attribute 变量（gl.vertexAttribPointer()） ...............75
开启attribute 变量（gl.enableVertexAttribArray()） ................77
gl.drawArrays() 的第2 个和第3 个参数 .................78
用示例程序做实验 ........................................79
Hello Triangle ..................................80
示例程序（HelloTriangle.js） .........................80
基本图形 .................................................82
用示例程序做实验 ...........................83
Hello Rectangle（HelloQuad） ...........................84
用示例程序做实验 ...................................85
移动、旋转和缩放 ........................................86
平移 ................................................87
示例程序（TranslatedTriangle.js） ...........................88
旋转 ...........................................................91
示例程序（RotatedTriangle.js） ..................................93
变换矩阵：旋转 ........................................97
变换矩阵：平移 ...................................100
4×4 的旋转矩阵 ..................................101
示例程序（RotatedTriangle_Matrix.js） ...................102
平移：相同的策略 ................................105
变换矩阵：缩放 ...............................106
总结 ...........................................................108
第4 章 高级变换与动画基础.............................. 109
平移，然后旋转 ...........................................109
矩阵变换库：cuon-matrix.js ....................110
示例程序（RotatedTriangle_Matrix4.js） ............... 111
复合变换 .............................................113
示例程序（RotatedTranslatedTriangle.js）.....................115
用示例程序做实验 ..................................117
动画 .....................................118
动画基础 .........................................119
示例程序（RotatingTriangle.js） .......................119
反复调用绘制函数（tick()） ............................123
按照指定的旋转角度绘制三角形（draw()） .............123
请求再次被调用（requestAnimationFrame()） ............125
更新旋转角（animate()）................................126
用示例程序做实验 ............................128
总结 .....................................................130
第5 章 颜色与纹理.............. 131
将非坐标数据传入顶点着色器 ................131
示例程序（MultiAttributeSize.js） .....................133
创建多个缓冲区对象 .........................134
gl.vertexAttribPointer() 的步进和偏移参数 ...............135
示例程序（MultiAttributeSize_Interleaved.js） ...................136
修改颜色（varying 变量） .......................140
示例程序（MultiAttributeColor.js） .........................141
用示例程序做实验 .........................144
彩色三角形（ColoredTriangle.js） ............................145
几何形状的装配和光栅化 ................145
调用片元着色器 ............................149
用示例程序做实验 ..................................149
varying 变量的作用和内插过程 ..............151
在矩形表面贴上图像 ...........................................153
纹理坐标 ...................................................156
将纹理图像粘贴到几何图形上 .....................156
示例程序（TexturedQuad.js） ...............................157
设置纹理坐标（initVertexBuffers()）......................160
配置和加载纹理（initTextures()） ..................160
为WebGL 配置纹理（loadTexture()） .............164
图像Y 轴反转 .................................164
激活纹理单元（gl.activeTexture()） ..................165
绑定纹理对象（gl.bindTexture()） ..................166
配置纹理对象的参数（gl.texParameteri()） .........168
将纹理图像分配给纹理对象（gl.texImage2D()） .....171
将纹理单元传递给片元着色器（gl.uniform1i()） .........173
从顶点着色器向片元着色器传输纹理坐标 .......................174
在片元着色器中获取纹理像素颜色（texture2D()） ..................174
用示例程序做试验 ............................175
使用多幅纹理 ...............................................177
示例程序（MultiTexture.js） ............................178
总结 .......................................................183
第6 章 OpenGL ES 着色器语言（GLSL ES）.............. 185
回顾：基本着色器代码 ...............................186
GLSL ES 概述 .............................................186
你好，着色器！ ...................................................187
基础 ......................187
执行次序 .........................................187
注释 ..................................................187
数据值类型（数值和布尔值） ......................188
变量 .........................................................188
GLSL ES 是强类型语言 ........................189
基本类型 ....................................................189
赋值和类型转换 .........................190
运算符 ............................................191
矢量和矩阵 .........................................192
赋值和构造 ...............................193
访问元素 .........................................195
运算符 ............................................197
结构体 .....................................................200
赋值和构造 ...................................200
访问成员 ...............................................200
运算符 ...........................................201
数组 ..........................................................201
取样器（纹理） ........................................202
运算符优先级 ..........................................203
程序流程控制：分支和循环 .......................203
if 语句和if-else 语句 ............................203
for 语句 .......................................204
continue、break 和discard 语句 ................205
函数 ..........................................205
规范声明 ........................................207
参数限定词 ........................................207
内置函数 .................................................208
全局变量和局部变量 ..............................209
存储限定字 ...........................................209
const 变量 .....................................209
Attribute 变量 ..............................210
uniform 变量 ..................................211
varying 变量 ..................................211
精度限定字 ..............................................211
预处理指令 .............................................213
总结 ......................................................215
第7 章 进入三维世界................ 217
立方体由三角形构成 .............................217
视点和视线 ...........................................218
视点、观察目标点和上方向 ........... 219
示例程序（LookAtTriangles.js） ...........................221
LookAtTriangles.js 与RotatedTriangle_Matrix4.js ..........224
从指定视点观察旋转后的三角形 .....................225
示例程序（LookAtRotatedTriangles.js） ...................227
用示例程序做实验 .................................228
利用键盘改变视点 .............................230
示例程序（LookAtTrianglesWithKeys.js） .................230
独缺一角 ......................................232
可视范围（正射类型） .............................233
可视空间 ..................................................234
定义盒状可视空间 ................................235
示例程序（OrthoView.html） ........................236
示例程序（OrthoView.js） ...............................237
JavaScript 修改HTML 元素 ..........................239
顶点着色器的执行流程 ............................239
修改near 和far 值 .............................241
补上缺掉的角（LookAtTrianglesWithKeys_ViewVolume.js） ..........243
用示例程序做实验 ................................245
可视空间（透视投影） ....................................246
定义透视投影可视空间 .......................247
示例程序（perspectiveview.js） .........................249
投影矩阵的作用 ...................................251
共冶一炉（模型矩阵、视图矩阵和投影矩阵） .............252
示例程序（PerspectiveView_mvp.js） ........................254
用示例程序做实验 ................................257
正确处理对象的前后关系 ............................258
隐藏面消除 .....................................260
示例程序（DepthBuffer.js）..............................262
深度冲突 ................................................263
立方体 ...........................................................266
通过顶点索引绘制物体 ....................268
示例程序（HelloCube.js） ...........................268
向缓冲区中写入顶点的坐标、颜色与索引 ....................271
为立方体的每个表面指定颜色 .............274
示例程序（ColoredCube.js） ............................275
用示例程序做实验 ............................277
总结 ..............................................279
第8 章 光照......... 281
光照原理 ....................................................281
光源类型 .......................................283
反射类型 ............................................284
平行光下的漫反射 ............................286
根据光线和表面的方向计算入射角 .................287
法线：表面的朝向 .............................288
示例程序（LightedCube.js） ..........................291
环境光下的漫反射 ...................................296
示例程序（LightedCube_ambient.js） .........................298
运动物体的光照效果 .....................................299
魔法矩阵：逆转置矩阵 .....................301
示例程序（LightedTranslatedRotatedCube.js） .....................302
点光源光 ............................................304
示例程序（PointLightedCube.js） ...............305
更逼真：逐片元光照 ......................................308
示例程序（PointLightedCube_perFragment.js） ........309
总结 ............................310
第9 章 层次模型.......... 311
多个简单模型组成的复杂模型 .....................311
层次结构模型 ..................................313
单关节模型 ......................................314
示例程序（JointMode.js） ................................315
绘制层次模型（draw()） .....................319
多节点模型 ..........................................321
示例程序（MultiJointModel.js） .........................323
绘制部件（drawBox()）............................326
绘制部件（drawSegments()） .......................327
着色器和着色器程序对象：initShaders() 函数的作用 .................332
创建着色器对象（gl.createShader()） ..................333
指定着色器对象的代码（gl.shaderSource()） ................334
编译着色器（gl.compileShader()） ...............334
创建程序对象（gl.createProgram()） ..............................336
为程序对象分配着色器对象（gl.attachShader()） .............337
连接程序对象（gl.linkProgram()） ..........................337
告知WebGL 系统所使用的程序对象（gl.useProgram()） ................339
initShaders() 函数的内部流程 .....................................339
总结 ...........................................................342
第10 章 高级技术......................... 343
用鼠标控制物体旋转 .......................................343
如何实现物体旋转 ......................................344
示例程序（RotateObject.js） .......................344
选中物体 ........................................347
如何实现选中物体 .........................................347
示例程序（PickObject.js） .................................348
选中一个表面 ......................................351
示例程序（PickFace.js）...................................352
HUD（平视显示器） .................................355
如何实现HUD ...................................355
示例程序（HUD.html） ..............................356
示例程序（HUD.js）...................................357
在网页上方显示三维物体 ....................359
雾化（大气效果） ...................................359
如何实现雾化 ....................................360
示例程序（Fog.js） .....................................361
使用w 分量（Fog_w.js） ...............................363
绘制圆形的点 .................................................364
如何实现圆形的点 ......................................364
示例程序（RoundedPoint.js） ...............................366
α 混合 .............................................367
如何实现α 混合 .....................................367
示例程序（LookAtBlendedTriangles.js） .................369
混合函数 .....................................................369
半透明的三维物体（BlendedCube.js）................371
透明与不透明物体共存 .........................372
切换着色器 ............................373
如何实现切换着色器 .....................................374
示例程序（ProgramObject.js） ............................375
渲染到纹理 .......................................................379
帧缓冲区对象和渲染缓冲区对象 ....................380
如何实现渲染到纹理 ...............................381
示例程序（FramebufferObject.js） ........................382
创建帧缓冲区对象（gl.createFramebuffer()） ............385
创建纹理对象并设置其尺寸和参数 ....................385
创建渲染缓冲区对象（gl.createRenderbuffer()） ...........386
绑定渲染缓冲区并设置其尺寸（gl.bindRenderbuffer()，
gl.renderbufferStorage()） ......................................386
将纹理对象关联到帧缓冲区对象（gl.bindFramebuffer()，
gl.framebufferTexture2D()） ................................388
将渲染缓冲区对象关联到帧缓冲区对象（gl.framebufferRenderbuffer()） ...389
检查帧缓冲区的配置（gl.checkFramebufferStatus()） ..........390
在帧缓冲区进行绘图 ........................390
绘制阴影 ..................................................392
如何实现阴影 ................................392
示例程序（Shadow.js） ...........................393
提高精度 ........................................399
示例程序（Shadow_highp.js） .........................400
加载三维模型 .....................................401
OBJ 文件格式 ....................................404
MTL 文件格式 ...............................405
示例程序（OBJViewer.js） ........................406
自定义类型对象 ..................................409
示例程序（OBJViewer.js 解析数据部分） .........411
响应上下文丢失 .....................................418
如何响应上下文丢失 ....................419
示例程序（RotatingTriangle_contextLost.js） ................420
总结 .............................................................422
附录A WebGL 中无须交换缓冲区....................... 423
附录B GLSL ES 1.0 内置函数..................... 427
角度和三角函数 .....................................428
指数函数 ...............................................429
通用函数 ...................................................430
几何函数 ...................................................433
矩阵函数 ....................................................434
矢量函数 .......................................................435
纹理查询函数 ...........................................436
附录C 投影矩阵....................... 437
正射投影矩阵 ........................................................437
透视投影矩阵 ......................................437
附录D WebGL/OpenGL ：左手还是右手坐标系？............................ 439
示例程序(CoordinateSystem.js) .............................440
隐藏面消除和裁剪坐标系统 ......................................443
裁剪坐标系和可视空间 ....................................444
什么是对的？ .................................................446
总结 .....................................448
附录E 逆转置矩阵................... 449
附录F 从文件中加载着色器............ 453
附录G 世界坐标系和本地坐标系........... 457
本地坐标系 ......................................................458
世界坐标系 ...........................459
变换与坐标系 ..........................................461
附录H WebGL 的浏览器设置.................. 463
· · · · · · (收起)
WebGL 的优势 ...........................................3
使用文本编辑器开发三维应用 ...............3
轻松发布三维图形程序 .................................4
充分利用浏览器的功能 ...........................5
学习和使用WebGL 很简单 ...................5
WebGL 的起源 .................................................5
WebGL 程序的结构 ...................................6
总结 .....................................7
第2 章 WebGL 入门.................... 9
Canvas 是什么？ ........................................10
使用<canvas> 标签 ................................11
DrawRectangle.js .............................................13
最短的WebGL 程序：清空绘图区 ....................16
HTML 文件（HelloCanvas.html）.............................16
JavaScript 程序（HelloCanvas.js） ............................17
用示例程序做实验 ..............................................22
绘制一个点（版本1） ............................................22
HelloPoint1.html ..............................................24
HelloPoint1.js ....................................................24
着色器是什么？ ...........................................25
使用着色器的WebGL 程序的结构 .................................27
初始化着色器 ...........................................29
顶点着色器 ......................................................31
片元着色器 ...........................................33
绘制操作 .............................................34
WebGL 坐标系统 ....................................35
用示例程序做实验 ................................37
绘制一个点（版本2） ..............................38
使用attribute 变量..................................38
示例程序（HelloPoint2.js） .........................................39
获取attribute 变量的存储位置.......................41
向attribute 变量赋值.............................................42
gl.vertexAttrib3f() 的同族函数 .........................44
用示例程序做实验 ...............................45
通过鼠标点击绘点 ...........................................46
示例程序（ClickedPoints.js） ...........................47
注册事件响应函数 ..................................48
响应鼠标点击事件 ............................50
用示例程序做实验 ..............................53
改变点的颜色 ............................................55
示例程序（ColoredPoints.js） ..............................56
uniform 变量 ........................................58
获取uniform 变量的存储地址 .....................59
向uniform 变量赋值 .................................60
gl.uniform4f() 的同族函数 .......................61
总结 ............................62
第3 章 绘制和变换三角形................ 63
绘制多个点 ...............................................64
示例程序（MultiPoint.js） ........................................66
使用缓冲区对象 ....................................69
创建缓冲区对象（gl.createBuffer()） ...................70
绑定缓冲区（gl.bindBuffer()） .....................................71
向缓冲区对象中写入数据（gl.bufferData()）..............72
类型化数组 ........................................74
将缓冲区对象分配给attribute 变量（gl.vertexAttribPointer()） ...............75
开启attribute 变量（gl.enableVertexAttribArray()） ................77
gl.drawArrays() 的第2 个和第3 个参数 .................78
用示例程序做实验 ........................................79
Hello Triangle ..................................80
示例程序（HelloTriangle.js） .........................80
基本图形 .................................................82
用示例程序做实验 ...........................83
Hello Rectangle（HelloQuad） ...........................84
用示例程序做实验 ...................................85
移动、旋转和缩放 ........................................86
平移 ................................................87
示例程序（TranslatedTriangle.js） ...........................88
旋转 ...........................................................91
示例程序（RotatedTriangle.js） ..................................93
变换矩阵：旋转 ........................................97
变换矩阵：平移 ...................................100
4×4 的旋转矩阵 ..................................101
示例程序（RotatedTriangle_Matrix.js） ...................102
平移：相同的策略 ................................105
变换矩阵：缩放 ...............................106
总结 ...........................................................108
第4 章 高级变换与动画基础.............................. 109
平移，然后旋转 ...........................................109
矩阵变换库：cuon-matrix.js ....................110
示例程序（RotatedTriangle_Matrix4.js） ............... 111
复合变换 .............................................113
示例程序（RotatedTranslatedTriangle.js）.....................115
用示例程序做实验 ..................................117
动画 .....................................118
动画基础 .........................................119
示例程序（RotatingTriangle.js） .......................119
反复调用绘制函数（tick()） ............................123
按照指定的旋转角度绘制三角形（draw()） .............123
请求再次被调用（requestAnimationFrame()） ............125
更新旋转角（animate()）................................126
用示例程序做实验 ............................128
总结 .....................................................130
第5 章 颜色与纹理.............. 131
将非坐标数据传入顶点着色器 ................131
示例程序（MultiAttributeSize.js） .....................133
创建多个缓冲区对象 .........................134
gl.vertexAttribPointer() 的步进和偏移参数 ...............135
示例程序（MultiAttributeSize_Interleaved.js） ...................136
修改颜色（varying 变量） .......................140
示例程序（MultiAttributeColor.js） .........................141
用示例程序做实验 .........................144
彩色三角形（ColoredTriangle.js） ............................145
几何形状的装配和光栅化 ................145
调用片元着色器 ............................149
用示例程序做实验 ..................................149
varying 变量的作用和内插过程 ..............151
在矩形表面贴上图像 ...........................................153
纹理坐标 ...................................................156
将纹理图像粘贴到几何图形上 .....................156
示例程序（TexturedQuad.js） ...............................157
设置纹理坐标（initVertexBuffers()）......................160
配置和加载纹理（initTextures()） ..................160
为WebGL 配置纹理（loadTexture()） .............164
图像Y 轴反转 .................................164
激活纹理单元（gl.activeTexture()） ..................165
绑定纹理对象（gl.bindTexture()） ..................166
配置纹理对象的参数（gl.texParameteri()） .........168
将纹理图像分配给纹理对象（gl.texImage2D()） .....171
将纹理单元传递给片元着色器（gl.uniform1i()） .........173
从顶点着色器向片元着色器传输纹理坐标 .......................174
在片元着色器中获取纹理像素颜色（texture2D()） ..................174
用示例程序做试验 ............................175
使用多幅纹理 ...............................................177
示例程序（MultiTexture.js） ............................178
总结 .......................................................183
第6 章 OpenGL ES 着色器语言（GLSL ES）.............. 185
回顾：基本着色器代码 ...............................186
GLSL ES 概述 .............................................186
你好，着色器！ ...................................................187
基础 ......................187
执行次序 .........................................187
注释 ..................................................187
数据值类型（数值和布尔值） ......................188
变量 .........................................................188
GLSL ES 是强类型语言 ........................189
基本类型 ....................................................189
赋值和类型转换 .........................190
运算符 ............................................191
矢量和矩阵 .........................................192
赋值和构造 ...............................193
访问元素 .........................................195
运算符 ............................................197
结构体 .....................................................200
赋值和构造 ...................................200
访问成员 ...............................................200
运算符 ...........................................201
数组 ..........................................................201
取样器（纹理） ........................................202
运算符优先级 ..........................................203
程序流程控制：分支和循环 .......................203
if 语句和if-else 语句 ............................203
for 语句 .......................................204
continue、break 和discard 语句 ................205
函数 ..........................................205
规范声明 ........................................207
参数限定词 ........................................207
内置函数 .................................................208
全局变量和局部变量 ..............................209
存储限定字 ...........................................209
const 变量 .....................................209
Attribute 变量 ..............................210
uniform 变量 ..................................211
varying 变量 ..................................211
精度限定字 ..............................................211
预处理指令 .............................................213
总结 ......................................................215
第7 章 进入三维世界................ 217
立方体由三角形构成 .............................217
视点和视线 ...........................................218
视点、观察目标点和上方向 ........... 219
示例程序（LookAtTriangles.js） ...........................221
LookAtTriangles.js 与RotatedTriangle_Matrix4.js ..........224
从指定视点观察旋转后的三角形 .....................225
示例程序（LookAtRotatedTriangles.js） ...................227
用示例程序做实验 .................................228
利用键盘改变视点 .............................230
示例程序（LookAtTrianglesWithKeys.js） .................230
独缺一角 ......................................232
可视范围（正射类型） .............................233
可视空间 ..................................................234
定义盒状可视空间 ................................235
示例程序（OrthoView.html） ........................236
示例程序（OrthoView.js） ...............................237
JavaScript 修改HTML 元素 ..........................239
顶点着色器的执行流程 ............................239
修改near 和far 值 .............................241
补上缺掉的角（LookAtTrianglesWithKeys_ViewVolume.js） ..........243
用示例程序做实验 ................................245
可视空间（透视投影） ....................................246
定义透视投影可视空间 .......................247
示例程序（perspectiveview.js） .........................249
投影矩阵的作用 ...................................251
共冶一炉（模型矩阵、视图矩阵和投影矩阵） .............252
示例程序（PerspectiveView_mvp.js） ........................254
用示例程序做实验 ................................257
正确处理对象的前后关系 ............................258
隐藏面消除 .....................................260
示例程序（DepthBuffer.js）..............................262
深度冲突 ................................................263
立方体 ...........................................................266
通过顶点索引绘制物体 ....................268
示例程序（HelloCube.js） ...........................268
向缓冲区中写入顶点的坐标、颜色与索引 ....................271
为立方体的每个表面指定颜色 .............274
示例程序（ColoredCube.js） ............................275
用示例程序做实验 ............................277
总结 ..............................................279
第8 章 光照......... 281
光照原理 ....................................................281
光源类型 .......................................283
反射类型 ............................................284
平行光下的漫反射 ............................286
根据光线和表面的方向计算入射角 .................287
法线：表面的朝向 .............................288
示例程序（LightedCube.js） ..........................291
环境光下的漫反射 ...................................296
示例程序（LightedCube_ambient.js） .........................298
运动物体的光照效果 .....................................299
魔法矩阵：逆转置矩阵 .....................301
示例程序（LightedTranslatedRotatedCube.js） .....................302
点光源光 ............................................304
示例程序（PointLightedCube.js） ...............305
更逼真：逐片元光照 ......................................308
示例程序（PointLightedCube_perFragment.js） ........309
总结 ............................310
第9 章 层次模型.......... 311
多个简单模型组成的复杂模型 .....................311
层次结构模型 ..................................313
单关节模型 ......................................314
示例程序（JointMode.js） ................................315
绘制层次模型（draw()） .....................319
多节点模型 ..........................................321
示例程序（MultiJointModel.js） .........................323
绘制部件（drawBox()）............................326
绘制部件（drawSegments()） .......................327
着色器和着色器程序对象：initShaders() 函数的作用 .................332
创建着色器对象（gl.createShader()） ..................333
指定着色器对象的代码（gl.shaderSource()） ................334
编译着色器（gl.compileShader()） ...............334
创建程序对象（gl.createProgram()） ..............................336
为程序对象分配着色器对象（gl.attachShader()） .............337
连接程序对象（gl.linkProgram()） ..........................337
告知WebGL 系统所使用的程序对象（gl.useProgram()） ................339
initShaders() 函数的内部流程 .....................................339
总结 ...........................................................342
第10 章 高级技术......................... 343
用鼠标控制物体旋转 .......................................343
如何实现物体旋转 ......................................344
示例程序（RotateObject.js） .......................344
选中物体 ........................................347
如何实现选中物体 .........................................347
示例程序（PickObject.js） .................................348
选中一个表面 ......................................351
示例程序（PickFace.js）...................................352
HUD（平视显示器） .................................355
如何实现HUD ...................................355
示例程序（HUD.html） ..............................356
示例程序（HUD.js）...................................357
在网页上方显示三维物体 ....................359
雾化（大气效果） ...................................359
如何实现雾化 ....................................360
示例程序（Fog.js） .....................................361
使用w 分量（Fog_w.js） ...............................363
绘制圆形的点 .................................................364
如何实现圆形的点 ......................................364
示例程序（RoundedPoint.js） ...............................366
α 混合 .............................................367
如何实现α 混合 .....................................367
示例程序（LookAtBlendedTriangles.js） .................369
混合函数 .....................................................369
半透明的三维物体（BlendedCube.js）................371
透明与不透明物体共存 .........................372
切换着色器 ............................373
如何实现切换着色器 .....................................374
示例程序（ProgramObject.js） ............................375
渲染到纹理 .......................................................379
帧缓冲区对象和渲染缓冲区对象 ....................380
如何实现渲染到纹理 ...............................381
示例程序（FramebufferObject.js） ........................382
创建帧缓冲区对象（gl.createFramebuffer()） ............385
创建纹理对象并设置其尺寸和参数 ....................385
创建渲染缓冲区对象（gl.createRenderbuffer()） ...........386
绑定渲染缓冲区并设置其尺寸（gl.bindRenderbuffer()，
gl.renderbufferStorage()） ......................................386
将纹理对象关联到帧缓冲区对象（gl.bindFramebuffer()，
gl.framebufferTexture2D()） ................................388
将渲染缓冲区对象关联到帧缓冲区对象（gl.framebufferRenderbuffer()） ...389
检查帧缓冲区的配置（gl.checkFramebufferStatus()） ..........390
在帧缓冲区进行绘图 ........................390
绘制阴影 ..................................................392
如何实现阴影 ................................392
示例程序（Shadow.js） ...........................393
提高精度 ........................................399
示例程序（Shadow_highp.js） .........................400
加载三维模型 .....................................401
OBJ 文件格式 ....................................404
MTL 文件格式 ...............................405
示例程序（OBJViewer.js） ........................406
自定义类型对象 ..................................409
示例程序（OBJViewer.js 解析数据部分） .........411
响应上下文丢失 .....................................418
如何响应上下文丢失 ....................419
示例程序（RotatingTriangle_contextLost.js） ................420
总结 .............................................................422
附录A WebGL 中无须交换缓冲区....................... 423
附录B GLSL ES 1.0 内置函数..................... 427
角度和三角函数 .....................................428
指数函数 ...............................................429
通用函数 ...................................................430
几何函数 ...................................................433
矩阵函数 ....................................................434
矢量函数 .......................................................435
纹理查询函数 ...........................................436
附录C 投影矩阵....................... 437
正射投影矩阵 ........................................................437
透视投影矩阵 ......................................437
附录D WebGL/OpenGL ：左手还是右手坐标系？............................ 439
示例程序(CoordinateSystem.js) .............................440
隐藏面消除和裁剪坐标系统 ......................................443
裁剪坐标系和可视空间 ....................................444
什么是对的？ .................................................446
总结 .....................................448
附录E 逆转置矩阵................... 449
附录F 从文件中加载着色器............ 453
附录G 世界坐标系和本地坐标系........... 457
本地坐标系 ......................................................458
世界坐标系 ...........................459
变换与坐标系 ..........................................461
附录H WebGL 的浏览器设置.................. 463
· · · · · · (收起)
读后感
为了评论这本书，特意登陆了账号，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，非常感谢这本书，我是做虚拟现实的，以前只是停留在引擎使用，后来转...
企图速成的初学者读这本书恐怕要失望了。 这本书有一个特点，就是作者有一套精巧、独特的叙述webgl的方式，先讲什么后讲什么是设计好的，比如说，作者先是会搞一个简答的库，屏蔽掉一些他认为不需要一上来就讲清楚的知识点，一步一步带着你学习。这样的好处是事后你会发现自己...
这本书的内容感觉还不错，但是有一些低级错误实在有点煞风景。 于是上网搜了一下本书的勘误表，地址在此。由于是谷歌的站点，可能要翻墙， 还是把内容搬运过来好了。 Listing page for mistakes we've made Chapter 2: Page 11, second sentence: "Listing 2.1 shows Drawin...
为了评论这本书，特意登陆了账号，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，非常感谢这本书，我是做虚拟现实的，以前只是停留在引擎使用，后来转...
为了评论这本书，特意登陆了账号，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，鼎力推荐，非常感谢这本书，我是做虚拟现实的，以前只是停留在引擎使用，后来转...
用户评价
作为一名长期从事前端开发的工程师，我深知在Web端实现复杂的图形渲染是一项巨大的挑战。WebGL技术的出现，为我们打开了通往原生3D图形世界的大门，而《WebGL编程指南》这本书，在我看来，就是开启这扇门的金钥匙。我最看重的是书中能否提供实际可操作的代码示例，以及这些示例是否能够覆盖到Web端3D开发的各个关键环节。例如，如何加载和处理3D模型，如何实现逼真的材质效果，如何进行摄像机控制和场景导航，以及如何与其他Web技术（如HTML5 Canvas、JavaScript框架）进行无缝集成。我希望书中不仅仅是罗列API，更能深入剖析背后的原理，让我理解“为什么”这样做，而不是仅仅停留在“怎么”做。特别是对于那些可能存在的性能瓶颈和常见错误，书中能否给出有效的解决方案和规避策略，这对我来说至关重要。我希望通过这本书，能够系统地梳理WebGL的知识体系，提升自己在Web端3D开发领域的实战能力，从而能够胜任更具挑战性的项目。
我一直对3D图形编程充满好奇，尤其是在浏览器中实现交互式的3D体验，WebGL无疑是其中的关键技术。这本书的封面设计就透露出一种严谨和专业的氛围，让我对接下来的学习充满期待。当我拿到这本书时，首先翻阅的是目录，丰富的章节安排让我看到了学习路径的清晰规划，从基础概念的引入，到各种高级特性的讲解，再到实际案例的应用，无不体现了作者的精心编排。我尤其关注那些关于着色器语言（GLSL）的部分，我一直觉得这是3D图形编程的灵魂所在，理解着色器的工作原理，才能真正掌握渲染过程的奥秘。另外，关于纹理映射、光照模型、几何变换等内容，我希望能有详尽的讲解和生动的示例，因为这些都是构建逼真3D场景不可或缺的元素。书中对性能优化的讨论也让我非常感兴趣，毕竟在Web环境中，高效的渲染是保证用户体验的关键。我期望这本书能够循序渐进地引导我，即使是没有深厚的计算机图形学背景，也能逐步理解并掌握WebGL的核心技术，最终能够独立开发出令人惊艳的3D应用。
我是一位热衷于游戏开发的独立开发者，一直以来都在寻找能够帮助我将一些酷炫的3D游戏想法变为现实的工具和技术。WebGL无疑是一个非常有潜力的选择，而《WebGL编程指南》这本书，在我看来，就像是通往3D游戏世界的一本宝典。我特别关心书中能否详细讲解如何处理游戏中的各种核心元素，比如如何有效地管理场景中的大量对象，如何实现流畅的动画系统，如何添加物理引擎来模拟真实世界的交互，以及如何设计引人入胜的用户界面。我期望书中能够提供一些关于游戏逻辑和架构设计的思路，而不仅仅是停留在图形渲染的层面。例如，如何组织游戏代码，如何处理玩家输入，如何实现多人在线游戏的基本框架等等。此外，对于性能优化，尤其是在低端设备上的表现，我非常希望书中能有深入的探讨和实用的技巧。最终，我希望通过这本书，能够将我的游戏开发技能提升到一个新的水平，创造出能够吸引大量玩家的精彩3D游戏。
作为一名资深的Web架构师，我对新技术如何赋能Web应用的发展始终保持着高度的关注。《WebGL编程指南》这本书，在我看来，不仅仅是一本技术手册，更是一本关于如何利用3D图形技术革新Web体验的探索指南。我最感兴趣的是书中对于WebGL在不同应用场景下的实践案例分析。例如，如何将其应用于数据可视化，将复杂的统计数据以直观生动的3D形式呈现；如何用于产品展示，让用户能够360度无死角地查看和交互；如何在教育领域实现沉浸式学习体验；甚至是在建筑、设计等专业领域，如何通过Web端3D交互来提升工作效率。我希望书中能够提供一些关于如何将WebGL与现有Web架构进行整合的思路和最佳实践，以及如何设计可扩展、可维护的3D Web应用。此外，书中对安全性和跨平台兼容性的讨论也同样重要，这对于在生产环境中大规模部署WebGL应用至关重要。我期望这本书能够为我带来新的启发，帮助我思考如何将3D图形技术更深入地融入到我们的Web产品和服务中。
我是一名对计算机图形学充满热情的学生，一直想找一本能够系统学习WebGL的书籍。《WebGL编程指南》的出现，让我看到了希望。我特别关注书中对数学原理的讲解，例如向量、矩阵运算在3D图形变换中的应用，以及三维空间中的投影原理。我一直认为，深入理解这些底层数学知识，是掌握3D图形编程的关键。我希望书中能够用通俗易懂的语言，结合图示，来解释这些抽象的概念，而不是简单地给出公式。另外，我非常期待书中能够详细介绍WebGL 2.0的新特性，以及如何利用这些新特性来提升渲染效果和效率。例如，延迟渲染、PBR（基于物理的渲染）等技术，如果书中能够有相关的讲解和示例，那将极大地拓宽我的视野。我还希望书中能够涵盖一些高级的主题，比如后处理效果、粒子系统、骨骼动画等，这些都是构建复杂3D场景的常用技术。总之，我希望这本书能够成为我深入学习WebGL的有力助手，为我未来的学术研究和项目开发打下坚实的基础。
对于入门webgl,opengl大有裨益，对于使用游戏引擎，不熟悉底层渲染原理的程序员，也是了解底层渲染逻辑的好途径。
再读一遍 https://webglfundamentals.org/webgl/lessons/zh_cn/
错误不少，但是不影响理解，入门必备！
比较粗略的过了第一遍，主要了解着色器和矩阵变换部分，大多数Threejs类课程都不能在这方面做到比较好的覆盖
好，很好读，入门
