Wie funktioniert ein Echtzeit Rundgang im Browser und was sollten Architekturbüros darüber wissen?
Ein Echtzeit Rundgang im Browser läuft ohne Installation, doch dahinter steht eine Kette von Entscheidungen: von der Modellaufbereitung über die Datenübertragung bis zur Geräteleistung. Der Beitrag erklärt, wie ein Unity Immobilien Rundgang als WebGL Architekturvisualisierung lädt, was Optimierung in der Praxis heißt und wo die Grenzen liegen.
Was ein Echtzeit-Rundgang im Browser bedeutet
Bei der Echtzeit-Visualisierung ist das Bild keine Aufnahme. Das Gerät des Besuchers berechnet es laufend, bei jeder Bewegung von Maus oder Finger. Deshalb kann sich der Besucher frei durch den Raum bewegen und ist nicht an einen vorgegebenen Pfad gebunden.
Unity ist eine Entwicklungsumgebung, die Szenen als WebGL exportieren kann. Das Programm wird nach WebAssembly kompiliert und läuft im Browser, ohne Plug-ins und ohne Installation. Die Grafikkarte wird über eine Standardschnittstelle des Browsers angesprochen, die alle gängigen Browser unterstützen.
Für Architekten ist entscheidend, dass es sich weiterhin um eine Game Engine handelt. Alles, was der Besucher sieht, muss das Gerät in Bruchteilen einer Sekunde berechnen, unabhängig davon, wie gut das Modell im Planungswerkzeug aussieht. Den Unterschied zwischen einem solchen Rundgang und einem Panorama haben wir bereits separat behandelt, daher konzentrieren wir uns hier auf den technischen Hintergrund.
Echtzeit Rundgang im Browser: was beim Öffnen des Links passiert
Der Browser lädt zuerst die Startseite, danach die Hauptdateien: den WebAssembly-Code, die Szenendaten und eventuelle externe Ressourcen. Die Dateien sind in der Regel komprimiert, deshalb müssen Server und Netzwerk die komprimierten Inhalte korrekt ausliefern. Beim ersten Besuch ist dies der längste Teil der Wartezeit.
Es folgen das Entpacken, der Start der Engine, das Kompilieren der Shader und das Laden der Szene in den Speicher. Beim nächsten Besuch holt der Browser einen Teil der Dateien aus dem Cache, wobei dies von den Einstellungen des Servers und des Geräts abhängt. Während der Wartezeit muss der Besucher einen Fortschritt sehen, sonst verlässt er die Seite häufig.
Größere Projekte sollten Sie in Abschnitte unterteilen. Zuerst wird der Grundraum geladen, weitere Geschosse oder Inhalte erst bei Bedarf, wofür Unity den Mechanismus nachladbarer Content-Pakete bietet.
- Download: Code, Szenendaten und Texturen
- Vorbereitung: Entpacken, Engine-Start, Shader-Kompilierung
- Erstes Rendering: Szene im Speicher, Steuerung bereit
- Streaming: weitere Inhalte werden nachgeladen
WebGL Architekturvisualisierung: Aufbereitung des Modells
Ein Modell aus einem BIM-Werkzeug oder Modellierprogramm ist nicht browserfähig. Es enthält viele Details, die der Besucher nie sieht, und zu viele Daten für ein durchschnittliches Gerät. Der eigentliche Übertragungsweg aus Revit oder ArchiCAD ist in einem eigenen Beitrag beschrieben, hier geht es um die Prinzipien der Optimierung.
Ziel ist es, die Datenmenge zu verringern, die das Gerät in einem Bild verarbeiten muss, sowie den Speicherbedarf. Am meisten gewinnen Sie bei Geometrie, Texturen und Beleuchtung.
Vorberechnete Beleuchtung sieht schön aus und belastet das Gerät wenig, beleuchtet Änderungen in der Szene aber nicht laufend neu. Der Kompromiss zwischen Optik und Geschwindigkeit ist daher eine Projektentscheidung und keine technische Formalität.
- Geometrie: verdeckte Flächen und unsichtbare Details entfernen, Detailstufen (LOD) einsetzen
- Texturen: komprimierte Formate, sinnvolle Auflösungen, Zusammenfassen in Atlanten
- Beleuchtung: vorberechnete Lightmaps statt vieler dynamischer Lichter
- Rendering: Objekte zusammenfassen, Instancing und Occlusion Culling nutzen
- Materialien: möglichst wenige unterschiedliche Materialien und Shader
Geräte und Browser: wofür Sie planen sollten
Moderne Desktop-Rechner mit leistungsfähiger Grafik bereiten in der Regel keine Probleme. Die integrierte Grafik in Business-Notebooks ist deutlich schwächer, und Smartphones sowie Tablets werden durch Speicher, Erwärmung und Akku begrenzt. Ein Projekt planen wir daher für das schwächste Gerät, das die Zielgruppe tatsächlich nutzt.
Die Steuerung unterscheidet sich. Am Rechner stehen Tastatur und Maus zur Verfügung, auf dem Touchscreen ein virtueller Joystick oder das Antippen eines Ziels im Raum. Bei Smartphones kann der Browser die Seite bei Speichermangel sogar schließen, weshalb es oft sinnvoll ist, eine leichtere Qualitätsstufe anzubieten.
Tests auf realen Geräten sind unverzichtbar. Eine Simulation auf dem Rechner des Entwicklers sagt nicht, wie sich ein älteres Smartphone verhält, prüfen Sie deshalb mindestens Chrome, Safari, Edge und Firefox.
Echtzeit-Visualisierung: wo die Grenzen liegen
WebGL läuft innerhalb der Sicherheitsumgebung des Browsers, daher hat die Engine weniger Freiheiten als eine Desktop-Anwendung. Der Speicher ist begrenzt, Multithreading ist in Unity für das Web stark eingeschränkt, und ein direkter Zugriff auf das Dateisystem besteht nicht.
Die Optik kann nicht mit vorgerenderten Bildern identisch sein. Reflexionen, weiche Schatten und komplexe Verglasungen erfordern Kompromisse, weshalb ein Echtzeit-Rundgang kein Ersatz für fotorealistische Renderings ist, sondern eine Ergänzung mit anderem Zweck.
Weitere Einschränkungen bringen äußere Faktoren: Firmennetzwerke, die Einbettung in eine Seite per Frame mit Beschränkungen bei Vollbildmodus und Mauserfassung sowie die langsame Verbindung des Besuchers. Der neuere Standard WebGPU entwickelt sich weiter, die Unterstützung unterscheidet sich jedoch noch je nach Browser und Gerät, bauen Sie daher keine zwingenden Annahmen darauf auf.
Häufige Fehler bei der Veröffentlichung eines 3D-Rundgangs
Der häufigste Fehler ist die Veröffentlichung des Modells in der Form, in der es aus dem Planungswerkzeug kam. Die Folgen sind lange Ladezeiten und Ruckeln auf durchschnittlichen Geräten.
Öffnen Sie den Link vor der Veröffentlichung in einem sauberen Browser ohne Cache, über eine langsamere Verbindung und auf einem Smartphone. Wenn die Erfahrung dann noch nachvollziehbar ist, steht das Projekt kurz vor der Veröffentlichung.
- Test nur auf einem leistungsstarken Rechner
- Unbegrenzte Texturauflösung und zu viele verschiedene Materialien
- Keine Anzeige des Ladefortschritts
- Server ohne Komprimierung oder mit falschen Header-Einstellungen
- Touch-Steuerung und mobile Ansicht übersehen
- Kein Ersatzinhalt, wenn der Browser WebGL nicht unterstützt
Was Sie als Nächstes tun können
Öffnen Sie den öffentlichen Demo-Rundgang, einen freien 3D-Rundgang durch ein Musterhaus, auf mehreren Geräten und beobachten Sie Ladezeit, Ansprechverhalten der Steuerung und Schattendarstellung. ARHIX baut solche Rundgänge mit Unity WebGL, daher ist die Demo eine brauchbare Referenz für ein Gespräch über Ihr Projekt. Die Notizen aus diesen Tests sind eine gute Grundlage für den nächsten Schritt.
Erstellen Sie danach eine Liste der Zielgeräte, legen Sie eine Obergrenze für die Datenmenge fest und vereinbaren Sie, was im Raum exakt dargestellt sein muss und was vereinfacht werden darf. So vermeiden Sie Probleme, die sich sonst erst kurz vor der Veröffentlichung zeigen würden.