Bodenvegetation im Stil Low-Poly für three.js

Über den Stil Low-Poly

Low-Poly-Vegetation ist der günstigste Stil – beim Rendern wie bei der Build-Größe.

• Flat Shading: eine Normale pro Fläche ergibt den klaren Facetten-Look, Normal Maps entfallen.
• Die Farbe liegt in den Vertex-Farben (glTF COLOR_0): keine Texturen, keine UV-Arbeit, kaum Grafikspeicher.
• Das Laub ist echte Geometrie statt Alpha-Cards: kein Alpha-Test und kein transparenter Overdraw – wichtig für mobile GPUs.
• Ein einziges Material reicht für alle Modelle einer Szene, Bäume lassen sich daher leicht batchen und instanzieren.
• Übliche Budgets für LOD0 liegen zwischen einigen hundert und rund zweitausend Dreiecken.

Passt zu Mobile, WebGL/WebGPU, VR, Strategie, Aufbauspielen und stilisierten Indie-Games. In der Engine ein Material verwenden, das mit der Vertex-Farbe multipliziert.

Verwendung in three.js

In three.js GLB mit dem GLTFLoader aus three/addons laden; DRACOLoader oder KTX2Loader nur ergänzen, wenn eine Datei diese Extensions nutzt.

• Distanz-LOD: THREE.LOD mit lod.addLevel(mesh, distance) für LOD0–LOD3; die Stufe wechselt jeden Frame nach Kameraabstand.
• Wälder: InstancedMesh zeichnet Tausende Kopien in einem Draw Call, BatchedMesh mischt mehrere Baumvarianten. THREE.LOD wirkt nicht pro Instanz, daher Instanzen pro Chunk selbst nach LOD gruppieren.
• Laub: glTF-alphaMode MASK wird zu material.alphaTest, doppelseitige Materialien erhalten automatisch side: THREE.DoubleSide.
• Kollisionsmesh: unsichtbar lassen und an eine Physik-Bibliothek wie Rapier oder cannon-es übergeben.

Funktioniert mit WebGLRenderer und WebGPURenderer.