SHADER · 单文件 HTML
卡通阶梯光照(Toon)Toon shading material
在片元着色器里把 N·L 量化成 3–4 阶,得到卡通渲染。
旗舰完整演示
可交互场景(拖拽旋转;部分演示支持键盘)。下方提示词用于让 Agent 生成同级成品。
预期产出 · Returns
单 HTML:球体与方块使用 Toon ShaderMaterial,可 uniform 调节阶数与描边(可选)。
适合用在哪
轻量游戏风、插画感 3D、教育演示。
容易踩的坑
- 未归一化法线在 toon 阶跃上会出黑斑。
提示词 · Prompt
单文件 HTML:自定义 ShaderMaterial 实现 toon shading:
1) 传入 normalMatrix、directional light direction;
2) ndotl 经 step/smoothstep 离散成 3 档颜色;
3) 可选:外轮廓用背面扩张法或 second pass(简述即可);
4) 两个 mesh 展示效果;
5) GLSL 与 three r16x 兼容,中文注释每个步骤。
完整 index.html。
Single HTML toon ShaderMaterial with quantized NdotL, Chinese commented GLSL.