作者拆解了无滤镜实现吉卜力风格的技术细节,提供了可复用的渲染思路。
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