跳到正文
网页珍奇柜Web Curio

折射与色散的交互讲解

Refraction, dispersion, and other shader light effects,Maxime Heckel,2023 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步FBO:先把背景场景渲染到离屏纹理
  2. 第 2 步玻璃网格用法线计算 refract() 方向,偏移采样背景纹理
  3. 第 3 步对 R/G/B(及更多切片)使用不同折射率并多次采样实现色散
  4. 第 4 步叠加 Fresnel 与镜面高光,再加饱和度/色差微调

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Render everything behind the glass object into a render target each frame, then hide the backbuffer copy of the object. In the glass material's fragment shader, compute a refraction vector from the view direction and the surface normal, and sample the render target at screen UV plus that vector times a strength. For dispersion, loop over several slices with slightly different IOR values per channel and accumulate red, green and blue separately. Finish with a Fresnel term that blends in a reflection color and a Blinn-Phong highlight.

档案

能不能拿来用

原作不是开源许可(proprietary — inspiration only):只能作为视觉参考,不要复制它的代码或素材,自己按技术思路实现。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Blog post loads (200) with embedded interactive playgrounds; no source repo for the article — inspiration only.