《WebGL编程指南》读书笔记之高级技术

高级技术

• 用鼠标控制物体旋转

  • 在鼠标左键按下时记录鼠标的初始坐标，然后在鼠标移动的时候用当前坐标减去初始坐标，获得鼠标的位移，然后根据这个位移来计算旋转矩阵

• 选中物体

  1. 当鼠标左键按下时，将整个立方体重绘为单一的红色

  2. 读取鼠标点击处的像素颜色

  3. 使用立方体原来的颜色对其进行重绘

  4. 如果第二步读取到的颜色是红色，就显示消息

• HUD（平时显示器）

  1. 在HTML文件中，为WebGL绘制的三维图形准备一个<canvas>,同时为二维的HUD信息再准备一个<canvas>。令两个<canvas>重叠放置，并让HUD的<canvas>叠在上面

  2. 在前一个<canvas>上使用WebGL API绘制三维场景

  3. 在后一个<canvas>上使用canvas 2D API绘制HUD信息

• 雾化

  • fog用来描述远处的物体看上去较为模糊的现象

  • 线性雾化：某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高

    • 起点：开始雾化之处

    • 终点：完全雾化之处

    • 起点与终点之间某一点的雾化程度与该点与视点的距离呈线性关系

    • <雾化因子> = （<终点> - <当前点与视点间的距离>）/ (<终点> - <起点>) （范围：0.0-1.0）

    • <片元颜色> = <物体表面颜色> * <雾化因子> + <雾的颜色> * （1 - <雾化因子>）

  • 使用w分量

    • 在顶点着色器中计算顶点与视点的距离，会造成较大的开销，也许会影响性能。可以使用顶点经过模型视图投影矩阵变换后的坐标的w分量来近似估算

• 绘制圆形的点

  • 为了绘制一个圆点，我们需要将原先的方点“削”成圆形

• α混合

  1. 开启混合功能

  2. 指定混合函数

  • 混合函数：绘制的图形重叠时，就涉及混合操作，需要把后者的颜色“混入”前者，后者的颜色就是源颜色，前者的颜色就是目标颜色

    • 源颜色：待混合进去

    • 目标颜色：待被混合进去的颜色

    • 加法混合：会使被混合的区域更加明亮，通常被用来实现爆炸的光照效果，或者游戏中需要引起玩家注意的任务物品等

  • 透明与不透明的物体共存

    1. 开启隐藏面消除功能

    2. 绘制所有不透明物体

    3. 锁定用于进行隐藏面消除的深度缓冲区的写入操作，使之只读

    4. 绘制所有半透明的物体（α<1.0），注意它们应当按照深度排序，然后从后向前绘制

    5. 释放深度缓冲区，使之可读可写

• 切换着色器

  • 需要先创建多个着色器程序对象，然后在金乡绘制前选择使用的程序对象（gl.useProgram()）

• 渲染到纹理

  • 帧缓冲区对象：可以用来代替颜色缓冲区或深度缓冲区。在帧缓冲区中进行绘制的过程又称为离屏绘制

    • 颜色关联对象

    • 深度关联对象

    • 模板关联对象

    • 每个关联对象又可以是两种类型：纹理对象或渲染缓冲区对象

  • 实现渲染到纹理

    1. 创建帧缓冲区对象

    2. 创建纹理对象并设置其尺寸和参数

    3. 创建渲染缓冲区对象

    4. 绑定渲染缓冲区对象并设置其尺寸

    5. 将帧缓冲区的颜色关联对象指定为一个纹理对象

    6. 将帧缓冲区的深度关联对象指定为一个渲染缓冲区对象

    7. 检查帧缓冲区是否正确配置

    8. 在帧缓冲区中进行绘制

• 绘制阴影

  • 阴影贴图（深度贴图）：使用两对着色器以实现阴影（1）一对着色器用来计算光源到物体的距离，（2）另一对着色器根据（1）中计算出的距离绘制场景。使用一张纹理图像把（1）的结果传入（2）中，这张纹理图像就被称为阴影贴图。通过阴影贴图实现阴影的方法就被称为阴影映射

    1. 将视点移到光源的位置处，并运行（1）中的着色器

    2. 将视点移回原来的位置，运行（2）中的着色器绘制场景

  • 提高精度

• 加载三维模型

  • 从模型文件中读取三维模型（Blender）

    1. 准备Float32Array类型的数组vertices，从文件中读取模型的顶点坐标数据并保存到其中

    2. 准备Float32Array类型的数组colors，从文件中读取模型的顶点颜色数据并保存到其中

    3. 准备Float32Array类型的数组normals，从文件中读取模型的顶点法线数据并保存到其中

    4. 准备Uint16Array类型的数组indices，从文件中读取顶点索引数据并保存在其中，顶点索引数据定义了组成整个模型的三角形序列

    5. 将前4步获取的数据写入缓冲区中，调用gl.drawElements()以绘制出整个立方体

  • OBJ文件格式：基于文本，易于阅读和理解，也易于转化为其他格式

  • MTL文件格式：定义了多个文件

• 响应上下文丢失

  在某些特殊情况下，如另一个程序接管了图形硬件，或者操作系统进入休眠，浏览器就会失去使用这些资源的权利，并导致存储在硬件中的数据丢失。这时，WebGL绘图上下文就会丢失。

  • 上下文丢失事件（webglcontextlost）

  • 上下文恢复事件（webglcontextrestored）

总结

实现局部的3d动画都有很成熟的解决方案，难点在于如何将它们融合在一起，绘制出更加真实生动的场景，并且在用户交互的过程中满足一定的性能要求。这本书更多是展现前端实现动画的一些基础原理和概念，更高难度的内容需要参考学习其他书籍，包括计算机图形学、图形建模等。动画没有看上去的那么容易，往往用户看到的只是最上面的一层，底层还需要很多技术的支持，比如浏览器的支持。

对于一个动画小白来说，这本书偏向基础知识，是一本很好的使用手册，但是想要做出更复杂酷炫的动画效果还需要不断深入学习。最后，这本书只看一遍是远远不够的。