skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

3d-sky-rays

Implements occlusion-aware crepuscular ray post-processing for Three.js scenes.

6.3k|743|Updated Feb 3, 2026
Search Tags:#webgl#three.js#shader#post-processing#3d rendering#god rays#crepuscular rays
One-click install
npx skills add https://github.com/MengTo/Skills --skill 3d-sky-rays-mengto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: 3d-sky-rays
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/3d/3d-sky-rays
Command: npx skills add https://github.com/MengTo/Skills --skill 3d-sky-rays-mengto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding believable sun shafts and god rays to a 3D scene is difficult: naive screen-space effects produce whiteout, rectangular foliage halos, mirrored sources, and banding. This Skill provides a proven shader recipe for occlusion-aware light rays shaped by roofs and foliage. ## Core Features & Use Cases - Occlusion-Aware Ray Pass: Builds a sky mask, projects the sun position to UV space, and marches samples toward it with normalized decaying weights so exposure stays stable. - Renderer Integration Guidance: Covers HDR linear color, tone-mapping order, alpha conventions, WebGL/WebGPU adaptation, and foreground attenuation to preserve surface contrast. - Performance & Verification Checklist: Recommends 24-48 samples at half resolution, buffer resizing, GPU cost measurement, and visual checks for halos, banding, and off-screen sun behavior. - Use Case: You are building a golden-hour architectural scene in Three.js and want sunlight streaming through a roofline and tree canopy that reacts correctly as the camera orbits. ## Quick Start Use the 3d-sky-rays skill to add sun shafts shaped by the roofs and foliage in my Three.js scene.

Frequently Asked Questions about 3d-sky-rays

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add god rays to a Three.js scene?▼

Render scene color in linear HDR, build a sky mask where open sky is white and occluders are black, then march samples from each pixel toward the projected sun UV with decaying weights. Composite the result additively before tone mapping.

How to make sun shafts occluded by trees and roofs in WebGL?▼

Use an occlusion-aware ray pass: the sky mask must match foliage alpha cutouts and vertex motion so leaves shape the shafts instead of becoming solid rectangles. Scene occlusion should provide most of the ray structure.

Can I use this god ray shader with WebGPU instead of WebGL?▼

The recipe describes a WebGL screen-space effect, but the same occlusion-mask and projected-source approach can be implemented in a WebGPU node or render pipeline. Keep the existing backend and port the pass equivalently.

Why does my god ray effect cause whiteout or bright bands?▼

Whiteout usually means excessive intensity or a broken sky mask, not insufficient bloom. Bright bands come from clamping samples at texture edges when the sun moves off-screen; fade the effect instead and use a small overscan margin.

How many samples does a crepuscular ray shader need?▼

Start with 24-48 samples on a half-resolution ray buffer and increase only when visible banding warrants it. Divide accumulated samples by the sum of weights so changing sample count does not change exposure.

Related Skills

Explore More Design & Creative Skills→
AsylcreekAsylcreek

threejs-postprocessing

Applies bloom, depth of field and shader passes to Three.js scenes via EffectComposer.

Community
Advanced
nicolas-riccnicolas-ricc

r3f-postprocessing

...

Community
Intermediate
eachlabseachlabs
28

image-relighting

Relight photos with AI to transform lighting conditions and preserve the original subject.

Official
Intermediate
47thtechcorner47thtechcorner
21

threejs-lighting

Configure Three.js lighting systems and shadow rendering pipelines.

Community
Intermediate