最后
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
给大家分享一些关于HTML的面试题。
现在要制作焦散，就要回到上面说到的理论了，首先要计算出折射光线与物体的交点。如果按照纯物理方式来计算，这个方法计算量非常大。所以想要一种简单有效，虽然不符合物理规律但是能够快速模拟的效果。想想阴影不就是利用阴影贴图的原理，从光源位置看场景中的物体，先得到一张深度贴图，然后在实际渲染时，比较每个像素的深度在光源相机坐标系下的深度来判定是否在阴影中。
这里其实利用了类似的思路，先渲染一张环境纹理。在纹理中渲染水下环境，然后使用该纹理来计算光线与环境之间的交点。除了渲染片段深度之外，还渲染了环境图中的片段位置，RGB 信道存储 XYZ 位置，alpha 信道存储深度：
先对照代码来看环境部分，这里是把上面说的物体都加入到了环境中去：
这里的顺序也注意一下，environmentMap没有添加到scene中，他是自己单独渲染到fbo中。
environment顺序在前，water顺序在后。
设置完初始环境之后，给水面加几个小的震动模拟水面波动效果
接着进入主渲染逻辑
先看这部分，挺麻烦的。
一、根据drop生成波动纹理，将波动纹理传递给water作为渲染用。
drop方面涉及的知识点看另一篇文章，这里不赘述
文档：水波渲染demo.note
链接：http://note.youdao.com/noteshare?id=1697c823a2e1270dc6c5bd092252c2c4&sub=1641A27DB586489B8A5A97FEFB3C167A
二、生成上文所说的环境纹理，RGB 信道存储 XYZ 位置，alpha 信道存储深度：
需要注意这里存贮的坐标是世界坐标系，所以这里的纹理也应该是浮点纹理。
顶点着色器：
片元着色器：
image.png
现在将水下环境渲染到了纹理中，然后使用该纹理来计算光线与环境之间的交点
三、渲染得到纹理之后将水波的waterSimulation纹理和环境纹理传递给焦散渲染成焦散纹理
上文说到要计算焦散，先要计算光线与环境的交点。这里的方式如下：
-
计算光纤与水面的交点（如果是逐顶点计算，那么每个方格顶点就是交点；如果是逐像素计算需要计算每个像素对应的水面点位置，其实也不难）
-
计算光线在水内部的折射光线（知道光线向量、水面法线向量，glsl有内置函数来计算）
-
从当前位置沿折射射线方向移动环境图纹理的一个像素（这里是不太好理解，射线是三维向量，纹理是二维图片，这里利用了一种方式将射线方向映射到二维纹理中）
-
将存储在当前环境纹理像素中的环境深度与当前深度进行比较。如果环境深度大于当前深度，则意味着我们需要走得更远，因此我们再次运行步骤 3。如果环境深度小于当前深度，则意味着光线在您从中读取的位置击中了环境
-
找到交点之后利用这篇文章中的技术来计算焦散强度，生成焦散纹理（https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c），这个纹理包含3D空间中每个点焦散光照强度信息。
-
进行最后的环境渲染时，从焦散纹理中读取光照强度信息来进行渲染
下面进行焦散渲染的着色器处理解析
顶点着色器：
片元着色器：
这里片元着色器的那两个面积比率，就是对应开头图片中光线的汇合和散开现象，可以看到当newArea的面积越小强度越大，面积越大强度越低，这也比较符合认知。
四、根据焦散强度渲染水下环境
下面将焦散纹理传递给environment
environment中有几个物体：水的三角网（waterGeometry）、水地面图形（floorGeometry）、鲨鱼（shark）、两块石头（rock1、rock2）、水草植物（plant）、天空盒（skybox）
下面部分先将水波设置为不可见，然后渲染整体场景
来看下水下environment的顶点着色器和片元着色器
这里的positon是environment中的几个模型的顶点坐标
顶点着色器：
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
png “image.png”)
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-C78fsOFI-1715387363442)]
[外链图片转存中…(img-Hygy1IzT-1715387363443)]
扫一扫
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
