水面倒影效果：镜面蒙版+垂直翻转的镜像玩法

一、倒影为什么“假”：成像链路一致性主线

先抛一个观察：把同一张风景照的倒影部分交给十个人做，九个人会得到“一眼假”的结果。假在哪里？不是翻转错了，也不是透明度没调好，而是倒影与主体之间缺少一条自洽的成像链路。真实水面的倒影，是同一束光经过水面反射后进入相机，它和主体共享同一套光照、同一套相机参数、同一套介质衰减。而手工合成的倒影，往往是主体图层的一次“廉价复制”，光照、透视、衰减全部对不上。

笔者认为，倒影效果的所有技术细节，都可以归入四个环节：几何变换（Geometry）、光学衰减（Optics）、动态扰动（Dynamics）、材质融合（Blending）。这四个环节构成一条链路，任一环节断裂，倒影就会“假”。这条“成像链路一致性”主线，将贯穿本文全部章节——每引入一个技术点，我们都追问它作用于链路的哪一环、破坏了哪一环、又该如何补偿。

需要说明的是，这条主线并非笔者凭空构造。计算机图形学中经典的平面反射（Planar Reflection）渲染流程，本身就包含反射矩阵、反射纹理采样、法线扰动、混合四个阶段^[1][2]，与上述四环节高度对应。本文的贡献在于把它从“渲染管线术语”翻译成“图像合成可操作参数”，并补齐了 AI 生成时代的一致性评估视角。

二、物理光学基础：菲涅尔反射与水面几何

2.1 反射率不是常数：菲涅尔效应

很多人做倒影时把水面当成一面“半透明镜子”，透明度设成 50% 就完事。这在物理上是错的。水面反射率随入射角变化，这就是菲涅尔效应。垂直俯视水面（入射角接近 0°）时，水的反射率约为 2%；而当视线几乎与水面平行（掠射角接近 90°）时，反射率趋近 100%^[3][4]。

这个数字意味着什么？意味着你站在湖边平视远方，远处的倒影几乎和实物一样亮，而脚下近处的水面几乎透明。这正是真实倒影“近淡远浓”的物理根源。本文评述：绝大多数三步走教程用的线性渐变蒙版，方向恰好搞反了——它们让倒影从水岸线向下逐渐变淡，而真实水面是越远（越接近地平线）越清晰。这个方向性错误，是“一眼假”的头号原因。

R(θ) = R₀ + (1 − R₀)(1 − cosθ)⁵
R₀ = ((n₁ − n₂)/(n₁ + n₂))² = ((1−1.333)/(1+1.333))² ≈ 0.02

θ = 0°   → R ≈ 2%
θ = 60°  → R ≈ 9%
θ = 80°  → R ≈ 35%
θ = 89°  → R ≈ 98%

2.2 水面几何：倒影的“翻转轴”在哪里

镜面反射的几何本质是：物体上一点 P 经平面反射后，成像点 P' 与 P 关于反射平面对称。对水面倒影而言，反射平面就是水面，翻转轴就是水岸线（waterline）。这里有个容易被忽略的细节：如果相机不是水平拍摄，水面在画面中呈现为一条斜线甚至曲面，此时简单的垂直翻转会产生透视错误。

严格的平面反射需要构造反射矩阵。设水面平面为 y = h，则反射变换为 y' = 2h − y。在相机空间中，这等价于对视图矩阵做一次镜像。实时渲染中常用“镜像相机”技术：把相机关于水面镜像，渲染一遍场景得到反射纹理，再投影回水面^[1][6]。笔者认为，对于二维图像合成，我们无法真正重渲场景，但可以借鉴其思想：先确定水岸线的位置与角度，再做带透视校正的翻转，而不是无脑垂直翻转。

三、几何变换：垂直翻转的数学与边界陷阱

3.1 垂直翻转的坐标表达

在图像坐标系中（原点左上，y 向下），关于水平线 y = h 的翻转可写为：

y' = 2h − y
x' = x

矩阵形式（齐次坐标）：
[1   0   0]
[0  −1  2h]
[0   0   1]

CSS 的 transform: scaleY(-1) 默认以元素中心为原点翻转，等价于 h = height/2。如果水岸线不在元素中心，就必须配合 transform-origin 调整，否则翻转轴错位，倒影与主体之间会出现缝隙或重叠。

3.2 三个高频边界陷阱

1. 翻转轴错位：主体底部与水岸线不重合，导致倒影“浮”在水面上方或沉入水下。解决：以主体最低点或实际水岸线为翻转轴。
2. 透视不一致：相机俯拍时，倒影应比主体更“压缩”。简单垂直翻转保留了主体的透视，导致倒影过长。解决：对倒影做纵向缩放（通常 0.6–0.9），或使用透视变换。
3. 裁切溢出：翻转后倒影超出画布，被容器裁掉。解决：预留画布高度，或使用 overflow: visible 配合遮罩裁剪。

四、镜面蒙版：从线性渐变到物理衰减模型

4.1 线性渐变蒙版的局限

最常见的做法是给倒影图层加一个线性渐变蒙版，从水岸线处不透明渐变到下方全透明。这个做法简单，但存在两个问题：一是衰减曲线是线性的，不符合菲涅尔的非线性特征；二是渐变方向与真实水面相反（见 2.1 节）。

4.2 基于菲涅尔的衰减曲线

更接近物理的做法，是把蒙版的不透明度映射为“反射率随画面纵坐标的变化”。设画面纵坐标 v ∈ [0,1]（0 为画面顶部地平线，1 为画面底部近处），视线与水面的夹角随 v 增大而增大（越往下越接近垂直俯视）。用 Schlick 近似反推，可得到一条非线性衰减曲线。

上表数值为基于 Schlick 近似的模拟估算，实际拍摄中还需考虑水体浑浊度、天空亮度、曝光等因素^[7][8]。但方向是明确的：倒影蒙版应当是“上浓下淡”的非线性曲线，而非均匀或反向的线性渐变。

4.3 蒙版的三种工程实现

• CSS 方案：用 mask-image: linear-gradient()，通过多个色标模拟非线性曲线。
• Photoshop 方案：图层蒙版 + 曲线调整，或使用渐变工具配合“仿色”减少色带。
• Shader 方案：在片元着色器中直接计算菲涅尔项，物理最准确。

五、扰动层：噪声、波纹与法线贴图

5.1 为什么倒影必须有扰动

真实水面永远不是完美的镜面。微风吹过，水面产生毛细波，倒影随之扭曲、断裂、闪烁。完全没有扰动的倒影，看起来像玻璃或塑料，而不是水。本文评述：扰动层是倒影“活起来”的关键，也是区分业余与专业效果的分水岭。它作用于成像链路的“动态扰动”环节。

5.2 扰动的三种技术路径

位移贴图是最容易上手的方案：准备一张灰度噪声图，用它驱动倒影图层的像素位移。位移幅度建议控制在画面高度的 0.5%–2% 之间，过大则倒影破碎难辨，过小则看不出水感。噪声的空间频率也很关键——低频噪声产生大波浪，高频噪声产生细碎波纹，真实水面通常是多频叠加^[9][10]。

5.3 多频噪声叠加的工程参数

// 三层噪声叠加（模拟数据，基于常见水面观察经验）
layer1: 频率 1.0,  幅度 1.0,  速度 0.3   // 大波浪
layer2: 频率 3.7,  幅度 0.4,  速度 0.7   // 中波纹
layer3: 频率 11.3, 幅度 0.15, 速度 1.4   // 细碎波光

// 频率比接近无理数可避免周期性重复
// 幅度按 1 : 0.4 : 0.15 递减，接近 1/f 谱

六、工程实现一：CSS 与 Canvas 快速方案

6.1 CSS 纯声明式实现

对于网页中的图片倒影，CSS 可以在不引入任何 JS 的情况下完成基础效果。核心是 transform: scaleY(-1) 配合 mask-image。

.reflection {
  transform: scaleY(-1);
  transform-origin: top;          /* 以顶边为翻转轴 */
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.45) 30%,
    rgba(0,0,0,0.12) 60%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.45) 30%,
    rgba(0,0,0,0.12) 60%,
    rgba(0,0,0,0) 100%
  );
  filter: blur(1.5px) saturate(0.85);
}

注意 mask-image 的色标分布是非线性的，符合 4.2 节的衰减模型。blur 模拟水的柔化，saturate 降低饱和度模拟水体吸收。这两个滤镜是低成本提升真实感的利器。

6.2 Canvas 2D 动态扰动

如果需要动态波纹，Canvas 是更灵活的选择。基本思路是逐行采样原图，按正弦波偏移 x 坐标，再绘制到倒影区域。

function drawReflection(ctx, img, waterY, t) {
  const h = img.height;
  for (let y = 0; y < h; y++) {
    const amp = 6 * (1 - y / h);          // 越远振幅越大
    const freq = 0.04;
    const offset = Math.sin(y * freq + t * 0.05) * amp;
    ctx.drawImage(
      img,
      0, h - y - 1, img.width, 1,        // 源：倒序取一行
      offset, waterY + y, img.width, 1   // 目标：偏移绘制
    );
  }
}

这段代码的关键在于 amp 随 y 递减——越靠近水岸线（y 小）振幅越大，越远（y 大）越平缓。这与真实水面的波纹分布一致：近处波纹清晰可见，远处因透视压缩而趋于平滑。笔者认为，这种“透视相关的振幅衰减”是很多教程遗漏的细节，补上它，动态倒影的真实感会明显提升。

延伸阅读：MDN 的 CSS mask 文档^[11]、Canvas 2D API 参考^[12]，以及 CodePen 上的水面倒影合集^[13]，都是不错的起点。

七、工程实现二：Photoshop 非破坏性工作流

7.1 图层结构设计

专业修图的核心原则是“非破坏性”——任何一步都能回退、能调参。推荐的图层栈如下：

1. 底层：原图（智能对象）
2. 倒影层：原图智能对象副本，垂直翻转，纵向缩放 0.7–0.9
3. 蒙版层：倒影层自带图层蒙版，用渐变工具绘制非线性衰减
4. 扰动层：智能滤镜 → 波浪/置换，加载噪声置换图
5. 调色层：色相/饱和度（降饱和）、曲线（压暗、偏蓝）
6. 融合层：可选颜色或色彩平衡，让倒影色调向水体靠拢

7.2 置换滤镜的正确用法

Photoshop 的“置换”滤镜是模拟水面扰动的经典工具。它读取一张 PSD 格式的置换图，用其 R 通道控制水平位移、G 通道控制垂直位移。制作置换图时，建议用“云彩”滤镜生成基础噪声，再用“高斯模糊”柔化，最后用“色阶”控制对比度^[14][15]。

7.3 色调融合：让倒影“沉”进水里

真实倒影的色调与主体有微妙差异：水体吸收长波光，倒影偏青蓝；水面散射天空光，倒影整体偏亮偏冷。本文评述：很多合成倒影直接复制主体色调，导致倒影“浮”在水面上。正确的做法是给倒影层叠加一层水体色偏——通常是降低饱和度 15%–30%，色相向青蓝偏移 5°–15°，明度视水体浑浊度调整。

延伸阅读：Adobe 官方的置换滤镜教程^[16]、Phlearn 的水面倒影合成课程^[17]，以及国内站酷、B 站上的 PS 倒影实战视频^[18]。

八、工程实现三：GLSL 水面 Shader 与 WebGL

8.1 平面反射的标准管线

实时渲染中的水面倒影，标准做法是“镜像相机 + 反射纹理 + 法线扰动 + 菲涅尔混合”。具体步骤：

1. 构造关于水面平面的镜像相机矩阵
2. 用镜像相机渲染场景到 RenderTarget，得到反射纹理
3. 主相机渲染水面时，用屏幕空间坐标采样反射纹理
4. 用噪声法线扰动采样坐标，模拟波纹
5. 用菲涅尔项混合反射色与水体色

这套流程在 Unity、Unreal、Three.js 中都有成熟实现^[19][20][21]。Three.js 的 Reflector 组件封装了大部分逻辑，适合快速上手。

8.2 核心片元着色器

// 简化版水面片元着色器
uniform sampler2D uReflection;
uniform sampler2D uNormalMap;
uniform vec3 uWaterColor;
uniform float uTime;
varying vec2 vUv;
varying vec3 vViewDir;

void main() {
  // 1. 采样法线贴图，双频滚动
  vec2 uv1 = vUv + vec2(uTime * 0.02, uTime * 0.01);
  vec2 uv2 = vUv * 1.7 - vec2(uTime * 0.015, uTime * 0.008);
  vec3 n1 = texture2D(uNormalMap, uv1).rgb * 2.0 - 1.0;
  vec3 n2 = texture2D(uNormalMap, uv2).rgb * 2.0 - 1.0;
  vec3 normal = normalize(n1 + n2);

  // 2. 用扰动后的坐标采样反射纹理
  vec2 distort = normal.xy * 0.03;
  vec3 reflection = texture2D(uReflection, vUv + distort).rgb;

  // 3. 菲涅尔项（Schlick 近似）
  float cosTheta = max(dot(normal, vViewDir), 0.0);
  float fresnel = 0.02 + 0.98 * pow(1.0 - cosTheta, 5.0);

  // 4. 混合
  vec3 color = mix(uWaterColor, reflection, fresnel);
  gl_FragColor = vec4(color, 1.0);
}

这段代码把本文主线的四个环节全部落地：几何变换由反射纹理承载，光学衰减由菲涅尔项实现，动态扰动由法线贴图完成，材质融合由 mix 完成。笔者认为，理解这条对应关系，比记住任何具体代码都重要——它让你在换引擎、换语言时依然能快速迁移。

8.3 性能考量

九、AI 时代：扩散模型生成倒影与一致性评估

9.1 扩散模型能做什么

2023 年以来，基于扩散模型的图像生成与编辑技术快速成熟。Stable Diffusion 的 Inpainting、ControlNet 的深度/法线条件控制，让“给一张图加水”变得前所未有的简单^[22][23][24]。用户只需框选水面区域，输入提示词，模型就能生成带倒影的水面。

但 AI 生成的倒影有一个系统性问题：几何一致性难以保证。扩散模型擅长生成“看起来像水”的纹理，却不擅长精确维持倒影与主体的镜像对应关系。生成的倒影常常“形似而神不似”——有水感，但倒影内容与主体对不上。

9.2 一致性评估的量化思路

如何判断 AI 生成的倒影是否合格？可以从三个维度量化：

1. 几何一致性：用光流或特征点匹配，检验倒影与主体是否满足镜像关系。可用 SIFT/SuperPoint 提取特征点，计算翻转后的匹配误差^[25][26]。
2. 色彩一致性：计算倒影与主体在 Lab 空间的色差，真实倒影的 ΔE 通常在 5–20 之间（受水体吸收影响）^[27]。
3. 纹理自然度：用 FID 或 LPIPS 等感知指标，评估倒影区域的纹理分布是否接近真实水面数据集^[28][29]。

9.3 混合工作流：AI + 传统

实践中，最可靠的方案是“AI 生成 + 传统校正”：先用扩散模型生成水面纹理和扰动，再用本文第六至八节的几何变换与蒙版技术校正倒影的几何与光学一致性。这种混合工作流兼顾了 AI 的纹理生成能力与传统方法的精确控制^[30][31]。

延伸阅读：Hugging Face 的 Diffusers 文档^[32]、ControlNet 官方仓库^[33]，以及 ComfyUI 社区的水面工作流分享^[34]。

十、质量评估、性能优化与避坑清单

10.1 倒影质量自检清单

10.2 性能优化要点

• 静态图优先用 CSS mask，避免 JS 逐像素操作
• 动态效果用 Canvas 时，限制重绘区域为倒影矩形
• WebGL 中反射纹理分辨率取主画面的 1/2 或 1/4
• 移动端慎用实时平面反射，改用预烘焙反射贴图
• 噪声纹理预生成并缓存，避免每帧计算

10.3 避坑清单

1. 不要用纯黑或纯白做蒙版端点，会产生色带，改用接近但不等于的值
2. 不要在 sRGB 空间做线性插值，颜色会发灰，必要时转线性空间
3. 不要让倒影覆盖主体，图层顺序要正确
4. 不要在倒影上叠加过强的高光，会破坏水的通透感
5. 不要忽略水体本身的颜色，纯反射会显得像镜子

十一、结论与前沿预判

回到本文的主线：倒影效果的本质，是让合成结果在“几何变换—光学衰减—动态扰动—材质融合”四个环节上与真实成像链路保持一致。任何单点技巧（翻转、蒙版、噪声）都只是这条链路上的一个环节，孤立使用必然露馅。

面向未来，笔者做出三点预判：

1. 神经渲染接管反射：NeRF 与 3D Gaussian Splatting 已能重建场景的镜面反射^[35][36][37]，未来倒影可能不再需要手工合成，而是从三维重建中自然导出。
2. 物理引导的生成模型：把菲涅尔方程、波动方程作为可微分层嵌入扩散模型，让 AI 生成的倒影天然满足物理约束^[38][39]。
3. 实时全局光照普及：随着硬件光追下沉到移动端，屏幕空间反射（SSR）将逐步被更准确的路径追踪替代，倒影的真实度上限会被再次抬高^[40][41]。

但无论技术如何演进，那条成像链路一致性的主线不会变。理解了它，你就理解了倒影——无论用手绘、用代码，还是用 AI。

十二、参考文献与声明

主要参考文献（8 篇）

扩展文献索引（52 篇，节选编号）

注：上述文献中，2022–2024 年发表的文献占比超过 50%。涉及数据集的部分，本文引用的均为公开数据集或模拟计算结果，已在正文中标注。若读者需复现本文参数，建议以原始文献为准。