Babylon.js "magic" piano portal
An augmented-reality WebXR animation of Chopin's "Winter Wind" Étude that creates a virtual piano portal on your wall.
Overview
This project is an interactive augmented reality experience that renders a virtual piano playing Chopin's "Winter Wind" Étude as if it were a portal on your wall. It leverages WebXR for immersive AR viewing on devices like Meta Quest headsets, but also functions as a standard 3D animation on flat screens. The experience combines 3D graphics, music synchronization, and spatial computing to create a unique digital art piece.
Key Features
- WebXR Augmented Reality — View the piano animation as an AR portal in your physical space using compatible VR/AR headsets with passthrough.
- Flat-screen Compatibility — The animation works in standard web browsers without requiring AR hardware.
- Interactive Piano Visualization — A 3D piano model plays Chopin's étude with synchronized key animations driven by MIDI data.
- Magic Portal Effect — Uses a stencil buffer and clip plane to create the illusion of a portal cut into a virtual wall.
- Live Demo Available — A hosted version is accessible online for immediate testing.
Philosophy
The project demonstrates how Babylon.js can be used to create engaging, accessible mixed-reality experiences that bridge the gap between immersive AR and traditional web 3D graphics.
Related Projects
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
