Experiment Using "Volumetric Light" in Shifted Depth GIF Effect with Three.js

This is a short note about some experiments I have been doing with using "volumetric light" as the "bars" in a shifted depth gif effect with three.js.

The demo visualization using this effect is at https://learnforeverlearn.com/splitdepth/.

The "volumetric light" is based on the work of Jerome Etienne (https://github.com/jeromeetienne/threex.volumetricspotlight) using 3D cylinders.

There are many other properties of the visualization that can be tweaked via the (hideable) controls, including switching back to "simple" bars whose opacity can be varied.

dat.GUI - an Easy Way to Allow Users to Adjust Variables in a Three.js Visualization

Generate a control tool
for your three.js viz
with a few lines of code

As part of playing with the "split depth GIF" effect in three.js, and as part of simply learning about three.js itself, I wanted to have a way to adjust various parameters so that I could see the effectiveness (or lack thereof) for certain combinations of values.

I have done this with the dat.GUI library by the Google Data Arts Team (source on github).

My sample interactive visualization that motivated my interest in dat.GUI is available at https://learnforeverlearn.com/splitdepth/.

The purpose of this note is to provide some details on basic usage of the fantastically useful dat.GUI tool. Links to more advanced tutorials are provided below.

Implementing the "3D Split Depth GIF" Effect in Three.js

Note: The sample visualization has not been tweaked for small screens yet (or touch/swipe), although it looked ok in landscape on my iPhone and has been reported to work on a Moto X G2.

The sample interactive three.js/webgl visualization using this the method discussed here is at https://learnforeverlearn.com/splitdepth/.

Animated gifs made from the three.js visualization are included below.

2015 - The Internet Discovered Split Depth GIFS

Last January, there was a lot of buzz about a weird technique that could make animated gif's more "3D like". The effect is pretty remarkable.

I was wondering about exploring using this same effect in interactive three.js 3D visualizations (which is a new area for me).

It turns out that it seems to be pretty simple to implement in three.js.

This might provide some additional ways to improve the user experience when working with 3D visualizations and the associated hard-to-avoid clutter.

Popular Posts