dispersion
dispersion
创建一个名为 `dispersion` 的浮点型属性,用于在 TSL 材质上暴露一个易于控制的参数,常用于控制色散(彩虹色分离)等效果的强度。
核心优势
提供了极其简洁直观的 `material.dispersion = value` API,将底层的 Uniform 机制完全抽象化,让自定义材质拥有与 Three.js 内置材质同等优秀的开发者体验和可读性。
常见用途
控制玻璃或钻石等材质的色散(Chromatic Dispersion)效果强度。
调节后处理中色差(Chromatic Aberration)滤镜的强度。
作为任何自定义效果(如溶解、湿润度)的通用强度或混合因子。
作为可被动画库(如 GSAP)直接驱动的参数,轻松创建动态材质。
如何调整
在 JavaScript 中直接修改 `material.dispersion` 的数值。值为 0 时无效果;一个较小的值(如 0.1)会产生微妙、真实的彩虹色边纹;一个较大的值(如 0.8)则会产生夸张、风格化的光谱分离效果。
代码示例
1// 基于 dispersion 值,在不同偏移位置采样 R, G, B 通道
2const r = texture( sourceTexture, uv.sub( dispersion * 0.01 ) ).r;
3const g = texture( sourceTexture, uv ).g;
4const b = texture( sourceTexture, uv.add( dispersion * 0.01 ) ).b;
5
6// 重新组合成带有色散效果的颜色
7const finalColor = vec3( r, g, b );