Immersive 3D visualization of GeoBuzz sound elements using A-Frame.
- 3D visualization of sound elements as floating spheres
- Transparent torus rings showing sound boundaries
- Optional camera view mode (AR-like experience)
- LFO animation support for size modulation
- Real-time visual feedback for active sounds
- Pulsing animations when sounds are playing
- GPS-based camera movement with smooth transitions
- Device orientation compass alignment
- Serve GeoBuzz with a local or remote server
- Navigate to
/examples/05-aframe/ - Click "Start" to begin audio playback
- Move around physically to navigate (uses GPS)
- Click "Camera View" to toggle device camera as background (requires HTTPS)
The included buzz.json demonstrates three circular sound zones positioned around the user:
- Bass (blue, north) - Sawtooth synth with filter modulation, breathing size animation
- Pad (pink, southeast) - Triangle wave with pitch modulation, gentle size pulse
- Shimmer (green, southwest) - Sine wave with volume modulation, dynamic size animation
Each zone has a 10-meter radius with boundaries starting 10 meters from the user's position. Uses relative positioning for portable experiences.
- Center sphere: Represents the sound source position
- Torus ring: Shows the sound's active radius (animates with LFO)
- Opacity: Playing sounds are bright, inactive sounds are dimmed
- Pulse animation: Active sounds pulse gently
- Distance labels: Show real-time distance to each sound
- A-Frame for 3D rendering
- RuntimeEngine in headless mode (hidden map)
- Coordinate transformation: GPS offsets → 3D space
- Leaflet for internal map operations
- Tone.js for audio synthesis
When enabled, uses the device's rear camera as the scene background for an AR-like experience. Requires:
- HTTPS connection (for camera access)
- Camera permission granted
- Device with rear-facing camera
Replace buzz.json with your own exported buzz file from the GeoBuzz editor to visualize your compositions.