Famicase WebXR
Role:
Date: June 8th, 2020
Hawken in 2019, advising you to “super don’t delay on learning WebXR”
Back in 2019 I was contracting for a VR start up, we had a short “anything goes” R & D period where I took an interest in Web VR, trying out whatever was out there. I stumbled upon A-Frame, a high level framework that uses normal html and spices it up with Javascript. It’s a gross generalisation to say this is how it works, but thats the basics.
Also in 2019 the Oculus Quest came out. I tried a few A-Frame things in the supplied browser, most ran slowly thanks to the limited power of the device: running in a browser, running VR in VR in VR. It’s like some kind of inception emulation puzzle, each level away from the metal of the device takes a performance hit.
I shelved the idea. If WebVR is going to work, it needs to work on the Oculus, no compromise.
The “Franken-Mac”
Fast forward to 2020, I’m not contracting for the VR start up any more, I have a Quest on my desk, a Vive on my desk. The Vive gets little use as I need to boot in to Windows on my Franken-mac to use it. The Quest gets a lot of use, I love to play games in this thing and side-load my own little unity projects.
Sometime around the start of 2020 the Quest gets an update to the Browser, “Polyfill” becomes a thing and people start taking an interest in WebVR again. A-Frame changes over to WebXR, things speed up a little and the community is invigorated again. Oculus start featuring Web VR experiences on the browser landing page, it looks like Web VR is a thing again? Let’s find out.
Some Web VR content is amazing, and I want in.
What really spoke to me was the accessibility of the platform. Just give someone a URL and they can interact with your work.
I decided to ask the guy who runs Famicase if I could make a VR version of his exhibition. Initially this didn’t start off as a Web VR project, I was actually doing a lot of Unity based VR at the time. It seemed like a good fit for Web VR though.
The scope:
Remake the exhibition in VR.
Things I learned about mobile Web VR that might be of some use:
- Dial back your expectations, WebVR on Quest can only handle a few thousand polygons onscreen.
- PBR materials, lighting or shadows affect the framerate badly
- Use LODs, low resolution textures and vertex colouring to your advantage
- Did I mention A-Frame uses PBR materials by default? Best avoid using this unless you want to run a slideshow.
- Dial back your expectations again.
So I started out wanting to make something like this (271 artworks, faithful to the exhibition space):
And ended up making this (25 artworks, paginate-able):
Why so different? The initial idea worked well on PC, but on the Quest, even using every fancy trick in the book, the frame rate made you want to curl up into a ball and cry. Let’s dial all the way back to the lowest expectation; what is it I am trying to achieve with this experience? Just viewing artwork, right?
OK, start from there and see where you can go.
50 or so carts worked but the frame rate would occasionally jitter. Is 25 enough at a time? You bet. OK I have some breathing room now, let’s make something interesting, like this:
The Result:
In all I’m pleased with the result, even if it did eat up a few more evenings than I expected. It runs buttery smooth on the Quest. I learned way more than I thought possible.
Famicase – https://famicase.com/
VR Famicase – https://hawkenking.com/webxr/
A-Frame – https://aframe.io/
THREE.JS – https://threejs.org/
VSCode – https://code.visualstudio.com/