Supernova Animation using Three.js

Recently I found myself curious as to how difficult it would be implement a version of my LG TV’s supernova screensaver? So over the July 4th weekend I decided to create my own virtual fireworks by coding up the supernova-animation-experiment project.

For reference here’s a video of the LG screensaver I found on youtube.

A link to the project source code is provided at the end of this article.

My coding objectives for the project were to create a webapp using the three.js JavaScript 3D library, the TypeScript programming language, WebPack and the CodeMix plugin for Eclipse. I’ve been creating experiments using three.js for a while and this project would be my first working with a point cloud, custom points and point animation.

Fast forward, here’s a screenshot for how it turned out. Each supernova cycle is approximately 7 seconds with a random 1-3 second delay between supernova events. I created a couple of variations of the explosion including an inverted explosion where each point velocity vector projects thru the point cloud center. This creates a momentary implosion effect followed by an exploding of the points out the opposite side of the point cloud center.

I was able to quickly code up a basic exploding point cloud. But it had a major flaw; my points were square and looked goofy. From the three.js api docs I could not figure out how to implement round points of arbitrary sizes. I unsuccessfully tried several approaches on my own before I swallowed my pride and googled up a solution by Waldemar Lehner that got me unstuck. The solution ended up including a simple custom webgl shader. Using the shader was another first for me.

Eclipse-haters hear me out before booing. I wanted to use Eclipse with the CodeMix plugin on this project specifically because I have a lot of experience developing with Eclipse and this young plugin gives me everything I can get from Visual Studio Code plus more within the familiar UX of the Eclipse IDE. While CodeMix has many cool editing and debug features the new Live-Preview is one of the smartest features I’ve seen in an IDE. It intelligently discovered that my project is configured to use WebPack and was able to automatically render my project as I developed the code. In addition, I like the Markdown support of Live-Preview; you can read a previous blog I wrote about it. Wrapping up see for yourself how cool Live-Preview is in this intro video.

Pretty cool huh?

In a future blog I’ll dissect the shader code and maybe some of the three.js BufferGeometry code that I enjoyed working on. As promised the project src code can be found in this git repo.