Gaussian Splatting im Browser: Wie ein 3D-Rundgang auf dem Handy flüssig läuft
Ein Gaussian-Splat-Modell einer Wohnung besteht aus mehreren Millionen Splats, also kleinen, weichen Farbflecken, die zusammen ein fotorealistisches Bild ergeben, und die Rohdatei ist mehrere hundert Megabyte groß. Damit ein solches Modell im Browser und auf dem Handy flüssig läuft, zeichnet man nur so viele Splats, wie das Auge unterscheiden kann, lädt das Modell in Detailstufen, also erst in einer groben und dann in einer feinen Fassung, die nahen Bereiche zuerst, lässt die Grafikkarte die Splats sortieren und zeichnet nur dann neu, wenn sich etwas bewegt.
Entscheidend ist dabei, dass das fertige Bild nicht sichtbar schlechter wird. Jede dieser Optimierungen lässt sich mit einem Pixelvergleich gegen das ursprüngliche Bild prüfen.
Warum Gaussian Splatting im Browser anspruchsvoll ist
Ein Gaussian Splat wird anders gezeichnet als ein normales 3D-Modell (Grundlagen: Gaussian Splatting erklärt). Die Splats sind halbdurchsichtig, deshalb kommt es auf die Reihenfolge an: Für jedes einzelne Bild müssen alle sichtbaren Splats nach ihrer Entfernung sortiert und dann von vorne nach hinten übereinandergelegt werden. Bei einer flüssigen Darstellung passiert das 60 Mal pro Sekunde.
Auf einem Handy mit hochauflösendem Display heißt das: Millionen halbdurchsichtiger Flecken pro Bild, auf einem Gerät, das gleichzeitig noch den Rest der Website darstellt und dabei nicht heiß werden soll.
Dazu kommt die Datenmenge. Die Rohdatei der Demo-Wohnung auf horama.de ist 435 Megabyte groß. Über eine Handyverbindung wäre das viel zu langsam.
1. Nur so viele Splats zeichnen, wie man sieht
Der größte Hebel ist ein Budget, also eine Obergrenze für die Zahl der Splats, die gleichzeitig gezeichnet werden. Mit vier Millionen Splats lief die Demo-Wohnung auf einem MacBook mit M3-Chip bei etwa 12 Bildern pro Sekunde, was deutlich ruckelt. Mit einer Obergrenze von 1,2 Millionen am Rechner und 1,0 Millionen am Handy sind es etwa 60 Bilder pro Sekunde, und optisch ist kein Unterschied zu sehen.
Das funktioniert, weil weit entfernte Bereiche auf dem Bildschirm nur wenige Pixel einnehmen. Dort sieht eine gröbere Fassung mit weniger, größeren Splats genauso aus wie die volle. Ist ein Rundgang trotzdem unscharf, liegt das oft schon am Modell selbst. Wie man das unterscheidet, steht in Unscharfe Gaussian Splats: Ursachen.
2. In Detailstufen laden, das Nahe zuerst
Damit der Browser nicht das ganze Modell auf einmal laden muss, wird es in viele Blöcke aufgeteilt, und jeder Block liegt in mehreren Detailstufen vor, von grob bis fein. Der Viewer, also das Programm, das den Rundgang im Browser anzeigt, wählt für jeden Bereich die passende Stufe, je nachdem, wie weit er entfernt ist und wie viel vom Budget noch übrig ist.
Dabei helfen drei Dinge:
- Keine Zwischenstufen laden. Statt sich nach dem ersten groben Bild Stufe für Stufe zur vollen Schärfe hochzuarbeiten, lädt der Viewer direkt die Zielstufe. Das spart rund 25 % der Daten, die das fertige Bild am Ende gar nicht gebraucht hätte.
- Mehrere Dateien gleichzeitig laden. Standardmäßig lädt PlayCanvas, die 3D-Engine, auf der unser Viewer aufbaut, nur zwei Dateien parallel. Mit sechs am Rechner und drei am Handy ist die volle Schärfe bei schneller Verbindung nach 2,1 statt nach 4,9 Sekunden da.
- Das Nahe zuerst laden. Der Raum, in dem man gerade steht, wird zuerst scharf, und nicht der, der zufällig zuerst in der Liste steht.
Zusätzlich hilft es, die Blöcke auf mehr und dafür kleinere Dateien zu verteilen, sodass der Browser nur das lädt, was er gerade braucht. Das brachte am Handy noch einmal etwa 30 % weniger Daten und Ladezeit.
3. Die Grafikkarte sortieren lassen
Das Sortieren der Splats kann entweder der Prozessor des Geräts übernehmen oder die Grafikkarte. Wo der Browser die neue Grafikschnittstelle WebGPU unterstützt, sortiert die Grafikkarte selbst. Dann muss der Prozessor keine Kopie aller Splat-Positionen mehr im Arbeitsspeicher halten, und der Speicherbedarf des Viewers sinkt von rund 70 auf 15 Megabyte. Ältere Geräte und Browser nutzen die bewährte Schnittstelle WebGL2 und sortieren weiter auf dem Prozessor.
4. Nur zeichnen, wenn sich etwas bewegt
Steht die Kamera im Rundgang still, ändert sich das Bild nicht, und es muss auch nicht neu gezeichnet werden. Der Viewer pausiert dann und schont Akku und Lüfter. Die Auflösung passt er an das Gerät an und erhöht sie nur im Stillstand, weil eine Änderung mitten in einer Bewegung als Ruckler sichtbar wäre. Manche Geräte und Browser zeichnen 3D-Grafik nicht mit der Grafikkarte, sondern mit dem normalen Prozessor, was viel langsamer ist. Der Viewer erkennt das und zeichnet dann mit weniger Splats.
5. Schnell ausliefern
Auch der Weg vom Server zum Browser lässt sich beschleunigen:
- In der richtigen Reihenfolge vorladen. Die Website weiß schon beim Erstellen, welche Dateien für das erste Bild nötig sind, und fordert sie an, während die Seite noch lädt. Dabei kommt zuerst der Programmcode und danach die Splat-Daten, damit sich beide nicht gegenseitig die Leitung wegnehmen.
- Alles komprimieren. Textdateien liegen bereits fertig komprimiert auf dem Server. Auch Binärdaten, die viele Server unkomprimiert ausliefern, werden komprimiert. Die Karte der Hindernisse, die dafür sorgt, dass man im Rundgang nicht durch Wände und Möbel läuft, schrumpft so zum Beispiel von 169 auf 30 Kilobyte.
- Lange zwischenspeichern. Dateien, deren Name sich bei jeder Änderung mitändert, darf der Browser ein Jahr lang speichern. Wer den Rundgang ein zweites Mal öffnet, muss kaum noch etwas laden.
6. Messen statt raten
Jede dieser Änderungen wird mit gedrosselten Verbindungen gemessen, die ein Handy oder eine langsame Leitung nachahmen. Außerdem wird das fertige Bild Pixel für Pixel mit dem Bild vor der Änderung verglichen. Zwei naheliegende Ideen haben wir deshalb verworfen, obwohl sie die Bildrate erhöht hätten: die Auflösung bei hoher Last zu senken und nur jedes zweite Bild zu zeichnen. Beides hätte man sehen können.
Häufige Fragen
Läuft Gaussian Splatting auf jedem Handy?
Auf aktuellen Smartphones läuft ein Gaussian-Splat-Rundgang im normalen Browser, ohne App. Wo die neue Schnittstelle WebGPU fehlt, nutzt der Viewer WebGL2. Auf sehr alten oder schwachen Geräten zeichnet er weniger Splats, damit die Bewegung flüssig bleibt. Was Interessenten darin sehen und wie es sich von einem 360°-Rundgang unterscheidet, erklärt 360°- oder 3D-Rundgang?.
Wie viel muss der Browser für einen 3D-Rundgang laden?
Das hängt von der Wohnung und vom Gerät ab. Der Browser lädt aber nie die ganze Rohdatei. Er lädt zuerst eine grobe Fassung, für die wenige Megabyte reichen, und danach die Bereiche in voller Schärfe, die man gerade sieht.
Was ist WebGPU?
Die neue Grafikschnittstelle der Browser und der Nachfolger von WebGL. Mit ihr kann eine Website rechenintensive Aufgaben, etwa das Sortieren von Millionen Splats, direkt auf der Grafikkarte erledigen lassen.
Warum ruckelt ein Gaussian Splat im Browser?
Meist werden zu viele Splats gleichzeitig gezeichnet, oder das Gerät rendert jedes Bild in voller Auflösung neu, auch wenn sich nichts bewegt. Eine Obergrenze für die Zahl der Splats, Detailstufen und das Pausieren im Stillstand beheben das in den meisten Fällen.
Mit welchem Programm werden Gaussian Splats im Browser angezeigt?
Mit einem sogenannten Viewer, einem Programm, das in der Website läuft und das Modell zeichnet. Eine verbreitete Grundlage ist die offene 3D-Engine PlayCanvas, von deren Entwicklern auch der Editor SuperSplat stammt. Mit SuperSplat sieht man sich Modelle an und räumt sie auf, also entfernt Fehlstellen von Hand, bevor sie veröffentlicht werden. Der Viewer von Horama baut ebenfalls auf PlayCanvas auf.
