Back in my college days, plumbing was a hands-on job that paid the bills and taught me the value of problem-solving, often in the least glamorous of situations. It's a stark contrast to my life now, where such practical challenges have given way to the virtual intricacies of programming. Recently, while programming a digital black hole loading screen, I found myself chuckling at a linguistic echo from my plumbing days as 'accretion disks' humorously became 'secretion disks' in a slip of the tongue.

Yet, this slip-up turned out to be serendipitous, reminding me of the profound theories that suggest black holes are more than just star-devouring monsters; they could be creators, 'secreting' new universes in their mysterious depths. Such a concept was too compelling to ignore and quickly became the conceptual backbone of my loading screen. Instead of a mundane progress indicator, I envisioned a dynamic visual story. The screen would not only depict the collapse into a black hole but also the emergence into a vibrant new digital universe, an invitation to witness the birth of an online world, a metaverse.

Tech

Black hole shader

Despite loving the idea of a black hole, I had no idea how to create one. I started by researching and stumbled onto someone that made a three.js project that had a black hole. This is where I started.

My stack is typescript, react, and react fiber (three.js for react). Unfortunately, the implementation was not a simple drag and drop. I ended up ditching all the code in that project minus the shader. I then spent the following week converting and improving the shader to allow for more dynamic control, such as changing the accretion disk size and a bunch of other visual niceties.

Constellations

People don't usually seek out loading bars; they often lead to frustration when they're slow or don't reflect the actual loading progress accurately. I needed something that I could show the user right away, and then slowly fade to the bigger more dynamic experience. I wanted to stay on theme, this is where constellations came into play.

When the user lands on the page, they are shown a CSS version of the constellations. It is at this time I load the loading scene. Once the loading scene is loaded, I compute the same constellations in the three.js scene. I then fade the 3d scene over top of the CSS scene. This gives the user a smooth transition from the CSS scene to the 3d scene. Once in the scene, I am able to do more complicated animation and effects. The user is then shown the black hole until which point the final scene is loaded.

Next steps

• Loading text
  • I want to fade in "Loading" while the black hole is shown after X seconds. I find if it hangs too long, it might confuse the user.
• More scenes!
  • Now that I have a smooth loading scene, I can start to increase the complexity of the main scene. I plan to add the Maker and Photography sections to give better categorization of my work.
• Better mobile support
  • Right now the mobile experience of the main scene is not great. I plan to add a mobile version that allows for scrolling of the "doors".
• Constellation experiment
  • I have a fun constellation experiment in mind that I want to try. It involves generative art with a twist of humor.