CLAUDE FABLE 5.2 + THREE.JS：浏览器中可步行的吉卜力风格山谷，开源，13 MB

painted valley 是一个你可以漫步的山谷，基于 WebGL2 的 three.js。代码采用 MIT 协议，艺术素材采用 CC0 协议。

大多数“吉卜力风格”演示都是在游戏上叠加一层滤镜。而这个没有滤镜：

核心理念：一幅绘画背景之所以看起来像画，是因为它省略了某些东西。没有照片纹理，没有各尺度的噪点，色调很少，细节仅出现在画笔会落笔的地方。

据作者称，该项目使用 claude fable 5.2 制作。我梳理了其工作原理：

PAINTED VALLEY：THREE.JS 中的 6 种绘画背景技巧

1. 调色板：每个物体都有两种颜色，亮部和暗部，且两者之间的过渡很短。共享一个调色板来绘制草地、地面、远处的田野和山丘，从而使整个山谷看起来像一幅完整的画作。

2. 草地：一种缓慢的绿色，沿着坡度画出细长的笔触，并从起始山丘向外布置点状笔触以呈现圆润感。远处地面没有任何精细图案，否则会产生闪烁效果。

3. 山脉：高度图只进行一次步进处理，生成一条绘画带，前方有三层薄雾笼罩的山麓。每帧成本：0。

4. 云朵：每个积云都是一堆球体，通过一次光线步进映射到立方体贴图中，包含三种平面色调：白色顶部、冷色阴影、暖色底部。它们保持静止，光照每小时重绘一次。

5. 后期处理：一次小型 kuwahara（块状滤波）处理将画面边缘柔化为笔触效果，并保留天空不变。任何 alpha 值低于 0.6 的内容保持清晰锐利。

6. 漫游者：人物是赛璐珞风格而非绘画风格：三种平面色调，每个部分在 alpha 通道中写入一个数值，最后一遍处理在数值不同的地方描边勾勒线条。斗篷是真实的布料，物理模拟基于 rapier。

流程顺序：调色板 → 笔触 → 远景一次性绘制 → kuwahara → 墨线勾勒

按 T 键可将时间从正午移动到日落，按 P 键剥离绘画层以查看其底层内容。

单独来看，每种技巧都平平无奇。但组合在一起时，2 公里深的山谷和平原延伸至 6 公里外的景象，看起来像是动画电影的背景，而不是被滤镜覆盖的游戏。

公平地说：没有夜晚模式，云朵不会移动，你无法进入房屋内。仅在 RTX 4090 显卡、1080p 分辨率下测试过，首次访问耗时约 8 秒。

如果你正在制作自己的游戏，请收藏此项目：readme 说明建议从 main.js 开始，而不是从滤镜入手。

是在游戏上叠加滤镜，还是直接绘制场景本身？