色阶量化
把连续的 Lambert 光照压成五档，让明暗像墨色层次而不是平滑塑料。
floor(lam × 5) / 4GUOFENG THREE.JS · 真实运行证据
水墨不是
一层滤镜。
把连续光照压成五阶墨色，在轮廓积墨，再用噪声打破机械边界。这里展示可运行实现、已观察数据与尚未验证的移动端风险。
r170本次加载的 Three.js
2draw calls
14,496triangles
1shader program
0WebGL error
01 / 技法
三步做出水墨层次
这些是 Demo 中可直接核对的实现构件，不是对所有水墨 NPR 方法的完整分类。
边缘积墨
用视线与法线夹角提取轮廓区，把边缘压回浓墨。
smoothstep(.45, .95, rim)笔触噪声
在量化前扰动光照，并叠加细颗粒，破除纯数学边界。
noise(vP × 5.5 + time)02 / 证据
观察到什么，不外推什么
2026-08-12 在本机 Chrome 重新运行单文件 Demo，读取页面公开的 renderer 数据；没有把静态源码检查写成运行结果。
本次观察到
- Three.js revision 170 正常加载
- 2 draw calls、14,496 triangles、1 个 program
- WebGL error 为 0，水墨/青绿/朱砂切换正常
- 页面控制台没有捕获到错误
仍未验证
- 中低端 Android 的帧率与温升
- 微信 WebView 和不同 GPU 驱动的一致性
- 长时间运行的内存与电量表现
- 真实项目模型、后处理和多材质场景
运行时网络：两个 Demo 通过 import map 从
unpkg.com 加载固定版本 three@0.170.0。这项依赖已在质量标签中披露；生产使用应评估自托管、CSP、离线与供应链要求。03 / Demo
渲染与开场，分开验证
一个展示材质本身，一个展示不阻塞正文的开场覆盖层。截图来自真实浏览器运行，不代表所有设备都得到相同画面。
安装后，先用小任务验证。
不要直接把未经真机测试的 shader 放进生产 H5。先让客户端审查三项技法、目标机型和降级方案，再运行 Demo。
npx skills add https://github.com/sanhuang520-ship-it/awesome-chinese-ai-tools --skill guofeng-threejs