3D-Rendering-Leistung/Pipeline für Detailstufe (LOD) meshes in threejs

Question

Nur auf der Suche nach einer allgemeinen Anleitung, es ist eine sehr lange Zeit seit ich mit irgendetwas 3D fiedelte und die Landschaft hat sich viel verändert, wenn Sie entschuldigen Wortspiel.

Ich habe eine Reihe von sehr detaillierten 3D-Modellen (3M + Gesichter) aus realen Gelände-Scans, die in einem Browser gerendert werden müssen. Sie sind "unregelmäßig" und können nicht aus einem Gitter/DEM oder irgendetwas gerendert werden.

Ich habe die Modelle in kleinere Objekte unterteilt und LOD für jedes Objekt (3 Ebenen) generiert, die eine gemeinsame Menge von Vertices und drei Indexpuffer erzeugt, die auf einige oder alle der Scheitelpunkte verweisen, die ich progressiv zum JS-Client streame.

Ich beabsichtige, irgendwo zwischen 500k - 1M Polygone einen Rahmen zu rendern, indem ich die LOD für jedes Objekt basierend auf der Entfernung von der Kamera festlege.

Also meine Frage ist, wie kann ich effizient zwischen diesen Ebenen wechseln?

Ich habe versucht den naiven Ansatz, der natürlich Beulen und Störungen in der Bildrate erzeugt, wie die Daten an die GPU gesendet werden. Aber ich suchte nach einer Möglichkeit, alle Daten (Scheitelpunkte und die drei Indexpuffer) an den GPU-Speicher zu senden und sie dann mit einem bestimmten Indexpuffer zu rendern, sagen wir dem Puffer mit niedriger Auflösung, und dann zu med oder high zu wechseln res Puffer, wenn die Kamera näher kommt.

Die Three.LOD() -Lösung scheint mir nichts zu nützen, da sie nur den gleichen fps-Fehler wie meine naive Lösung erzeugt.

Würde einige Anleitung, jedoch allgemein schätzen. Prost!

Answer 1

Sie möchten den Detaillierungsgrad (LOD) Ihres Objekts basierend auf der Entfernung zur Kamera effizient und gleichmäßig variieren.

In Ihrem Anwendungsfall besteht eine Lösung darin, für jedes Objekt eine BufferGeometry zu erstellen, die alle drei Detailebenen enthält. Mit anderen Worten, Sie würden "indizierte" Puffergeometrie verwenden, das Array der gemeinsamen Scheitelpunkte angeben und Ihre drei Indexarrays zu einem zusammenführen.

Setzen Sie dann die drawRange Eigenschaft Ihrer BufferGeometry, um die Gesichter der gewünschten LOD zu rendern.

geometry.setDrawRange(startIndex, count); 

Die Geometrie wird einmal auf die GPU geschoben werden, und die Änderung der LOD ist einfach eine Frage der Veränderung der drawRange, eine Uniform, die seidig glatt sein sollte.

three.js r.75