A tutorial on how to add volumetric effects to a built-in Three.js shader for an interesting marble animation.

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Codrops

In April 2019, Harry Alisavakis made a great write-up about the “magical marbles” effect he shared prior on Twitter. The purpose of this tutorial is to offer a more concrete look at how you could implement code for this in Three.js to run on the web. This tutorial assumes intermediate familiarity with three.js and GLSL.

Magical Marbles in Three.js