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); ``` ## 工笔：勒线才是骨架 工笔和水墨的差别不在"画得细"，在于**它是线主导的**。所以除了把色阶从 5 阶提到 9 阶、 把墨换成矿物色之外，真正的难点是那条线怎么画。 ### 描边的三条路，两条走不通 按 SKILL.md 的性能建议「能在材质里做的就在材质里做」，先试了材质内的两种做法： | 做法 | 结果 | |------|------| | `fwidth(N)` 检测法线突变画结构折边 | ❌ **光滑有机形体上基本无效**。这类形体没有硬转折，`length(fwidth(N))` 全场趋近 0，调阈值救不回来 | | rim（`1 - dot(N,V)`）压出轮廓暗边 | ❌ 能压出边，但...