Skip to content
Get packs

3D Ultra-Realistic Water

Lets an agent build a realistic open-ocean water surface in Three.js scenes

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
9 files

What it does

When installed, the agent knows a tested recipe for rendering a believable open sea in 3D web scenes built with Three.js. It can wire up a reusable water module (assets/ocean.mjs) with waves, sun glitter, reflections, foam, a ship wake and horizon haze, and it knows which settings prevent common artifacts like shimmering far-away water. The skill is extracted from a demo scene and includes a rebuildable demo.

Great for

  • Web developers building 3D ocean, sea or harbour scenes in Three.js
  • Creators making sunset or daylight water scenes with a moving camera and ship or boat
  • Developers who want a reference for physically motivated water shading and wave spectra

Skip it if

  • Simple flat or mirror-like water where a cheaper full-screen plane is enough (the skill itself says so)
  • Non-Three.js projects or native game engines, since the module targets Three.js r150+ with WebGL2
  • Anyone expecting ready-made gameplay physics; buoyancy is only a height query on the same wave function

Try asking

  • “Build an ultra-realistic open ocean with sun glitter and a ship wake in my Three.js scene”
  • “Add Fresnel sky reflections and foam to my sea so it holds up toward the horizon”
  • “Set up buoyancy so my boat rides the same waves as the rendered water”
Step-by-step guide: how to use 3D Ultra-Realistic WaterInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 9 original files, the MIT licence and an attribution note.

    3d-ultra-realistic-water.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip 3d-ultra-realistic-water.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip 3d-ultra-realistic-water.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Pass in your project's own THREE namespace rather than importing a second copy of Three.js
  • Read references/ocean.md before integrating so you understand constants, render order and post-processing
  • Keep the total steepness sum below 1 when customising wave spectra to avoid folding crests

What's inside

  • agents/openai.yaml
  • assets/ocean.mjs
  • demo/build.mjs
  • demo/PROMPT.md
  • demo/src/ui.css
  • demo/src/ui.html
  • demo/src/ui.js
  • references/ocean.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.