Pico8 WebXR

Introduction

I have always been fascinated by the pico8 community. The amount of cool demos and games is amazing and I keep playing some of them like the original Celeste. I even started playing with pico8 myself in my spare time.

So I thought it could be great to be able to play all these games in VR as if you had a big squared screen.

I created a three.js application with WebXR support and load few carts to let you play with them:

How does it work?

• The selected pico8 cart is loaded dynamically into a hidden iframe
• Once the iframe is loaded, grab the canvas where the game will be rendered
• Create a THREE.CanvasTexture with the previous canvas and use it to map an object in the 3D scene.
• On each frame:
  • If not in immersive mode (VR):
    • Redirect all the key events to the pico8’s iframe.
  • If in immersive mode (VR):
    • Process the controllers’ status using the Gamepad API and map these values to key events that will be sent to the pico8’s iframe.
    • As the requestAnimationFrame won’t be called while in immersive mode, call explicitly Browser.mainLoop.runner() on the iframe.