Lesson 41 - Volumetric Fog

 

Introduction

This lesson is a little bit of a cheat in the sense that it is based largely on code that I neither wrote and barely understand the inner workings. But it looks pretty cool!

The Algorithm

The basic algorithm is rather simple: First, render the part of the light source geometry that is not occluded, then blur it from the center of the light source outwards to produce the characteristic light streaks. All this is done in 2D image space instead of the 3D world as computing how the light rays propagate in the medium would be way to expensive for realtime rendering. So the goal is to look cool, not be physically correct!

Inventing a new shader effect from scratch is quite a daunting task. Luckily, shader technology has been used on graphics cards for more than a decade now and there is an abundance of books and internet tutorials. So instead of trying to re-invent the wheel, we just hunt around to find an example in the three.js space. And voila, there we are.

The Demo

All we have done here is adapt the three.js example to use a GFXScene and replace the original scene with a simple torus-knot that slowly rotates.

And that's it! Click on this link to see the actual rendered demo in all it's crepuscular glory!

As always, the original sources are on github here.



About Us | Contact Us | ©2017 Geo-F/X