Two open-source demos show WebXR could be used to make full-fledged games.
WebXR is an open standard API that enables webpages to display immersive content on headsets that tracked controllers can interact with. WebXR experiences use WebGL for rendering, which is based on OpenGL ES. You can access WebXR apps near-instantly via the browser like any other web app. No installation or updates are required, and the developer doesn’t need approval from a central app store authority.
Meta’s Project Flowerbed is a WebXR demo game where you use seeds to plant and grow flowers, trees, and other plants. It features a user interface, teleportation, an in-world camera, spatial audio, and appealing graphics with PBR materials, detailed geometry, and real-time lighting.
The source code for Project Flowerbed is accessible on GitHub, and Meta’s developer blog post explains the technology stack used. It uses the most popular WebGL library for rendering, three.js, with the third-party three-mesh-ui extension for the world-space user interface and three-mesh-bvh for raycasting and collisions. 3D assets are in Khronos’ glTF file format, while the howler.js library is used for spatial audio. Meta developed its own entity-component system (ECS) for logic, as well as other systems like a JSON to UI panel importer, all detailed in the blog post.
Creative agency Paradowski Creative also released the source code for their WebXR putting game this week, Above Par-adowski WebXR Mini-Golf. It also uses three.js, combined with the popular A-Frame entity component system and NVIDIA’s PhysX physics engine running in the browser via WebAssembly. While Project Flowerbed runs at 72Hz, WebXR Mini-Golf runs at 90Hz. Since it launched in November, Paradowski says WebXR Mini-Golf has been played by more than 70,000 VR users.
Paradowski Creative is working on a second WebXR experience called The Escape Artist, an escape room game with puzzle mechanics slated for release next month.
WebXR on Quest still lacks one key ingredient, however: convenient payments. The critical advantage of publishing a native application on App Lab is that implementing monetization is trivial, either by charging for the app or via managed in-app payments.
How To Try These Demos
Meta recently added the ability for websites to add a button to let you remotely launch a URL on your Quest, including WebXR experiences, and Project Flowerbed leverages this. To try it on your headset, just go to the Project Flowerbed web page on the device you’re reading this article on and click ‘Send to Headset’ – no need to search for and find it in the Quest browser.
Above Par-adowski WebXR Mini-Golf doesn’t use this feature, but you can easily find it by Googling ‘WebXR minigolf’ in the Quest browser.
