Guide · Agent skill
How to use the 3D Underwater God Rays agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
3D Underwater God Rays is an agent skill, a folder of instructions and code that an AI coding agent loads when a task matches it. Once installed, it lets the agent add sun beams passing down through water, rippling caustic light, a shimmering surface seen from below and fish that brighten as they swim through the beams to a Three.js scene. This guide covers what the skill does, how to install it, how to phrase requests so the agent picks it up, and what it needs to run.
3D Underwater God RaysMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the ZIP from this skill's page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
- 2Or upload in the Claude apps. In the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- 3Confirm Three.js and WebGL2. Make sure your scene uses Three.js and that the browser supports WebGL2, since the module depends on both.
- 4Ask for the effect in plain words. Describe the underwater scene and the light you want, such as sunbeams through water, caustics or dappled fish.
- 5Copy the module and wire it up. Copy assets/underwater-light.mjs into your project, create the shared uniforms, and call the light's render step each frame before the tone map.
What does the 3D Underwater God Rays skill make the agent do?
The skill teaches the agent to build volumetric light shafts for underwater 3D web scenes. It marches one drifting swell field along every view ray at half resolution, so the beams converge on the sun, shift with the camera's parallax and carry rippling caustic streaks.
It also covers a shimmering surface underside, a sun that wobbles through the ripples, and fish that get dappled by the light as they move through the beams. The skill ships a reusable JavaScript module, assets/underwater-light.mjs, and step-by-step rules for using it in a Three.js scene.
It is aimed at building 3D web scenes. It does not generate images or video directly.
How do you install the skill?
Download the ZIP from the skill's page in this directory and unzip it. There are two common places to put the folder. For a personal setup, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps instead, open Settings, go to Capabilities, and upload the skill under Skills. Either way, the agent should then see the skill as available for matching tasks.
- Personal install: ~/.claude/skills/3d-underwater-god-rays/
- Project install: .claude/skills/3d-underwater-god-rays/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How do you trigger the skill with a natural request?
You do not need a special command. Describe the scene in plain words and mention light, water or the sea. The skill's description lists the situations it is meant for, so requests close to those wording tend to match.
Requests that name the scene or effect work well. Include the context, such as a Three.js scene, so the agent knows which tools to use. If the agent does not pick the skill up, name it directly in your prompt.
- Add rays of light shining through the ocean to my Three.js scene.
- Make this aquarium look lit from above with sunbeams through the water.
- Add caustics and rippling light patterns to this reef background.
- Light the fish in this school so they brighten when they swim through the beams.
- Add a shimmering surface seen from below to this diving scene.
How do you use the reusable module in your own scene?
Copy assets/underwater-light.mjs into your project. You pass in your own THREE object, and the module does not import a second copy. The module exports createUnderwaterLight, LIGHT_GLSL and WATER_GLSL.
Create one shared uniforms object for your water, fish and particle materials. Create the light before those materials, set its size, and call its render step every frame before drawing the water, fish and a single tone map. The skill's guidance is to declare each uniform only once per shader, because a duplicate declaration is a compile error that makes the material draw nothing.
- Set the size again whenever the window resizes.
- Keep the sun direction pointing toward the sun.
- Declare uSunDirection in the host shader before adding LIGHT_GLSL.
import { createUnderwaterLight, LIGHT_GLSL, WATER_GLSL } from './underwater-light.mjs';
light.setSize(innerWidth * dpr, innerHeight * dpr);
// Every frame, in this order:
uniforms.uTime.value = time;
camera.updateMatrixWorld();
light.render(renderer);What does the skill need, and what should you know about safety?
The skill was verified on Three.js and needs a WebGL2-capable browser. You only need Node.js if you want to run demo/build.mjs, which rebuilds the Blue Hour demo from its source assets. You do not need those assets to use the module itself.
The skill runs scripts, and the source is listed as not using the network. The demo's recreation spec asks for a single self-contained HTML file with no network requests. Read demo/build.mjs before running it, since it is the one script the skill ships.
- Three.js and a WebGL2-capable browser are required.
- Node.js is optional and only needed for demo/build.mjs.
- Blue Hour source assets and reference page are only needed to rebuild the demo.
- Runs scripts: yes. Uses network: no.
What tips help the result look right?
Judge the gain on the composed page, not on the raw canvas. The canvas can sit under a CSS shade, which can wash out the shafts. Raise the sun above the top edge of the frame for full-frame beams. Between about 30° and 44° the beams fan down the whole frame, while a sun at about 21° sits in view and gives short beams.
Turn down any uniform glow already in your frame, such as a corona or a screen-space ray pass, so the shafts carry the light and the gaps stay dark.
- Use the composed page to judge brightness; the source's gain setting was chosen for that view.
- Sun elevation between about 30° and 44° gives full-frame beams.
- Lower any existing glow so the shafts stand out.
- For sun shafts in air through trees or windows, use the sibling skill 3d-sky-rays instead.
- For an ocean surface seen from above with a horizon, use 3d-ultra-realistic-water.
What people use it for
- Adding sunbeams and caustic light to a Three.js reef or kelp forest scene.
- Building an aquarium or shipwreck background with a shimmering surface seen from below.
- Animating a school of fish that brightens as it crosses light shafts.
- Prototyping water lighting for an interactive page or a live wallpaper.
Frequently asked questions
How do I install the 3D Underwater God Rays agent skill?
Download the ZIP from the skill's page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings, then Capabilities, then Skills.
Is the 3D Underwater God Rays skill free to use?
The source lists the licence as MIT. Check the licence file in the skill's download for the full terms before you use it in a commercial project.
What do I need to run the skill?
You need Three.js and a WebGL2-capable browser. Node.js is only needed if you want to rebuild the demo with demo/build.mjs, and the Blue Hour source assets are only needed for that rebuild.
Does the skill use the network?
The source lists it as not using the network. It does run scripts, so review demo/build.mjs before running it.
Can I use this for sunlight through trees or windows?
No, the skill is tuned for water. For sun shafts in air cut by trees and rooflines, the skill points to 3d-sky-rays, and for a single window in a lit interior it points to 3d-wood-lighting-scorecard.
Does it work outside Three.js?
Not without substantial rework. The shader module is built for Three.js and WebGL, so projects using other engines would need significant changes.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are building underwater, reef, aquarium or diving scenes in Three.js and want realistic light shafts, caustics and dappled fish with a working reference. Pick something else if you need sun shafts in air, an ocean surface viewed from above with a horizon, or a non-Three.js project, since the sibling skills or a rework will serve those better.
Download the skill