Back to videos

How to Fake Godrays in Three.js (WebGPU + React)

Overview

Godrays—those cinematic beams of light shining through windows, trees, or clouds—can instantly transform a flat scene into something atmospheric and dramatic. They’re the visible scattering of light through particles in the air, but rendering true volumetric lighting is expensive and heavy for the web.

In this tutorial, I’ll show you how to fake godrays in Three.js using WebGPU, React Three Fiber, and TSL (Three.js Shader Language). You’ll learn how to go from a basic starter scene to a polished, cinematic result—complete with customizable light beams that look stunning but run smoothly in the browser.

Godrays

When building interactive 3D web experiences—games, showrooms, or artistic websites—lighting plays a huge role in immersion and mood. But real volumetric lighting is too performance-heavy for most web projects.

That’s why learning how to fake godrays is so useful:

• It gives your scenes depth and drama without tanking performance.

• It teaches you how to manipulate shaders, geometry, and materials in clever ways.

• It builds the mindset of balancing visual fidelity with efficiency—a key skill for any professional 3D web developer.

Tech Stack

• Three.js Shading Language

• Three.js

• React Three Fiber

Experience the project in action

• Live Demo

• Final Code

• Starter Code

#threejs #js #webgpu

Need help with this tutorial? Join our Discord community!