Skip to content
Get packs

Guide · Agent skill

How to use the 3D Sky Rays agent skill for Three.js scenes

Updated · written with AI from the project's own documentation and checked against our catalogue data

3D Sky Rays is an agent skill, a folder of instructions that an AI coding agent loads when a task matches it. This one teaches the agent a specific technique for making sunlight look like it streams through gaps in roofs and foliage in a 3D scene. This guide explains what the skill does, how to install it, how to ask for it, and what limits to expect, so you can use it on a Three.js or WebGL project without prior experience with agent skills.

3D Sky RaysMengTo/Skills · MIT

Quick start

  1. 1Download the ZIP. Download the 3D Sky Rays skill ZIP from our page.
  2. 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder for one project.
  3. 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP.
  4. 4Check your project. Confirm you have a 3D rendering project with source code the agent can edit, such as Three.js, WebGL or WebGPU.
  5. 5Ask for sun rays. Describe the effect you want, such as sunlight through roof gaps or golden-hour rays through trees.
  6. 6Review and measure. Check roof and leaf silhouettes, camera orbit, resize and frame time with rays on and off.

What the 3D Sky Rays skill makes the agent do

The skill adds sun shafts and crepuscular rays to an existing 3D scene. Roof edges and foliage shape the shafts as the camera moves. The skill's description covers Three.js or equivalent scenes, scene occlusion, a projected sun position, controlled foreground spill, and scalable post-processing.

When it is installed, the agent knows the steps for an occlusion-aware screen-space ray effect. It inspects your renderer, builds a sky mask, projects the sun's position, and tunes the result for appearance and performance. The skill is a set of instructions and shader guidance, not a finished tool or library.

  • Inspect the renderer version, render targets, alpha usage, depth path, tone mapping and post-processing order.
  • Build a mask that marks open sky as white and opaque occluders as black.
  • Project the sun direction into screen space and march samples toward the sun.
  • Composite the rays additively before the final tone-map and output step.
  • Check stability across camera orbit, resize, dusk and a static reduced-motion frame.

Install the 3D Sky Rays skill

Download the skill's ZIP file from our page. Then choose one of the two install routes below. Both put the same skill folder in a location the agent can read.

For a personal install that applies to all your projects, unzip the download into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder instead.

If you use the Claude apps, you can upload the ZIP instead. Open Settings, go to Capabilities, and then Skills.

  • Personal: ~/.claude/skills/ (available across projects).
  • Project: .claude/skills/ inside your project folder (shared with anyone who works in that repository).
  • Claude apps: Settings → Capabilities → Skills, then upload the ZIP.

Check what the skill contains and needs

The skill package has three files: SKILL.md holds the instructions the agent follows, REFERENCES.md lists the source and renderer documentation, and agents/openai.yaml is part of the package. You do not need to edit any of them to use the skill.

The skill needs a 3D rendering project, such as one built with Three.js, WebGL or WebGPU. The agent also needs access to that project's source code so it can make the edits. The skill does not run scripts and does not use the network.

  • agents/openai.yaml
  • REFERENCES.md
  • SKILL.md

Trigger the skill with a natural request

You do not need a special command. The skill's description names its use cases: rays of light from the sky, sunlight through trees or roofs, and golden-hour architectural scenes. Ask for work in those terms and the agent can load the skill when it matches.

Name your project and what you want to see. Mention the renderer if you know it, and say what the scene looks like. Clear requests give the agent enough context to inspect your existing code before it changes anything.

Example requests that fit the skill

These prompts match the skill's stated use cases. Replace the details with your own project.

  • Add sunlight shafts coming through the gaps in the roof of my Three.js interior scene.
  • Make the low evening sun stream through the leaves of the trees in this WebGL forest render.
  • Add golden-hour rays to this architectural visualisation, and keep the effect stable when the camera orbits.
  • Tune the sun rays in this scene to reduce cost on mobile, and show me the ray buffer size you used.

Safety and limits to know before you run it

The skill is a set of instructions for editing your code. It does not run scripts and does not use the network, so it does not install packages or send data on its own. The agent still edits your project files, so review its changes in version control before you ship them.

The skill describes its effect as an artistic approximation, not depth-integrated volumetric lighting. It is not suited to teams that need physically accurate volumetric scattering.

  • Keep the existing WebGL or WebGPU backend; the skill does not ask you to replace it.
  • Start with roughly 24 to 48 samples and a half-resolution ray buffer, and increase only if banding appears.
  • Avoid synchronous GPU readback in the render loop.
  • Measure the incremental GPU and frame cost with rays enabled and disabled.

What people use it for

  • Adding sunlight shafts through roof gaps in an interior Three.js scene.
  • Making low sun stream through a tree canopy in a WebGL nature render.
  • Adding golden-hour atmosphere to an architectural visualisation.
  • Tuning ray intensity and buffer size to keep a real-time scene responsive.

Frequently asked questions

How do I install the 3D Sky Rays agent skill?

Download the ZIP from our page and unzip it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings, then Capabilities, then Skills.

Is the 3D Sky Rays skill free to use?

The listing states the skill is licensed under MIT. Check the licence file in the package for the full terms before you use it in a commercial project.

What do I need to use this skill?

You need a 3D rendering project such as Three.js, WebGL or WebGPU, and access to its source code so the agent can edit it. The skill does not run scripts and does not use the network.

Does the skill run code or access the internet?

According to the listing, the skill runs no scripts and uses no network. It is a set of instructions and shader guidance that the agent applies to your project files.

Why does my scene go white when the rays are on?

The skill says whiteout usually means excessive intensity or a bad sky mask, not too little bloom. Lower the intensity and check that the mask marks sky as white and opaque geometry as black.

Is this physically accurate volumetric lighting?

No. The skill describes its result as an artistic approximation, not depth-integrated volumetric scattering. Teams that need physically accurate scattering should look for a different approach.

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 build Three.js or WebGL scenes and want golden-hour sun shafts that respond to roofs and foliage, or if you tune atmospheric lighting for visualisations. Pick something else if your project does not render 3D graphics, or if you need physically accurate volumetric scattering, since the skill itself describes its effect as an artistic approximation.

Download the skill