Real-world pinball differs from a video game in that the player is continuously moving their gaze over a physical playfield (like a spectator watching a tennis game).
Given the current strengths and weaknesses of mobile-based AR, standing in front of a virtual pinball machine could be a compelling mixed-reality experience.
This project will be in three phases:
- A cannon-es wireframe that establishes the physics of gameplay.
- ARCore implementation.
- A Three.js 'skin' on top of the cannon-es physics bodies (plus sound design).
I am initially developing in vanilla Javascript - along with cannon-es - with an eye on refactoring to incorporate react-three-fiber and zustand.
I am establishing a baseline for the pinball game's physics behavior in WebXR. The videos below depict cannon-es in debugger mode. In addition to the WebXR mode, there is a desktop browser 'emulation' mode that enables faster iteration when developing non-WebXR functionality.
WebXR mode 'yarn start'
pinball-ar.mp4
Emulation mode 'yarn dev'
pinball-xr_1.mp4
Make sure you have Node.js installed.
git clone https://github.com/patrick-s-young/pinball-xr.git # or clone your own fork
cd pinball-xr
yarn (to install)
yarn start (for WebXR mode)
yarn dev (for AR emulation mode)- Left Flipper: A Key
- Right Fipper: L Key
- Refresh browser for new ball (or let ball fall down drain).
- cannon-es - rigid body physics engine.
- three.js - lightweight, cross-browser, general purpose 3D library.
- cannon-es-debugger - debugger for use with cannon-es.
- stats.js - JavaScript performance monitor.
- webpack - static module builder.
- Patrick Young - Patrick Young
This project is licensed under the MIT License - see the LICENSE file for details.