2.3玻璃工坊

iOS 的磨砂面板、装修里大火的长虹玻璃(格栅玻璃)、淋浴房挂满水珠的雾面——这些「透过玻璃看世界」的质感,是 UI 设计的高级感担当。而在 Shader 眼里,它们是同一个把戏的三种变体:玻璃从不改变颜色,它只是让每个像素「看错位置」。

1玻璃 = 会撒谎的 UV

光穿过玻璃会发生折射:表面法线歪一点,光线路径就偏一点,你看到的就不是正后方的东西,而是旁边某处的东西。物理公式是斯涅尔定律,但 Shader 里我们只取它的视觉本质:

// 玻璃效果的全部本质:
// 表面在这一点越"歪"(法线偏移越大),采样位置就偏得越远
vec2 normal2D = 玻璃表面在此处的倾斜方向;   // ← 三种玻璃只有这里不同
vec3 color = texture(uTex, uv + normal2D * strength).rgb;

于是三种玻璃的区别,完全落在「表面倾斜(法线)怎么分布」上:

2毛玻璃:随机的谎言

毛玻璃表面的微观凸起完全无序——1.5 章的 hash 正好就是「逐像素随机」。每个像素往随机方向偏移采样,再多采几次取平均(不然是噪点而不是磨砂),最后兑一点白色模拟乳浊感:

3格栅玻璃:规律的谎言

格栅玻璃(长虹玻璃/Reeded Glass)的表面是一排竖向半圆柱。圆柱面的法线有个漂亮的性质:在条纹中心指向正前(不偏移),越靠条纹边缘越向侧面倾斜(偏移越大)。所以每根条纹内部,图像被「横向挤压再展开」,而竖直方向完好无损——这就是它标志性的竖条纹朦胧:

拆开看只有三笔:法线折射(核心)、固定位置的高光条(圆柱面总有一个角度恰好把光反进你眼睛)、柱缝暗线。后两笔不参与折射,纯粹是「材质细节」,但删掉它们,效果立刻从「长虹玻璃」退化成「波浪扭曲」——质感藏在光影细节里,不在扭曲本身,这是效果工坊最重要的一课。

4水珠玻璃:圆形的谎言

淋浴房玻璃 = 平坦区域(轻磨砂)+ 散落的水珠(球面透镜)。球面透镜的性质:珠子里是周围景象的缩小倒像。用 1.3 章的网格 + 1.5 章的 hash 撒珠子,珠内做「反向放大采样」:

5通用配方:法线场思维

回看三种玻璃,配方完全一致,可以抽象成一个统一框架——这也是你自己发明新玻璃的模板:

// ① 描述表面:每个位置的"倾斜方向"(2D 法线场)
vec2 n = surfaceNormal(uv);     // 毛玻璃=hash / 格栅=柱面 / 水珠=径向

// ② 折射:按法线偏移采样(可多次采样平均)
vec3 col = texture(uTex, uv + n * strength).rgb;

// ③ 材质细节:高光、暗缝、乳浊、薄雾 —— 质感的来源
col += specular(uv);  col = mix(col, milk, fog);

用这个框架自造效果:法线换成 1.5 章的 fbm 梯度 → 熔化的冰面;法线取自另一张纹理(比如文字图)→ 「浮雕玻璃 logo」;法线随 uTime 流动 → 热浪空气扭曲。第③步永远别省——那是质感的一大半。