Skip to content
Get packs

3D Underwater God Rays

Adds volumetric underwater light shafts, caustics and dappled fish lighting to Three.js scenes

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

What it does

When installed, the agent can add realistic underwater light: sun beams that pass down through the water, rippling light patterns, a shimmering surface seen from below, and fish that get dappled as they swim through the beams. It works by giving the agent a reusable JavaScript module and step-by-step rules for a Three.js 3D scene. It is aimed at building 3D web scenes; it does not generate images or video directly.

Great for

  • Web developers building underwater, ocean, reef or aquarium scenes in Three.js
  • 3D artists or designers prototyping water lighting for interactive pages or wallpapers
  • Anyone who wants a worked example of volumetric light shafts in WebGL2

Skip it if

  • Sun shafts in air through trees or windows: the skill itself points to sibling skills for those cases, since this one is tuned for water.
  • Projects not using Three.js or WebGL, where the shader module would need substantial rework.
  • Ocean surfaces seen from above with a horizon: the skill recommends a different sibling skill for that.

Try asking

  • “Add god rays and caustics to my Three.js underwater scene with a school of fish”
  • “Make a kelp forest diving scene in Three.js with light shafts coming down from the surface”
  • “Create a shimmering surface underside and sun ripples for my ocean background”
  • “Dapple my fish models with light as they swim through the beams”
Step-by-step guide: how to use 3D Underwater God RaysInstall, 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-underwater-god-rays.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip 3d-underwater-god-rays.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip 3d-underwater-god-rays.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 own THREE object and set up the shared uniforms before creating materials, as the SKILL.md instructions describe.
  • Use the demo's switches (Ridge web, Painted on screen) to see why the recommended settings matter before changing constants.
  • Keep the recommended constants at first; tune gain and colour only after the shafts look right in your scene.

What's inside

  • agents/openai.yaml
  • assets/underwater-light.mjs
  • demo/build.mjs
  • demo/PROMPT.md
  • demo/src/ui.css
  • demo/src/ui.html
  • demo/src/ui.js
  • demo/src/water.js
  • 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.