Rendering Text in WebVR
Within (https://with.in/) is a platform for storytelling in virtual reality. So when the team heard about WebVR in 2015 we were immediately interested in its potential. Today, that interest manifests into a unique subdomain of our Web platform, https://vr.with.in/. Anyone with a VR-enabled browser can go to the site, click a button and throw on a headset to be immersed in our portfolio of VR films.
Today that includes but is not limited to Chrome on Daydream View. For information on your device and head-mounted display check out https://webvr.info/.
Like other virtual reality specific rendering environments, the web predominantly relies on a three-dimensional representation of a scene. This scene has a camera, your perspective, and any number of objects. To help manage this scene, camera, and objects we use a library called Three.js which leverages the
<canvas> element to throw rendering onto your computer's GPU. There are many useful Three.js add-ons to make your scene viewable in WebVR. The main two are THREE.VREffect for creating a viewport for each eye and THREE.VRControls for translating the perspective (e.g the rotation and position of the head-mounted display) convincingly into your scene. There are many examples of how to implement this. Check out the Three.js WebVR examples for ways to get started.
As we got further into our exploration of WebVR we ran into an issue. If we look at the contents of the web, text is an integral part of it. While the majority of our content is video based, if you go to the Within site text surrounds the content; the user interface and additional information about a film or related films are all constructed with text. Furthermore all of this text is created in the DOM. Our WebVR explorations and https://vr.with.in/ are all in
What are my Options? #
Luckily, there is work being done to make this possible. In fact in our research we found a number of effective ways to render text in a three-dimensional environment on a
<canvas> element. Below is a matrix of a few we found marked with pros and cons for each:
|Resolution Independent||Typographic Features||Performance||Ease of Implementation|
|2D canvas text||Yes||Yes||Yes|
|Triangulated vector text||Yes||Yes|
|Extruded 3D text||Yes|
|Signed distance field bitmap text||Yes||Yes||Yes|