Playlist Browser XR - Spotify playlists in VR

Hello everyone,

I spent a few weeks of my spare time working on this: GitHub - Symbitic/PlaylistBrowserXR: Browse Spotify playlists in Virtual Reality.
It’s a browser for Spotify playlists in WebXR. I plan on using it as a starting point for more games, like something Beat Saber-ish.

It’s hosted on Azure Static Web Apps. It uses a serverless function to handle authentication and the Spotify Web Playback SDK for playing Spotify tracks. I included a more detailed explanation and a walkthrough in the README.

As usual, a big thanks to the Babylon.js community. The Observable type in particular was very nice, even in the parts that didn’t involve Babylon, like routing/authentication, Spotify API calls, and error messages.

This is not condoned by Spotify.

Login screen


For the Babylon.js developers, I did notice a few weaknesses while I was developing this:

  • The holographic controls. HolographicButton only works as a square. Not good for labels or non-square images. I ended up implementing my own HolographicLabel (included in the source code).
  • When adjusting otherwise trivial parameters, it was common to make the virtual reality floor seem much higher than in the real world. Sometimes that was just perceived rather than actual. But it’s easy to miss if you’re prototyping in a regular browser and only try a VR headset later.
  • 3D Menus. It was very difficult to get menu controls to align correctly. The top-level control is a vertical StackPanel3D. That has 2 HolographicLabels and a CylinderPanel as children. It took quite a bit of effort to get everything to align correctly.
1 Like

Thanks for the feedback, adding @PirateJC and @RaananW to have a look at them deeply.

1 Like

Thank you so much for sharing, this is awesome!
And thanks a lot for the feedback. We’ll go over it and see how we can improve. I’m always happy to read very constructive feedback based on actual experience.