RetroPanel

Inspiration

I always loved old arcade machines with their big colorful buttons and chunky joysticks. When I saw what Meta’s IWSDK could do in the browser, I wanted to bring that retro arcade experience into AR — no apps, just the web.

What it does

RetroPanel AR lets you play classic NES games on a world-locked AR screen using virtual arcade buttons and a joystick. Everything feels like a tiny arcade cabinet placed in your room, fully interactable with your hands.

It also supports uploading your own NES ROM, so you can instantly load and play any compatible game you have — all running locally in the browser.

How I built it

I used Three.js for the AR scene, JSNES for emulation, and Meta’s IWSDK for AR session handling, plane placement, and input.
The NES emulator renders to a canvas, which I update every frame as a Three.js texture on a plane.
The AR buttons and joystick are simple meshes that detect presses and send inputs directly to JSNES.

Challenges I ran into

• Mapping AR button interactions cleanly to NES inputs
  
• Getting the virtual joystick to feel responsive
  

Accomplishments that I'm proud of

• Built a playable AR NES setup entirely in the browser
  
• Designed working AR arcade buttons and a joystick
  
• Added a nostalgic CRT-style shader for the NES screen
  
• Achieved solid, stable performance with real-time emulation
  
• Created something nostalgic that actually feels fun to use
  

What I learned

• How to use IWSDK for AR, anchors, hit tests, and XR inputs
  
• How to integrate JSNES inside a Three.js AR scene
  
• How to design simple but intuitive AR interaction models
  
• A lot about emulators and real-time rendering pipelines
  

What's next for RetroPanel

• Add cabinet frames and more button styles
  
• Let users resize and reposition the AR arcade
  
• Add multiple ROM selections and save states
  
• Experiment with hand-pose controls for extra inputs
  
• Explore multiplayer or shared-AR placement

Built With

• iwsdk
• jsnes
• three.js
• webxr