WebGL编程指南笔记六 第九章层次模型 第十章 附录

书中剩余的内容，不再详述，将以目录的形式，提供快捷检索。

参考
【《WebGL编程指南》读书笔记-层次模型】
【《WebGL编程指南》读书笔记——着色器和程序对象的准备】

一、第9 章 层次模型

1.层次模型

我们已经知道如何平移、旋转简单的模型，但是，实际用到的很多三维模型都是由多个较为简单的小模型（部件）组成的。本节将以一个机器人手臂为例，讨论如何处理复杂模型：

image.png

• 多个简单模型组成的复杂模型 .....................311
• 层次结构模型 ..................................313
• 单关节模型 ......................................314
• 示例程序（JointMode.js） ................................315
• 绘制层次模型（draw()） .....................319
• 多节点模型 ..........................................321
• 示例程序（MultiJointModel.js） .........................323
• 绘制部件（drawBox()）............................326
• 绘制部件（drawSegments()） .......................327

2.initShaders()细节

在此之前，我们一直使用书中封装的initShaders()代替我们执行着色器和着色器程序对象的初始化，在这里，基于之前的知识，我们已经能够理解initShaders()每一步的作用了，在笔者看来，其与缓冲区存储数据分配变量有异曲同工之妙。本节，我们结合书中的内容和函数源码，逐渐了解过程的细节。

• 着色器和着色器程序对象：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