This week I decided to take the WebVR/WebXR extension work I did for Van Wijnen to the next level: mainly to integrate metric information in some way into the scene, whether as 3D text objects or via some kind of Heads-Up Display (HUD). But before embarking on this I decided to take another look at the implementation of the HTML client.
Let’s take a quick look at the parabolic navigation with a simple camera-fixed HUD showing a few metrics from the Generative Design process. Here’s a static image, to give some sense of the approximate quality:
Here’s the navigation in action:
As we can no longer point at the sky (at least not in the same way as with a linear pointer) I’ve wired the day/night toggle to the controller’s trigger, instead.
The implementation tested well with the Gear VR, too, despite reports that the parabolic navigation can have performance issues. The page loads well when you don’t have a VR device connected, too, of course.
One interesting quirk related to the way the page loads geometry: because it’s loaded dynamically from the Refinery server, it gets created after the declarative content. Which would be fine, except for the geometry that’s displayed for the teleport destination (by default a torus with an open ended cylinder using an interesting texture). Because this geometry gets shown using a material with depthTest set to false, it doesn’t display above newer objects (this is just a quirk of how three.js renders a scene). To get around this issue, I found I could change the height of the displayed cylinder very slightly, which caused the geometry to be recreated. This needs to be done whenever we load a new scene, otherwise you just see a parabola without anything at the end. Interesting!
So far I’ve enjoyed using A-Frame for this project: it’s a good way to reduce the amount of code you need to maintain for your WebVR project. Hopefully this will also help with the transition to WebXR, too, in due course.