Small web based AR game to demonstrate the WebXR Device API AR implementation in Wonderland Engine.
To build and run the Wonderland Engine project, download and start the latest version of the WebXR focused game engine here.
In case you do not have a license key, you can start a trial after signing up on the account page.
After you installed the engine and entered your license key:
- Open "WastepaperbinAR.wlp"
- Click the green arrow at the top (or hit F5).
Your browser will open with the web page.
To view the game through Chrome on Android (which is currently the only browser that supports WebXR AR):
- Connect your phone via USB (make sure to have developer mode enabled)
- Open
chrome://inspect#deviceson your desktop - Click "Port forwarding..." and forward
8080tolocalhost:8080. - Open
localhost:8080in Chrome on your Android device
The game renders nothing until the "AR" button is pressed.
As AR (and especially the AR hit testing) usually needs some time to warm um, we help the tracking by letting the user scan his surroundings. This provides more data to the SLAM to generate a 3D mesh of the area.
Once we retrieve the first AR Hit Test result, the hit-test-location
component (shipped with Wonderland Engine's default components) marks itself
as visible and we can show the cursor mesh at that location.
Once we retrieve the first select event (e.g. a touch, or a trigger press
for AR headsets), we add a new object, attach mesh components, a trigger object
with score-trigger component and collider.
The game can begin!
The paperball-spawner is unhidden and now listens to selectstart and selectend
events to detect a swipe.
Once the user swiped for the first time, we hide the tutorial and instead show the score.
The reset button appears after 3 throws to let the user jump back to the "Place Wastebin" game state.
A short overview over the custom JavaScript components used in this project. Find more detailed descriptions in the respective source files.
Very rudimentary physics for the paper balls.
Confetti particle system based on meshes and objects with also very rudimentary physics.
Spawns paper balls on swipe.
Resets the game state to "Place a Wastebin".
Unused. Moves an object back and forth.
Marks an object with text component as the overhead score display for tutorials and score.
Detects overlaps with balls to spawn confetti and increment score.
Spawns wastebins at hit-test locations.
The wastebin, roomba and paper ball models were taken from Wastepaperbin VR and were created by Maximilian Welscher.
The code was written by Jonathan Hale.
MIT (see License.txt). You can use the project commercially without having to open source your modified code.