Pearl Jam Dark Matter Observer

Showcase
, ,
1

I felt inclined to share this project on the forum due to how many incredible learnings I’ve gained from all of you (here) during the construction of this app. The app in question is the Pearl Jam Dark Matter Observer, launched in anticipation of their upcoming album. The experience allows fans to conjure up a black hole in their sky which emanates unreleased music clips. The entire experience is recorded (using MediaRecorder) and provided back to the user as a shareable video. Here’s a video of the app:

And you can try it yourself from a mobile device here:

As for the build, I hot wired DeviceOrientationControls back into my project to allow users to control the camera in our scene using their device motion and orientation. The scene itself consists of only two objects: a randomly placed Sprite in the sky which they must target to begin the experience and a Plane sitting right in front the camera, which receives a custom ShaderMaterial with a VideoTexture uniform. I calculate the 2d screen position of the Sprite and pass it back the shader as a position where the black hole should emit from. The shader then consists of several different uniforms which affect things such as amount of swirl, swirl radius, and rotation speed. In addition, I pass an array of audio levels from a Web Audio player to the shader and use it to affect things such as brightness as well as displace the texture slightly so the sky looks like it is gravity bending to the music. GSAP is used to tween all of these uniforms so the black hole can open, exist, and then close.

I shared a bit more info about the construction here:

https://twitter.com/leemartin/status/1770139492457873733

But, I’m also happy to answer and questions (and field any critiques) here. Thanks again for all of the unknowing support as this one came together.

2

Great experience, UI and visuals are really slick (even though I checked it out indoors). Only criticism I would have is that finding the black hole was just a bit finnicky, but I’m not sure how the UX of that could be improved.
If you have the budget, it’s the kind of thing that would look great using 8th wall sky tracking

1 Like
3

Thank you Arthur! No worries, I built the whole experience indoors - swirling my face. :sweat_smile: I’ve built a few of these experiences which plot things in the sky using Three.js and the latest “locator” UX is based on the wayfinder UX of apps such as Sky Guide. Not perfect but getting there. I’ve avoided using 8th wall partially due to costs but mostly because I like seeing how far open-source can take my clients and I. :pray:

1 Like