guofeng-threejs

# 国风 Three.js 渲染 **定位说明**：通用 Three.js 教程已经很多（英文社区有大量高质量资源）。 这个技能只做一件他们不做的事——**中式美学的实时渲染**。 ## 什么时候用 中国风官网 / 文旅 H5 / 品牌活动页 / 水墨风交互 / 国风游戏原型 / 非真实感渲染（NPR）。 **不适用**：通用 3D 建模、物理仿真、写实渲染——那些去看 Three.js 官方文档更好。 ## 先问清楚 1. **载体**（PC 官网 / 手机 H5 / 微信内嵌）—— 决定性能预算 2. **要哪种中式质感**（水墨 / 青绿山水 / 敦煌壁画 / 剪纸皮影） 3. **有没有模型**（有 glTF？还是用几何体？） 4. **动效需求**（自动旋转 / 跟随鼠标 / 滚动驱动） > ⚠️ **移动端警告**：Three.js + 自定义 shader 在中低端安卓上会明显发热掉帧。 > H5 项目务必先确认目��机型，必要时降级为静态图。 ## 水墨渲染的三个核心 水墨效果不是加个滤镜，是**三件事的组合**： ### 1️⃣ 墨分五色 —— 色阶量化 真实光照是连续的，水墨是**分层**的。把明暗量化成 5 阶： ```glsl 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 压深 毛笔在轮廓处停留更久，墨更浓。用视线与法线夹角模拟： ```glsl 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️⃣ 笔触扰动 —— 噪声打破机械感 纯数学量化的边界太整齐，不像手绘。**在量化前扰动光照值**： ```glsl float n = noise(vP * 5.5 + uTime * 0.06); lam += (n - 0.5) * 0.16; // 扰动幅度别超过 0.2 ``` 再叠一层细噪声当宣纸颗粒： ```glsl col *= 0.97 + 0.03 * noise(vP * 40.0); ``` ## 青绿山水：和工笔只差一个参数 这个方案**没有引入任何新技术**——描边用的是和 `gongbi-demo.html` 完全同一套反向外壳， 连代码都一样。唯一的差别是 `uLine` 传进去的是**暖金**而不是墨黑。 但气质完全不同。demo 里的「墨线对照」档就是为了证明这件事： 同样的山、同样的青绿配色，只换线色，「金碧山水」的贵气立刻消失。 **「金碧山水」这个名字，就是从那条金线来的。** ### 石青石绿要按海拔映射，不是按明暗 这是青绿山水的固定语法：**山脚石绿、山顶石青**。不是随机分色，也不是用明暗分： ```glsl // 顶点着色器里把世界坐标传出来 vW = (model...