guofeng-threejs

国风 Three.js 渲染

定位说明：通用 Three.js 教程已经很多（英文社区有大量高质量资源）。 这个技能只做一件他们不做的事——中式美学的实时渲染。

什么时候用

中国风官网 / 文旅 H5 / 品牌活动页 / 水墨风交互 / 国风游戏原型 / 非真实感渲染（NPR）。

不适用：通用 3D 建模、物理仿真、写实渲染——那些去看 Three.js 官方文档更好。

先问清楚

1. 载体（PC 官网 / 手机 H5 / 微信内嵌）—— 决定性能预算
2. 要哪种中式质感（水墨 / 青绿山水 / 敦煌壁画 / 剪纸皮影）
3. 有没有模型（有 glTF？还是用几何体？）
4. 动效需求（自动旋转 / 跟随鼠标 / 滚动驱动）

⚠️ 移动端警告：Three.js + 自定义 shader 在中低端安卓上会明显发热掉帧。 H5 项目务必先确认目标机型，必要时降级为静态图。

水墨渲染的三个核心

水墨效果不是加个滤镜，是三件事的组合：

1️⃣ 墨分五色 —— 色阶量化

真实光照是连续的，水墨是分层的。把明暗量化成 5 阶：

float lam = max(dot(N, normalize(uLight)), 0.0);
float steps = 5.0;
float q = floor(clamp(lam, 0.0, 1.0) * steps) / (steps - 1.0);
vec3 col = mix(uInk, uPaper, q);   // 浓墨 → 纸白

阶数太多（>8）失去水墨感，太少（<3）像色块。5 阶是甜点。

2️⃣ 边缘积墨 —— rim 压深

毛笔在轮廓处停留更久，墨更浓。用视线与法线夹角模拟：

float rim  = 1.0 - max(dot(N, normalize(vV)), 0.0);
float edge = smoothstep(0.45, 0.95, rim);
col = mix(col, uInk, edge * 0.85);

3️⃣ 笔触扰动 —— 噪声打破机械感

纯数学量化的边界太整齐，不像手绘。在量化前扰动光照值：

float n = noise(vP * 5.5 + uTime * 0.06);
lam += (n - 0.5) * 0.16;          // 扰动幅度别超过 0.2

再叠一层细噪声当宣纸颗粒：

col *= 0.97 + 0.03 * noise(vP * 40.0);

青绿山水：和工笔只差一个参数

这个方案没有引入任何新技术——描边用的是和 gongbi-demo.html 完全同一套反向外壳， 连代码都一样。唯一的差别是 uLine 传进去的是暖金而不是墨黑。

但气质完全不同。demo 里的「墨线对照」档就是为了证明这件事： 同样的山、同样的青绿配色，只换线色，「金碧山水」的贵气立刻消失。 「金碧山水」这个名字，就是从那条金线来的。

石青石绿要按海拔映射，不是按明暗

这是青绿山水的固定语法：山脚石绿、山顶石青。不是随机分色，也不是用明暗分：

// 顶点着色器里把世界坐标传出来
vW = (modelMatrix * vec4(position, 1.0)).xyz;

// 片元着色器：按 y 取海拔，归一化范围要贴合实际山高
float alt = clamp((vW.y + 1.45) / 3.05, 0.0, 1.0);
alt = smoothstep(0.08, 0.92, alt);
vec3 base = mix(uLow, uHigh, alt);   // uLow=石绿, uHigh=石青

⚠️ 归一化范围一定要贴合实际模型高度。初版系数没对上，alt 大部分时间挤在中段， 青绿两色根本分不开，看着就是一片墨绿。

金不只在线上，也在山脊

除了描边，受光的山脊再敷一层金粉，「金碧」才立得住：

float ridge = smoothstep(0.72, 0.98, lam) * smoothstep(0.35, 0.8, alt);
col = mix(col, uLine, ridge * uGold * 0.42);

uGold = 0 时这条完全不生效，正好用来做墨线对照档。

又栽了一次的坑