Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Wastepaperbin AR

Small web based AR game to demonstrate the WebXR Device API AR implementation in Wonderland Engine.

Build instructions

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:

  1. Open "WastepaperbinAR.wlp"
  2. Click the green arrow at the top (or hit F5).

Your browser will open with the web page.

Running on Android

To view the game through Chrome on Android (which is currently the only browser that supports WebXR AR):

  1. Connect your phone via USB (make sure to have developer mode enabled)
  2. Open chrome://inspect#devices on your desktop
  3. Click "Port forwarding..." and forward 8080 to localhost:8080.
  4. Open localhost:8080 in Chrome on your Android device

Game flow overview

The game renders nothing until the "AR" button is pressed.

Scan Surroundings

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.

Place Wastebin

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!

Swipe to Throw

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.

JavaScript Components Overview

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.


Small WebAR game to demonstrate Wonderland Engine's WebXR Device API AR integration.







No releases published


No packages published