Three.js 实现毛玻璃效果并扭曲背景文字的方案求助

实现方案 #

你要的效果不需要用到复杂的多边折射技术，通过「离屏背景采样+噪声偏移+局部高斯模糊」的组合逻辑就能实现，开发成本低性能也更好，具体实现步骤如下：

• 第一步：把你已经实现好的跑马灯背景层单独渲染到一张离屏纹理（FrameBuffer/RenderTexture）中，再将这张纹理作为uniform传入上层需要添加毛玻璃效果的geometry的材质着色器。
• 第二步：实现背景扭曲效果
  在毛玻璃材质的片元着色器中，先用片元对应的屏幕坐标采样一张平铺的柏林噪声纹理，将噪声的R/G通道值乘以0.02~0.05的系数作为uv偏移量，再用偏移后的uv采样背景离屏纹理，即可得到扭曲后的背景内容，调整系数大小可以控制扭曲的幅度。
• 第三步：实现毛玻璃效果
  对偏移采样得到的背景像素做3x3/5x5的小范围高斯模糊，调整模糊核的半径和权重即可控制毛玻璃的通透程度，不需要做全屏幕大模糊，性能开销很低。

更简便的引擎内置方案 #

如果你用的是Three.js等支持PBR材质的渲染引擎，可以直接调用内置的透射材质能力，不需要自己写完整的着色器逻辑：
给目标geometry使用MeshPhysicalMaterial材质，调整以下参数即可：

• transmission 设置为0.8~1，开启透射效果，引擎会自动完成背景采样
• roughness 设置为0.3~0.7，控制毛玻璃的模糊程度
• 给材质添加一张低精度的normalMap，法线的起伏会自动控制背景的扭曲幅度，不需要自己写噪声偏移逻辑

注意：不要仅通过调整基础材质的透明度参数实现，普通的alpha混合只能做到前景和背景的颜色加权叠加，无法实现背景扭曲和毛玻璃的模糊效果。

内容的提问来源于stack exchange，提问作者anon