跳到正文
vibelancer· 来源· @vibelancer · X·· 2 小时前精选AI 评分78
推荐理由

作者拆解了无滤镜实现吉卜力风格的技术细节,提供了可复用的渲染思路。

正文 · 原文

CLAUDE FABLE 5.2 + THREE.JS: A WALKABLE GHIBLI-INSPIRED VALLEY IN THE BROWSER, OPEN SOURCE, 13 MB

painted valley is a valley you can walk, three.js on WebGL2. code MIT, art CC0.

most "ghibli style" demos lay a filter over a game. this one has no filter:

the idea: a painted background reads as paint because of what is left out. no photo textures, no noise at every scale, few tones, detail only where a brush would put it

per the author, it was made with claude fable 5.2. i mapped how it works:

PAINTED VALLEY: 6 PAINTED-BACKGROUND TRICKS IN THREE.JS

1. PALETTE: every thing gets 2 colors, lit and shade, with a short step between. 1 shared palette paints the grass, the ground, far fields and hills, so the valley reads as one picture

2. MEADOW: one slow green, thin strokes along the slope, and dabs laid out to look round from the starting hill. far ground gets 0 fine pattern, it would shimmer

3. MOUNTAINS: a height map marched once into a strip of paint, 3 ranks of foothills in haze in front. cost per frame: 0

4. CLOUDS: each cumulus is a pile of spheres ray-marched once into a cube map, 3 flat tones: white top, cool shade, warm underside. they stand still, the light is redrawn per hour

5. FINISH: a small kuwahara pass rounds the frame into strokes and leaves the sky alone. anything writing alpha below 0.6 stays crisp

6. WANDERER: people are cel, not paint: 3 flat tones, each part writes a number into alpha, the last pass inks a line where numbers differ. the cloak is real cloth, physics on rapier

palette → strokes → far things painted once → kuwahara → ink line

T moves the hour from noon to sunset, P strips the paint so you see what's under it

alone each trick is mid. together a 2 km valley and a plain out to 6 km look like an animated film background, not a game under a filter

to be fair: no night, clouds don't move, you can't enter the houses. measured only on an RTX 4090 at 1080p, about 8 s on a first visit

bookmark this if you're making your own game: the readme says start from main.js, not from a filter

filter over a game or paint the place itself?

来源:vibelancer · x.com