nicksonthcAgent skills for building a hand-painted, Ghibli-style 3D world in three.js / WebGL — water, toon
Agent skills for building a hand-painted, Ghibli-style 3D world in three.js / WebGL — water, toon foliage, sky, night, weather, creatures, interaction, tours, Blender → GLB pipeline
·
ghibli-threejs
🌿 A note from the author
While building my Ghibli river 3D project, I spent days iterating on it, one improvement after another. The skills below are what I extracted from that work.
If you like the visuals, effects and interactive features of riverbook.tanhoochuan.my, grab this repo and try them yourself.
Showcase
Clips from the scene these skills came from. Click a preview to open the 720p video.
 Boat on the river: water, buoyancy, wake |  Day into night: day cycle, night mode |
 Below the surface: underwater effect, koi |  Lanterns at night: lanterns, fireflies, moonlit water |
 The self-writing book: object interaction |  Laputa on foot: floating island, first-person walk |
Agent skills for building a hand-painted, Ghibli-style 3D world in three.js / WebGL: realistic river water, toon-shaded foliage, painterly skies, a moonlit night, weather, swimming creatures, cinematic interaction, guided camera tours, and the headless-Blender → GLB asset pipeline behind them.
Every skill was mined from one real project, a ~6,000-line single-file three.js scene (r186, WebGLRenderer + EffectComposer) built iteratively with Claude Code. Each one keeps the numbers that worked and the pitfalls that each cost a full iteration, so you don't have to rediscover them.
The skills follow the Agent Skills format
(skills/<name>/SKILL.md + optional references/ code excerpts). Claude Code, Codex,
Cursor, GitHub Copilot, Gemini CLI, OpenCode, and other agents that support this format
can use them. Each agent discovers skills from its own install directories; the
skills/ directory in this repo is the source to install from.
Install
Run install commands from the project where you want to use the skills, unless you choose a global install. You only need the skills relevant to your scene.
Choose skills and agents with npx (optional)
If you have Node.js, the skills CLI can find this repo's skills and install them for the agents you select:
npx skills add nicksonthc/ghibli-threejs --list # preview available skills
npx skills add nicksonthc/ghibli-threejs # choose skills and agents interactivelyAdd -g to the second command to install for your user across projects. npx is a
convenience, not a requirement; the manual options below work without Node.js.
Claude Code plugin (all skills)
Inside Claude Code, run:
/plugin marketplace add nicksonthc/ghibli-threejs
/plugin install ghibli-threejs@ghibli-threejsThese /plugin commands are specific to Claude Code. The other agents use the
Agent Skills folders below.
Copy skills manually
From your target project, clone the source outside the project and copy an entire
skill folder (including references/) into your agent's skills directory:
git clone https://github.com/nicksonthc/ghibli-threejs /tmp/ghibli-threejs-skills
mkdir -p .agents/skills
cp -R /tmp/ghibli-threejs-skills/skills/threejs-webgl-realistic-water .agents/skills/For a personal install, use ~/.agents/skills/ instead of .agents/skills/.
The shared .agents/skills/ path is recognized by most agents below; Claude Code
uses .claude/skills/ instead.
| Agent / IDE | Project skills directory | Personal skills directory |
|---|---|---|
| Claude Code | .claude/skills/ | ~/.claude/skills/ |
| Codex | .agents/skills/ | ~/.agents/skills/ |
| Cursor | .agents/skills/ or .cursor/skills/ | ~/.agents/skills/ or ~/.cursor/skills/ |
| GitHub Copilot in VS Code | .agents/skills/ or .github/skills/ | ~/.agents/skills/ or ~/.copilot/skills/ |
| Gemini CLI | .agents/skills/ or .gemini/skills/ | ~/.agents/skills/ or ~/.gemini/skills/ |
| OpenCode | .agents/skills/ or .opencode/skills/ | ~/.agents/skills/ or ~/.config/opencode/skills/ |
| Cascade / Windsurf | .agents/skills/ or .devin/skills/ (.windsurf/skills/ legacy) | ~/.agents/skills/ or ~/.codeium/windsurf/skills/ |
Other agents may support SKILL.md but use different paths; check their docs or use
the skills CLI's agent selector. After installation, start a new agent session if the
skill is not discovered. Then ask for an effect ("add realistic water with refraction
to my river") or use a skill's paste-ready prompt with its {{slots}} filled in.
Skills
Water
| Skill | What it gives you | 中文说明 |
|---|---|---|
| threejs-webgl-realistic-water | Depth-aware refraction, Beer–Lambert absorption, planar reflection, shadowed sun glints, mipmapped ripple normals, caustics, pebble riverbed | 基于深度的折射、比尔–朗伯吸收、平面反射、带阴影的阳光高光、Mipmap 涟漪法线、焦散、卵石河床 |
| threejs-webgl-underwater-effect | Diving below the surface: Snell's window, total internal reflection, light shafts, bubbles, underwater grade, and an over-under lens (half above / half below the waterline) | 潜入水面之下：斯涅尔窗、全内反射、光柱、气泡、水下调色，以及水线分屏镜头（半水上半水下） |
| threejs-boat-buoyancy-steering | Gerstner waves shared by GPU and CPU, buoyant boat, smooth drifting lane, click-to-steer with autopilot, chase camera | GPU 与 CPU 共用的 Gerstner 波、浮力小船、平滑漂流航线、点击掌舵与自动驾驶、追随相机 |
| threejs-webgl-wake-simulation | Kelvin wake — analytic, then a GPU iWave height-field simulation with foam and bow wave | 开尔文尾迹：先用解析模型，再用 GPU iWave 高度场模拟，含泡沫与船首波 |
| threejs-webgl-waterfall-effect | Waterfall off a real cliff lip into a carved plunge basin: layered sheets, spray, rainbow, mist | 从真实崖口倾泻入冲刷潭的瀑布：分层水幕、水雾、彩虹、薄雾 |
Look: sky, foliage, materials, post
| Skill | What it gives you | 中文说明 |
|---|---|---|
| threejs-ghibli-sky-clouds | Painterly sky dome, horizon haze, soft sun halo, instanced hand-painted cumulus | 手绘风天空穹顶、地平线雾霭、柔和日晕、实例化手绘积云 |
| threejs-ghibli-toon-shading | Banded toon light without banded shadows, warm shadow fill, puff normals, backlit SSS, wind with synced shadows | 分段卡通光照但阴影不分段、暖色阴影补光、蓬松法线、逆光次表面散射、与阴影同步的风动 |
| threejs-procedural-vegetation | Crafted trees, bamboo, shrubs, meadow grass, wildflowers, reeds, lilies, sakura petals, rice paddies — instanced | 精制树木、竹林、灌木、草甸、野花、芦苇、睡莲、樱花花瓣、稻田——全部实例化 |
| threejs-stylized-rock-material | River-worn granite: soft facets, moss in vertex alpha, live wet line, grain and bump | 河流冲刷的花岗岩：柔和切面、顶点 Alpha 青苔、实时湿水线、颗粒与凹凸 |
| threejs-postprocessing-anime-grade | GTAO → bloom → grade → OutputPass → SMAA chain and the anime colour grade | GTAO → 泛光 → 调色 → OutputPass → SMAA 后期链与动画风调色 |
Time, weather, night
| Skill | What it gives you | 中文说明 |
|---|---|---|
| threejs-day-cycle-lighting | Sunrise-to-sunset sun sweep driving every sun-aware shader; a sun that follows the lens | 日出到日落的太阳轨迹，驱动所有感知太阳的着色器；太阳跟随镜头 |
| threejs-ghibli-night-mode | Cross-faded night: painted moon, stars, Milky Way, shooting stars, moonlit water, cool grade | 渐变过渡的夜景：手绘月亮、星空、银河、流星、月光水面、冷色调色 |
| threejs-night-lights-lanterns | Floating paper lanterns with text, fireflies, oil lamps, swinging boat lantern, cheap point lights | 写有文字的漂流纸灯笼、萤火虫、油灯、船头摇曳的灯笼、低成本点光源 |
| threejs-webgl-rain-effect | Clear / rain / thunderstorm from one wetness value: GPU rain, rings, lightning, thunder, wet materials | 由单一湿度值驱动的晴天 / 雨天 / 雷暴：GPU 雨丝、水面雨圈、闪电、雷声、湿润材质 |
Creatures & characters
| Skill | What it gives you | 中文说明 |
|---|---|---|
| threejs-fish-school-boids | Koi: shader-painted varieties, vertex swimming with matching shadows, calm boids, bioluminescence | 锦鲤：着色器绘制的品种花纹、顶点着色器游动并同步阴影、平稳的群游算法、生物荧光 |
| threejs-shell-fur-rendering | Instanced shell fur grown on a GLB body, LOD by distance | 在 GLB 模型上生长的实例化壳层毛发，按距离做 LOD |
| threejs-skeletonless-character-animation | Blinks, glances, head turns, a leaf in the wind — all in vertex shaders, no skeleton | 眨眼、瞥视、转头、风中的叶子——全部在顶点着色器中完成，无需骨骼 |
Interaction, camera, UX
| Skill | What it gives you | 中文说明 |
|---|---|---|
| threejs-object-interaction | Hover ring, click-vs-drag, one-shot cinematic, a book that writes itself and flips real pages | 悬停光环、区分点击与拖拽、一镜到底的过场、会自己书写并真实翻页的书 |
| threejs-camera-guided-tour | Hands-free camera journey on a time-parametrised Catmull-Rom path, day into night | 基于时间参数化 Catmull-Rom 路径的自动镜头导览，从白天到黑夜 |
| threejs-hud-objective-markers | Game-style off-screen markers, fly-to arcs, minimal icon-dock HUD | 游戏式屏幕边缘目标标记、弧线飞行跳转、极简图标栏 HUD |
| threejs-first-person-bvh-walk | Float a character onto a landmark and walk it in first person: WASD + pointer lock, touch stick, lift between floors, lamp-lit interiors, and a three-mesh-bvh capsule that never gets stuck, proven by a headless flood-fill + soak test | 让角色飘落到地标上并以第一人称行走：WASD + 指针锁定、触屏摇杆、楼层间悬浮升降、灯光照亮的室内，以及永不卡住的 three-mesh-bvh 胶囊体碰撞，经无头泛洪填充与长时漫游测试验证 |
| threejs-cinematic-loading-screen | CSS dawn loading gate, captured still that fades into the live scene, shader warm-up | CSS 黎明风加载页、从实时场景截取的静帧淡入实景、着色器预热 |
| threejs-webaudio-generative-soundtrack | An original waltz synthesised live with Web Audio, plus river and birdsong ambience | 用 Web Audio 实时合成的原创圆舞曲，配河流与鸟鸣环境音 |
World & pipeline
| Skill | What it gives you | 中文说明 |
|---|---|---|
| threejs-open-world-streaming | A 600 m river world: water SDF, chunked terrain, tree pools, landmarks, distance culling | 600 米河流世界：水域 SDF、分块地形、树木池、地标、距离剔除 |
| threejs-blender-glb-pipeline | Reference image → scene: asset contract, headless Blender agents, GLB export gotchas, Draco | 参考图 → 场景：资产规范、无头 Blender 代理、GLB 导出陷阱、Draco 压缩 |
| threejs-floating-island-landmark | A floating sky-castle island: a headless-Blender rock cone, castle, domes and waterfalls, dressed by a material-name → procedural-shader table (matte ashlar stone, verdigris, bronze, strata rock), far haze instead of fog, slow spin and bob, glowing at night | 浮空的天空之城岛屿：无头 Blender 生成岩锥、城堡、穹顶与瀑布，按材质名映射程序化着色器（哑光方石、铜绿、青铜、岩层），以远景雾霭取代场景雾，缓慢自转与浮动，夜间发光 |
| threejs-glb-realism-pipeline | Existing GLB / Blender scene → realistic WebGL: real-world scale, bevels, PBR textures, baked lightmaps, HDRI + AgX viewer, and a screenshot-scored critique loop | 现有 GLB / Blender 场景 → 写实 WebGL：真实比例、倒角、PBR 贴图、烘焙光照贴图、HDRI + AgX 查看器，以及基于截图评分的迭代评审 |
| threejs-webgl-performance-profiling | Honest GPU timing, pass budgets, compile hitches, culling, LOD | 准确的 GPU 计时、渲染通道预算、编译卡顿、剔除、LOD |
| threejs-headless-visual-verification | Playwright + GPU capture of WebGL frames, shot lists, and the traps that give stale frames | 用 Playwright + GPU 截取 WebGL 画面、镜头清单，以及导致过期帧的陷阱 |
Conventions
- Skill names are
threejs-<area>-<feature>in kebab-case; the folder name equals thename:in the frontmatter. {{double braces}}in prompts are slots for your own scene (entry file, character, reference image …).references/holds trimmed code excerpts from the original scene. They show the technique; adapt uniform names and scene coupling to your project.
Credits & disclaimer
"Ghibli-style" describes an aesthetic. This project is not affiliated with or endorsed by Studio Ghibli, and it ships no Studio Ghibli assets, characters or music — the soundtrack skill explicitly composes original music.
MIT licensed. Contributions and new pitfalls welcome.
Install with your agent
Paste this prompt into your agent. It reads this page and does the setup for you.
Read https://aiagentslisting.com/mcp/ghibli-threejs to learn what the "Ghibli Threejs" MCP server does and how to install it. Add it to my coding agent's MCP configuration as documented on that page, then confirm the server connects and list the tools it exposes.Agents can also browse this directory over MCP at https://aiagentslisting.com/api/mcp
From the project README
npx skills add nicksonthc/ghibli-threejs --list # preview available skills
npx skills add nicksonthc/ghibli-threejs # choose skills and agents interactivelyThis server runs locally, so we can't read its tool list over the web yet.
We could not run this server: it ships no npx package for our sandbox and no public endpoint. The four checks that need a live server are left out, and the grade tops out at B until one exists.
What's missing
- Easy installA paste-ready client config (an mcpServers block) is documented.0/12
All 5 checks (4 passed)
- Installation methodRequiredThe README documents at least one way to install or connect.15/15
- Has a READMERequiredThe repository ships documentation we could read.10/10
- Easy installA paste-ready client config (an mcpServers block) is documented.0/12
- Has a licenseThe repository declares a license.8/8
- Claimed by ownerThe maintainer proved ownership of this listing.4/4
- Verified liveNot checkableWe connected to the server and it answered a real MCP handshake.—
- Exposes toolsNot checkableThe server reports at least one tool, from its manifest or a live read.—
- Ships promptsNot checkableThe server exposes at least one prompt template.—
- Ships resourcesNot checkableThe server exposes at least one resource.—
Show this grade in your README
Paste this line near the top of your repository's README. The badge always renders the current score.
[](https://aiagentslisting.com/mcp/ghibli-threejs)Alternatives to Ghibli Threejs
Nothing comparable is listed yet.
No tagged releases on record.
Send this prompt to your agent to leave a review
Connect to the AI Agents Listing MCP server at https://aiagentslisting.com/api/mcp using the HTTP transport and complete the sign-in when it asks. Then call the submit_review tool for the listing "ghibli-threejs" with a rating from 1 to 5 and a short note on what worked and what did not.No reviews yet
Be the first to share your experience with this tool.
Subscribe to our newsletter
One email a week. New agents, MCP servers and skills, and what is actually getting traction.