Kabedon VR

Are you afraid of missing out on the kabedon phenomenon? Now you can experience kabedon in the privacy of your own home. Don your VR goggles and immerse yourself in a kabedon encounter that will tickle two of your senses.

This is a little web toy that I used to learn WebXR and the pipeline of making animations in Blender and exporting them to work in a web browser. It uses 3d assets from Synty and Kenney, plus a skybox I grabbed from OpenGameArt. Although I had initially planned on coding this in Babylon.js, after multiple months of failing to make any progress with it, I ended up coding it up in Three.js instead for TOJam game jam. 

Development was mostly smooth, with these few issues:

1. It took me a while to figure out that Babylon.js simply didn't work for me. Babylon.js is built more as a framework, a giant opaque box that does everything and controls everything. The problem is that to change its behaviour, you need to dig into the box and swap out things and tinker with its contents to make it do what you want. To do that, you have to really understand how the framework works and have good documentation on what to change.  Unfortunately, I could never understand Babylon.js well enough to get into a Babylon.js mindset, and the documentation was generally lacking. As such, I could never really figure out how to modify Babylon.js to do what I wanted it to, and I would have to spend hours and hours reading documentation to make even small changes. In the end, I ended up using Three.js, which is built more as a library, where there are a lot of parts that you have to assemble together to do what you want. Getting started in three.js is harder because you actually have to know how the parts fit together and write some code to get things to start working, but there are templates for that. The documentation for Three.js also isn't exactly amazing, but there are lots of examples and forum posts with samples that I could look at. It's true that you need to write more code to assemble all the parts together in three.js, but you don't have to understand three.js all that well if you only want to make small changes. Since it's just a bucket of parts that you assemble yourself, you can just create your own parts if you can't figure out the three.js stuff
2. The initial project template I used for Babylon.js used vite, so I used that throughout my project even after transitioning to three.js. I ended up with various issues with vite and relative paths and using vite while proxied over adb to a Quest headset. These configuration issues took quite a bit of time, and some of them I never ended up solving and just needed to manually fix
3. Surprisingly, making a UI in VR, especially one that works with a mouse as well, was somewhat difficult. Standard DOM stuff doesn't work in VR, so you need custom UI code. But since VR user interfaces are still in flux, things haven't really been standardized yet. So I had to figure out how a 3d UI is supposed to work myself. How far should a UI window be from a person? How should it work with controllers vs with hand controls vs with a mouse? Where should the UI be placed? Should it move around with the player? etc. etc. There were, in fact, several 3d UI libraries available for Three.js, but I felt a bit uneasy about all of them. They all seemed to use their own font rendering code for some reason. Although writing your own SDF font renderer demonstrates significant graphics programming talent, custom font rendering is fundamentally unsuitable for web UIs, making me unsure if those libraries were mature enough yet.
4. The difficulty of learning Blender is practically a meme at this point. I've failed to learn Blender many times in the past. I've now finally learned enough Blender to make a very simple animation, but it was annoying to learn, and the whole thing was pretty janky. There were many annoyances in the Blender UI like selecting things in the list view isn't the same as selecting things in the 3d view. Menu options sometimes appeared or not appeared depending on some unknown context or some obscure UI mode. Even now, I'm not sure I can repeat the steps I did before  from certain tutorials because I couldn't reliably get certain menu options to show up when I expected them to. In the end, I came to a really inefficient workflow that worked, but I'm sure there's a better way. I ended up making tens of clicks just to make a single keyframe; I needed some confusing random button mashing to move between actions and the NLA editor; and I needed to flip through 4 or 5 panels that couldn't all fit on the screen at the same time to find different buttons. Even things like exporting seemed jank, with it messing up my model afterwards, so I couldn't really save my Blender project after exporting, and certain things not exporting sometimes, so I would need to bake parts of the animation first to export it.