从游戏特效到AR滤镜：光线反射折射的向量计算，在Unity/Three.js里到底怎么用？
从游戏特效到AR滤镜：光线反射折射的向量计算实战指南
在游戏开发和AR应用领域，光线反射与折射效果是提升视觉真实感的关键技术。无论是《赛博朋克2077》中湿润街道的倒影，还是Instagram滤镜里动态扭曲的虚拟眼镜，背后都离不开对反射/折射向量计算的精准控制。本文将深入解析这些数学原理在Unity和Three.js中的实际应用，帮助开发者跨越理论到实践的鸿沟。
1. 反射与折射的数学本质
1.1 反射向量的几何原理
反射现象遵循"入射角=反射角"的基本定律。在向量计算中，反射向量R可通过入射向量I和表面法线N表示为：
R = I - 2 * dot(N, I) * N这个简洁的公式在Shader中极为常见。以水面倒影为例，当光线以30度角入射时，反射光线会精确地以相同角度对称射出，这正是现实中镜面反射的表现。
1.2 折射向量的物理模型
折射计算更为复杂，需要考虑介质折射率（n₁/n₂）。斯涅尔定律的向量形式为：
float ratio = n₁ / n₂; float cosθ = dot(N, I); float k = 1.0 - ratio² * (1.0 - cosθ²); T = ratio * I - (ratio * cosθ + sqrt(k)) * N当k为负数时（全反射情况），需要特殊处理。这种现象在从水下看向水面时尤为明显——当视角超过临界角时，水面会变成完美的镜子。
2. Unity引擎中的实现方案
2.1 内置Shader函数解析
Unity提供了现成的反射/折射计算函数：
// 反射计算 float3 reflectDir = reflect(-viewDir, normal); // 折射计算 float3 refractDir = refract(-viewDir, normal, _IOR);注意：传入的视角方向需要取反，因为Unity中viewDir通常指向相机而非光线方向
2.2 水面反射实战案例
创建逼真水面需要组合多种技术：
- 反射探针：捕获环境立方体贴图
- 平面反射：实时渲染镜像世界
- 法线扰动：使用噪声纹理模拟波纹
// 水面Shader核心代码片段 float3 viewDir = normalize(WorldSpaceViewDir(v.vertex)); float3 reflectDir = reflect(-viewDir, normal); float3 refractDir = refract(-viewDir, normal, _WaterIOR); float4 reflection = texCUBE(_ReflectionCube, reflectDir); float4 refraction = tex2D(_GrabTexture, screenPos + refractDir.xy * _Distortion);2.3 性能优化技巧
| 技术 | 适用场景 | 性能消耗 |
|---|---|---|
| 屏幕空间反射(SSR) | 室内场景 | 中等 |
| 平面反射 | 平坦表面 | 较高 |
| 立方体贴图反射 | 静态环境 | 低 |
3. Three.js的Web端实现
3.1 着色器材质配置
在Three.js中创建自定义折射材质：
const material = new THREE.ShaderMaterial({ uniforms: { cubeTexture: { value: envMap }, ior: { value: 1.5 } }, vertexShader: `...`, fragmentShader: ` uniform samplerCube cubeTexture; uniform float ior; void main() { vec3 refractDir = refract(normalize(-vViewPosition), normal, 1.0/ior); gl_FragColor = textureCube(cubeTexture, refractDir); } ` });3.2 AR滤镜特效实现
社交媒体滤镜常用的扭曲效果，本质是折射计算的变体：
// 伪3D扭曲效果 vec2 distortUV = uv + (normal.xy * 0.1 * sin(time)); vec4 color = texture2D(inputTexture, distortUV);这种技术被广泛应用于虚拟试妆、眼镜特效等场景，通过简单的法线扰动就能产生令人信服的立体感。
4. 常见问题与进阶技巧
4.1 高频问题排查
- 边缘黑边：通常由全反射未正确处理导致，增加边缘渐变过渡
- 性能卡顿：避免每帧更新反射探针，使用混合静态/动态方案
- 移动端闪退：检查是否启用了不支持的特效如SSR
4.2 高级效果组合
- 焦散效果：叠加折射光路与投影纹理
- 动态折射率：通过脚本控制实现液体混合效果
- 屏幕空间折射：结合深度纹理提升精度
// C#动态控制折射率示例 void Update() { float lerpFactor = Mathf.PingPong(Time.time, 1.0f); material.SetFloat("_IOR", Mathf.Lerp(1.3f, 1.5f, lerpFactor)); }5. 现代渲染管线适配
5.1 URP/HDRP中的实现差异
在Unity的可编程渲染管线中，反射计算需要适配新的API：
// URP中的反射采样 #if defined(_REFLECTION_PROBE_BLENDING) half3 reflection = GlossyEnvironmentReflection(reflectDir, perceptualRoughness, 1.0); #else half3 reflection = GlossyEnvironmentReflection(reflectDir, perceptualRoughness); #endif5.2 光线追踪方案
新一代硬件支持的光追反射提供了更精确的结果：
RayDesc ray; ray.Origin = worldPos; ray.Direction = reflectDir; ray.TMin = 0.001; ray.TMax = 100.0; RayIntersection rayIntersection; TraceRay(_AccelerationStructure, RAY_FLAG_NONE, 0xFF, 0, 1, 0, ray, rayIntersection);这种技术虽然性能消耗大，但在高端设备上能实现电影级的光影效果。