本文翻译自martinRenou，有改动，以下“我”代指作者。在本文中，我尝试使用 WebGL 和 ThreeJS 来实时做焦散计算。在线示例查看。
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123
什么是焦散（caustics）？
焦散是光从表面（在我们的例子中是空气/水界面）折射和反射时出现的光斑。由于在水波上发生的反射和折射，水充当了动态放大镜，于是就产生了这些光斑。
在这篇文章中，我们重点关注光折射引起的焦散，主要是水下发生的情况。
为了能够获得稳定的高帧率（60fps），我们需要在显卡（GPU）上计算它们，因此我们将完全使用 GLSL 编写的着色器来进行计算。
为了计算，我们需要：
- 计算水面的折射光线（这在 GLSL 中很简单，有内置函数）
- 使用相交算法计算这些光线照射到环境的位置
- 通过检查光线会聚的位置来计算焦散强度
著名的 WebGL-water 示例
Evan Wallace 的这个演示示例非常厉害，它使用 WebGL 展示了视觉上令人叹服的水体焦散：madebyevan.com/webgl-water
这里有一篇他的文章，其中解释了如何使用光前网格和偏导 GLSL 函数实时计算它们。他的实现速度非常快，而且非常漂亮，但它有一些缺点：它只适用于立方体池和池中的球体。我们要是把鲨鱼放入水下，这个示例就不能正常工作了，是因为它在着色器中硬编码为水下的球体。
将球体放入水下的原因是计算折射光线与球体之间的交集非常简单，并且涉及非常简单的数学。
所有这些对于示例来说都很好，但我想要一个更通用的焦散计算解决方案，以便任何类型的非结构化网格都可以像鲨鱼一样躺在池中。
现在，让我们开始我们的方法。
处理 GLSL 限制
在用 GLSL 编写的着色器中，我们只能访问有关场景的有限信息，例如：
- Attributes，当前绘制的顶点的属性（位置：3D 矢量、法线：3D 矢量等）。你可以将自己的属性传递给GPU，但它需要有一个GLSL内置类型。
- Uniforms，对于当前帧中当前绘制的整个网格来说是不变的。它可以是纹理、相机投影矩阵、光线方向等。它必须具有内置类型：int、float、纹理的sampler2D、vec2、vec3、vec4、mat3、mat4。
但是我们无法访问场景中存在的网格。
这就是为什么 webgl-water 演示只能用简单的 3D 场景制作的确切原因。计算折射光线和可以使用uniform表示的非常简单的形状之间的交集更容易。对于球体，它可以通过位置（3D 向量）和半径（浮点）来定义，因此可以使用uniform将该信息传递给着色器，并且相交计算涉及非常简单的数学，可以轻松快速地计算在着色器中执行。
在着色器中执行的一些光线追踪技术通过纹理传递网格，但是我们必须要使用大量的射线来获得不错的结果。如果我们使用 256x256=65536 条光线计算焦散，则意味着每秒运行不可忽略的相交计算量（这也取决于场景中网格的数量）。
因此我们需要找到一种方法将水下环境表示为uniform并计算交集，同时保持良好的性能。
创建环境贴图
当谈到动态阴影计算时，一个众所周知的技术是阴影贴图（shadow map）。它常用于视频游戏，看起来不错而且速度很快。
阴影贴图是一种分两次执行的技术：
- 首先从光的角度来将 3D 场景的深度渲染到纹理中。该纹理将包含所有片段深度（光源和片段之间的距离）。该纹理称为阴影贴图。
- 然后在渲染 3D 场景时使用阴影贴图。当在屏幕上绘制片段时，我们可以从阴影贴图中知道光源和当前片段之间是否有遮挡。如果有遮挡，我们知道我们的片段位于阴影中，我们就应该将其画得更暗一些。
这种技术在大多数情况下效果很好。它可以处理场景中任何类型的非结构化网格。
我的第一个想法是，我可以对水体焦散执行类似的方法，这意味着首先在纹理中渲染水下环境，并使用该纹理来计算光线与环境之间的交集。我不仅渲染片段深度，还渲染环境贴图中的片段位置。
这是环境贴图结果：
如何计算光线/环境交集
现在我有了水下环境贴图，我需要计算折射光线与环境之间的交集。
该算法的工作原理如下：
- 步骤 1：从光线与水面的交点开始
- 步骤 2：使用 refract 函数计算折射
- 步骤 3：从当前位置沿折射光线的方向移动环境贴图纹理的一个像素
- 步骤 4：将注册的环境深度（存储在当前环境纹理像素中）与当前的深度进行比较。如果环境深度大于当前深度，则意味着我们需要折射得更远，因此我们再次应用步骤 3。如果环境深度小于当前深度，则意味着光线击中了我们读取的位置的环境纹理，相当于找到了与环境纹理的交集。
焦散纹理
一旦找到交点，我们就可以使用 Evan Wallace 在他的文章中解释的技术来计算焦散强度（和焦散强度纹理）。生成的纹理如下所示：
该纹理包含 3D 空间每个点的光强度信息。然后，我们可以在渲染最终场景时从焦散纹理中读取该光强度，并得到以下结果：
