CSS-Tricks hat am 27. Dezember 2016 eine Anleitung für eine interaktive Audio-Visualisierung mit WebVR veröffentlicht. Der Beitrag Reactive Audio WebVR verbindet three.js, die WebVR-Polyfill und die Web Audio API mit einer 3D-Szene im Browser.
Das Beispiel erzeugt mit three.js eine Szene aus zufällig verteilten Würfeln. Ein Renderer zeichnet die Geometrie auf ein Canvas, während VRControls die Blickrichtung über die Bewegungen eines Mobilgeräts aktualisieren. Ohne VR-Viewer kann die Szene per Maus oder Touch bedient werden.
Stereoskopische Darstellung mit VREffect
Für die eigentliche VR-Ausgabe nutzt das Tutorial VREffect. Die Anwendung rendert damit getrennte Bilder für das linke und rechte Auge. Der Beispielcode sucht über navigator.getVRDisplays nach einem verfügbaren VRDisplay und übergibt das Canvas anschließend an requestPresent. Resize-Handler halten Kamera und Ausgabe bei einem Wechsel der Darstellung synchron.
Die Audio-Komponente reagiert auf die Wiedergabe eines Musikstücks und verändert die Visualisierung in Echtzeit. Der Ansatz eignet sich damit für browserbasierte interaktive Medien, technische Demos und Prototypen. Eine ältere 3D-API-Arbeit mit Qt 5.5 zeigt einen früheren Entwicklungsweg für plattformübergreifende Grafikwerkzeuge.