Volumetric Light Rays with Three.js

A coding session where you’ll learn how to create volumetric light rays with fragment shaders in Three.js.

By Yuri Artiukh in Videos on June 27, 2022

In this new ALL YOUR HTML coding session we’ll be decompiling volumetric light rays and recreating them with fragment shaders and Three.js.

Original website: https://moonfall.oblio.io/desktop/

Agency: https://oblio.io/

This coding session was streamed live on June 19, 2022.

Check out the live demo.

Support: https://www.patreon.com/allyourhtml

Setup: https://gist.github.com/akella/a19954…

Yuri Artiukh

Yuriy is a developer from Kyiv, Ukraine. Leading a small frontend agency riverco.de, also speaking at conferences, and open for freelance projects. Curious about CSS and shaders. Loves to learn every day.

fragment shader three.js webgl

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Yuri Artiukh

How to Animate SVG Shapes on Scroll

Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js

Thumbnail Hover Effect with SVG Filters

Stay in the loop: Get your dose of frontend twice a week