Uploaded August 2025 | Updated September 2026, 1 week ago

---

Learn how to build Godrays with React Three Fiber using the Three Shading Language (TSL) and WebGPU

🚀 Learn React Three Fiber with the Ultimate Guide to 3D Web Development ✨
https://wawasensei.dev/courses/react-three-fiber/

Demo 🔗
https://godrays.wawasensei.dev

Final code 🔗
github.com/wass08/r3f-godrays

Starter code 🔗
github.com/wass08/r3f-webgpu-starter

#threejs #js #webgpu

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

Blender Tutorial to make godrays
youtube.com/watch?v=hZI2pqcp8ig

Three.js Shading Language
github.com/mrdoob/three.js/wiki/Three.js-Shading-Language

Threejs
threejs.org

React Three Fiber
https://r3f.docs.pmnd.rs/getting-started/introduction



▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬

Become a member to get access to awesome perks:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
discord.gg/2wBhwchcWu

📸 Instagram :
instagram.com/wawa.sensei

🎎 Facebook :
facebook.com/wawasenseiyt

🐦Twitter :
twitter.com/wawasensei

🐦TikTok :
tiktok.com/@wawasensei08


▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 Introduction
00:54 WebGPU / TSL Starter Pack
01:37 Learning process
02:17 Cylinder Geometry
05:54 Godray Shader with TSL
13:07 Smoothing & Inverted Fresnel
17:45 Loading our scene
19:04 Adding controls
20:20 Placing & Customizing our Godrays
23:31 Real Godrays
23:47 Conclusion

▬▬▬▬▬▬ CREDITS ▬▬▬▬▬▬
Song: Blue Boi
Composer: Lakey Inspired
Website: youtube.com/LakeyInspired
License: Creative Commons (BY-NC 3.0) creativecommons.org/licenses/by-nc/3.0
Music powered by BreakingCopyright