Leitfaden zur Rendering-Leistungsoptimierung

Dieser Leitfaden hilft bei der Optimierung des SDK auf Geräten verschiedener Leistungsklassen für ein flüssiges 3DGS (3D Gaussian Splatting) Rendering-Erlebnis.

1. Anti-Aliasing deaktivieren

Der WebGLRenderer von Three.js aktiviert Anti-Aliasing standardmäßig nicht. Wenn in Ihrem Projekt antialias: true aktiviert ist, sollten Sie es in leistungskritischen Szenarien deaktivieren:

const renderer = new THREE.WebGLRenderer({ antialias: false });

Warum deaktivieren? Jeder Gaußsche Punkt in 3DGS ist eine glatt abfallende halbtransparente Ellipse. Wenn viele Ellipsen überlagert werden, sind die Kanten natürlich glatt und benötigen kein zusätzliches Multisample Anti-Aliasing (MSAA). Das Deaktivieren von MSAA reduziert die Anzahl der Abtastungen pro Pixel der GPU (typischerweise von 4 auf 1) und verbessert die Rendering-Framerate.

Cesium-Benutzer: Der Cesium Viewer aktiviert MSAA standardmäßig nicht, daher sind keine zusätzlichen Maßnahmen erforderlich.

2. Rendering-Auflösung reduzieren

Durch die Verringerung des Geräte-Pixelverhältnisses kann die Gesamtzahl der von der GPU zu verarbeitenden Pixel proportional reduziert werden. Dies ist die effektivste Maßnahme bei GPU-Füllraten-Engpässen.

Three.js:

// Hochleistungsgerät: natives Pixelverhältnis verwenden
renderer.setPixelRatio(window.devicePixelRatio);

// Mittelklassegerät: Pixelverhältnis begrenzen
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));

// Low-End-Gerät / Mobil: festes 1x-Rendering
renderer.setPixelRatio(1.0);

Cesium:

const viewer = new Cesium.Viewer('container', {
    // Rendering-Auflösung über resolutionScale steuern
    resolutionScale: 1.0 // 1.0 für Low-End-Geräte; window.devicePixelRatio für High-End
});

Leistungsvergleich (basierend auf 1080p logischer Auflösung):

Bildschirme mit hoher DPI (z.B. Retina) haben typischerweise ein devicePixelRatio von 2 oder 3. Eine Reduzierung auf 1.0 kann eine 4–9-fache Verbesserung der Fragment-Verarbeitungsleistung bringen, allerdings auf Kosten eines unschärferen Renderings.

3. Maximale gerenderte Splats begrenzen — setMaxSplats

Dies ist der wichtigste Leistungsparameter. Er steuert die Obergrenze der pro Frame am Rendering teilnehmenden Gaußschen Splats.

lccObj.setMaxSplats(3000000); // Max. 3 Millionen Splats pro Frame

Der LOD-Scheduler des SDK durchläuft in jedem Frame den räumlichen Index der Szene und wählt Knoten basierend auf Entfernung und Sichtpyramide für das Rendering aus. Wenn die Gesamtzahl der Splats dieses Limit überschreitet, werden Knoten ab den entferntesten oder niedrigprioritären verworfen, bis die Gesamtzahl das Limit erfüllt.

Referenzwerte: PC: 900.000 – 10.000.000, Mobil: 500.000 – 2.600.000, je nach Geräteleistung. Siehe Empfohlene Konfigurationen nach Geräteklasse am Ende dieser Seite.

4. Maximale Splats pro Knoten begrenzen — setMaxNodeSplats

Steuert die maximale Anzahl gerenderter Splats pro räumlichem Knoten. Knoten, die diesen Schwellenwert überschreiten, werden automatisch auf eine gröbere LOD-Stufe herabgestuft.

lccObj.setMaxNodeSplats(1500000); // Max. 1,5 Millionen Splats pro Knoten

Warum wird dieser Parameter benötigt? In großen Szenen können dichte Bereiche wie Gebäudekomplexe in einem einzelnen Knoten auf der höchsten LOD-Stufe Millionen von Gaußschen Splats enthalten. Ohne Begrenzung würde ein einzelner Knoten bei Kameraannäherung das gesamte Rendering-Budget verbrauchen und für andere Bereiche nichts übrig lassen. Dieser Parameter sorgt für eine gleichmäßigere Verteilung des Rendering-Budgets.

Empfohlene Werte: Typischerweise 1/3 – 2/3 des setMaxSplats-Werts, abhängig von Szenendichte und Geräteklasse. Siehe Empfohlene Konfigurationen nach Geräteklasse am Ende dieser Seite.

5. Start-LOD für Rendering begrenzen — setStartLod

Steuert die höchste Präzisionsstufe. LOD 0 ist die feinste; höhere Werte bedeuten geringere Präzision.

lccObj.setStartLod(0); // Höchste Qualität (Desktop-Standard)
lccObj.setStartLod(1); // Feinste Stufe überspringen (Mobil-Standard)
lccObj.setStartLod(2); // Erste zwei Stufen überspringen (sehr schwache Geräte)

Das SDK erstellt mehrstufige LOD-Daten für Szeneninhalte. LOD 0 enthält Daten in voller Präzision, LOD 1 hat ca. 1/2 der Splat-Anzahl von LOD 0, und so weiter. setStartLod begrenzt die feinste LOD-Stufe, die der Scheduler wählen kann: Bei einer Einstellung auf 1 werden LOD-0-Daten auch bei Kameranähe zum Objekt nicht geladen.

Leistungsauswirkung:

6. Maximale Rendering-Entfernung begrenzen — setMaxDistance

Steuert die maximale Rendering-Entfernung von der Kamera in Metern. Inhalte jenseits dieser Entfernung werden nicht heruntergeladen, entpackt oder gerendert.

lccObj.setMaxDistance(200); // Desktop-Standard
lccObj.setMaxDistance(100); // Mobil-Standard

Eine Verringerung der maximalen Entfernung reduziert die Anzahl sichtbarer Knoten und senkt die Kosten der gesamten Pipeline: Netzwerk-Downloads, CPU-Sortierung und GPU-Rendering. Geeignet für Innenraum- oder Nahbereichs-Szenarien.

Hinweis: Das SDK verfügt über einen integrierten Höhenanpassungsmechanismus — wenn die Kamera über 20 Meter aufsteigt, wird die Entfernungsbegrenzung automatisch gelockert, sodass man aus der Vogelperspektive weiter sehen kann.

Referenzwerte:

Siehe Empfohlene Konfigurationen nach Geräteklasse am Ende dieser Seite.

7. Automatische LOD-Optimierung — setLodAutoLevelUp

Bei Aktivierung verbessert das SDK automatisch die Präzision bestimmter Knoten, wenn das Rendering-Budget Reserven hat.

lccObj.setLodAutoLevelUp(true); // Aktivieren (empfohlen für mittlere bis hohe Geräteklassen)
lccObj.setLodAutoLevelUp(false); // Deaktivieren (empfohlen für Low-End-Geräte oder stabile Framerate)

Wenn die tatsächliche Splat-Anzahl unter dem setMaxSplats-Limit liegt (z.B. wenn die Kamera auf einen offenen Bereich blickt), weist der Optimierungsmechanismus das verbleibende Budget nahen Knoten zu und lädt automatisch höherpräzise LOD-Daten, um Details zu verbessern.

Kompromiss: Die Aktivierung verbessert die visuelle Qualität, kann aber zusätzliche Daten-Downloads und Dekomprimierung auslösen, was auf Low-End-Geräten gelegentliche Framerate-Schwankungen verursachen kann.

8. Spherical-Harmonics-Beleuchtung — useShcoef

Spherical-Harmonics-Beleuchtung (SH) ermöglicht es, dass sich die Farben der Gaußschen Splats je nach Blickwinkel ändern und so realistischere Reflexionen und Glanzeffekte erzeugen. Im SDK ist dies standardmäßig deaktiviert.

// Vor der Aktivierung prüfen, ob SH-Koeffizienten vorhanden sind
if (lccObj.hasShcoef()) {
    lccObj.useShcoef(true, (percent) => {
        console.log('SH loading: ' + (percent * 100).toFixed(1) + '%');
    });
}

// Deaktivieren
lccObj.useShcoef(false, () => {});

Effekt bei Aktivierung:

• Reflexionen und Glanz auf Objektoberflächen ändern sich natürlich mit dem Blickwinkel
• Deutlich verbesserte Rendering-Qualität, insbesondere bei Materialien wie Metall, Glas und Lack

Leistungskosten:

• Erhöhter GPU-Speicherbedarf für zusätzliche RGB-SH-Koeffizienten
• Erhöhter GPU-Vertex-Shader-Rechenaufwand für 15 zusätzliche SH-Basisfunktionen
• Beim LCC-Format müssen zusätzliche SH-Datendateien heruntergeladen werden

Empfehlung: Nur auf High-End-Desktop-Geräten aktivieren. Für Mobilgeräte nicht empfohlen.

9. Weitere Optimierungsoptionen

Lokaler Cache (IndexedDB)

Lokalen Daten-Cache über useIndexDB: true (standardmäßig aktiviert) aktivieren. Bei erneutem Besuch derselben Szene werden Daten direkt aus dem lokalen Speicher geladen, was die Ladezeit erheblich verkürzt.

LOD-Übergangsglättung

LCC2 unterstützt glatte LOD-Übergänge (standardmäßig aktiviert), die visuelles Popping beim LOD-Wechsel reduzieren:

lccObj.setSmooth(true); // Aktivieren (Standard)
lccObj.setSmooth(false); // Deaktivieren

Diese Funktion begrenzt LOD-Unterschiede zwischen benachbarten räumlichen Knoten und eliminiert Präzisionssprünge. Der CPU-Overhead ist minimal — es wird empfohlen, die Funktion aktiviert zu lassen.

Empfohlene Konfigurationen nach Geräteklasse

PC

Mobil