英文专业的网站设计,跨境电商app,wordpress 禁止过滤,外贸网站演示知乎视频www.zhihu.com采用 WebGL 和 ThreeJS 运行实时焦散运算#xff0c;需要一点相关基础。本文主要介绍焦散的原理以及计算方法原作者https://github.com/martinRenougithub.com代码和原文https://github.com/martinRenou/threejs-causticsgithub.com由于本人的笔电…知乎视频www.zhihu.com采用 WebGL 和 ThreeJS 运行实时焦散运算需要一点相关基础。本文主要介绍焦散的原理以及计算方法原作者https://github.com/martinRenougithub.com代码和原文https://github.com/martinRenou/threejs-causticsgithub.com由于本人的笔电还在维修中所以带中文注释的代码要后续补上了什么是焦散 caustics焦散是光从表面在我们的情况下是空气/水界面折射和反射时出现的光的模式。由于在水波上发生反射和折射水起了动态放大镜的作用形成了这些光的图案。本文中主要讨论由光的折射引起的焦散主要是水下发生的事情。为了能够得到稳定的 60 帧使用 GLSL 编写的 shaders 在 GPU 上计算。为了计算焦散我们需要• 计算水面的折射光线GLSL 中有内置函数• 求交算法计算光线照射到环境的位置• 通过检查光线会聚的位置来计算焦散强度创建环境图当涉及动态阴影计算时一种众所周知的技术是阴影映射 shadow mapping。通常在视频游戏中使用效果好且速度快。阴影映射是一项两步运行的技术• 从光的角度看3D 场景首先在纹理中渲染。 该纹理将包含所有片段的深度光源和片段之间的距离而不是包含片段的颜色。 此纹理称为阴影贴图 shadow map。• 然后在渲染 3D 场景时使用阴影贴图。在屏幕上绘制片段时我们可以从阴影图中知道光源和当前片段之间是否还有另一个片段。如果是这种情况则该片段在阴影中应该将其绘制得更暗一些。可以对水体焦散运行类似的方法首先在纹理中渲染水下环境然后使用该纹理来计算光线与环境之间的交点。 除了渲染片段深度之外还渲染了环境图中的片段位置RGB 信道存储 XYZ 位置alpha 信道存储深度计算光线与环境的交点现在有了水下环境图需要计算折射光线与环境之间的交点。算法如下1. 从光线与水面的交点开始2. 使用折射函数计算折射3. 从当前位置沿折射射线方向移动环境图纹理的一个像素4. 将存储在当前环境纹理像素中的环境深度与当前深度进行比较。如果环境深度大于当前深度则意味着我们需要走得更远因此我们再次运行步骤 3。如果环境深度小于当前深度则意味着光线在您从中读取的位置击中了环境。焦散纹理一旦找到交点就可以使用 Evan Wallace 在其文章中提到的技术来计算焦散强度和焦散强度纹理。 产生的纹理如下所示该纹理包含 3D 空间每个点的光强度信息。当渲染最终场景时我们可以从焦散纹理中读取此光强度并得到以下结果其他本文重点讨论焦散的计算但此 demo 中还有其他技术。关于水面渲染使用了天空盒纹理和立方体贴图进行反射。还使用简单的屏幕空间折射请参阅有关屏幕空间反射和折射的这篇文章在水面上应用了折射该技术在物理上不是正确的但在视觉上吸引人且快速。 此外添加了色差以提高真实感。后续会介绍下前面焦散纹理的生成方法以及简单解读下原代码以及 ThreeJS 的使用
