Quick Start - Virtual Reality
As Wonderland Engine is focussed on WebXR, using the WebXR Device API through it is very convenient.
In this tutorial, we will set up necessary components for controller inputs.
We continue where we left off in Getting Started.
Fundamentals
Some background information, feel free to skip to Controller Input, if you are familiar with VR and running WebXR Apps on the Oculus Quest.
Stereo Rendering
Once the VR mode is entered after the user pressed the “VR” button on the bottom right of the screen, the Wonderland Engine autmatically starts rendering in stereo.
“Stereo” means that there is two views rendered: One for the left and one for the right eye. The opposite is “mono”, which is a single view.
When clicking on the “Player” object, you will find the “NonVrCamera” for mono rendering, and the “EyeLeft” and “EyeRight” objects for stereo rendering.
Headset Input
To make the views follow the user’s head, the “EyeLeft” and “EyeRight” have “input” components set up already (from the default scene). Input components read various forms of input poses and apply them to the objects they are attached to.
View on Oculus Quest
Follow Chrome’s guide on how to remote debug devices.
In case the Oculus Quest does not appear, you need to run adb devices
to get the adb-server started. Adb comes with the Android Platform Tools.
Finally, forward port 8080 following this Chrome Port Forwarding Guide.
This way you can access http://localhost:8080/index.html from within the Oculus Browser and
circumvent the requirement of “https” for WebXR (this is only possible on “localhost”!).
Controller Input
Now that our application runs on the Oculus Quest, our next step will be to add controllers.
Controller Models
Download quest_controllers.glb, low-poly Oculus Touch v2 controller models by Jezza3D, that were imported into blender and exported as glb with some modification to their transformation.
Drag and drop the new file into the assets folder. From there, drag them onto the “Player”
object.
Components
Add an input component to each of the controllers and set the input type
to hand right and hand left accordingly.
After clicking “Package”, your controllers should now be visible and moving around in VR!
Summary
Creating WebXR controls in Wonderland Engine is very convenient.
From here, you can start adding custom behaviour with your own JavaScript components.
