Vanilla3D: Potenziale und Grenzen DOM-basierter 3D-Darstellungen im Web

3D-Power ohne WebGL: Vanilla3D nutzt native Browser-Standards für barrierefreie, leichtgewichtige Szenen direkt im DOM, die Brücke zwischen klassischem Webdesign und räumlicher Tiefe.

Ausgangslage

Moderne Browser unterstützen 3D-Transformationen nativ, doch für komplexe Szenen wird meist auf WebGL zurückgegriffen. Dabei gehen die Vorteile des Document Object Models (DOM) verloren: Objekte in einem Canvas sind für Screenreader unsichtbar und lassen sich nicht einfach mit CSS stylen. Vanilla3D setzt hier an und untersucht, wie 3D-Inhalte als identifizierbare DOM-Knoten erhalten bleiben können.

Zielsetzung

Das Ziel der Arbeit ist die Entwicklung und Evaluation eines prototypischen Frameworks, das ausschliesslich auf HTML, CSS und JavaScript basiert. Es wird untersucht, inwieweit ein DOM-basierter Ansatz eine praktikable, barrierefreie Alternative zu WebGL für interaktive Web-Anwendungen darstellt und wo die technischen Belastungsgrenzen des Browsers liegen.

Ergebnisse

Die Evaluation von Vanilla3D zeigt, dass DOM-basiertes 3D eine performante und hochgradig interaktive Lösung für UI-nahe Visualisierungen darstellt. In Performance-Tests auf moderner Hardware (Apple M2) konnten Szenen mit bis zu 5'000 Objekten flüssig mit 60 FPS gerendert werden, während die Belastungsgrenze bei etwa 10'000 Elementen erreicht wurde.

• Nahtlose Integration: Volle Bedienbarkeit von HTML-Formularen und Medien direkt auf transformierten 3D-Flächen.
• Native Barrierefreiheit: 3D-Objekte bleiben als DOM-Knoten für Screenreader lesbar und sind per Tastatur navigierbar.
• Optimierte Performance: Nutzung von GPU-unterstütztem Compositing zur Vermeidung von teuren Layout-Reflows.
• Entwicklererfahrung: Einfaches Debugging und Live-Styling der 3D-Szene über die gewohnten Browser Developer Tools.
• Mathematische Stabilität: Einsatz von 4x4-Matrizen zur Vermeidung von Gimbal Lock bei komplexen Rotationen.
• Geringer Footprint: Vollständiger Verzicht auf externe Bibliotheken und WebGL-Overhead für schnelle Ladezeiten.

Die Usability-Tests bestätigen eine sehr geringe Einstiegshürde; Testpersonen bewerteten die Intuitivität der Steuerung im Durchschnitt mit 4,4 von 5 Punkten. Insbesondere die fehlerfreie Übertragung vertrauter 2D-Interaktionsmuster in den Raum wurde als herausragende Stärke identifiziert.

Gleichzeitig wurden systembedingte Grenzen beim Fehlen eines hardwarebasierten Z-Buffers sowie bei extrem hohen Objektanzahlen deutlich, was den Fokus auf strukturierte, interaktive Szenen lenkt.

Testimonial
«Vanilla3D zeigt eindrücklich, wie native Webtechnologien die Lücke zwischen klassischem Interface-Design und räumlicher Darstellung schliessen können. Die Vision, 3D-Inhalte nicht als isolierte Grafik, sondern als integralen, barrierefreien Bestandteil des Webbrowsers zu behandeln, bietet spannende neue Möglichkeiten für die moderne Webentwicklung.»
Prof. Dierk König & Fabian Affolter, FHNW

Technische Schlüsselbegriffe

• DOM-RenderingAbbildung der 3D-Szene direkt über die Baumstruktur des HTML-Dokuments statt in einem isolierten Canvas-Element.
• CSS 3D TransformsNutzung nativer Browser-Eigenschaften zur räumlichen Positionierung und Rotation von HTML-Elementen.
• Matrix-TransformationEinsatz von 4x4-Matrizen für stabile räumliche Berechnungen zur Umgehung von Problemen wie dem Gimbal Lock.
• Reaktive ArchitekturEffiziente Synchronisation des Objektzustands über Observables und CSS-Custom-Properties.
• glTF-ImportDekonstruktion binärer 3D-Modelle in adressierbare, einzeln manipulierbare DOM-Flächen.

Kunde

FHNW - Institut für Mobile und Verteilte Systeme
Bahnhofstrasse 6
5210 Windisch
www.fhnw.ch

Team