Low-Poly-Bäume für three.js — GLB mit LOD

Bäume im Stil Low-Poly für three.js

Low-Poly-Bäume kommen als reines GLB in three.js: GLTFLoader aus three/addons auf die Datei zeigen lassen – LOD0–LOD3 stecken schon im Mesh. Über lod.addLevel(mesh, distance) an THREE.LOD gehängt, wechselt three.js die Stufen pro Frame nach Kameraabstand. Flat Shading und Vertexfarben ersetzen Texturen, deshalb genügt ein Material für Eiche, Waldkiefer, Fichte, Birke und Trauerweide.

Blätter sind Volumenkörper: kein Alpha-Test, kein transparentes Overdraw – das zählt auf mobilen GPUs. In einem InstancedMesh zeichnen tausende Kopien in einem einzigen Draw Call, BatchedMesh mischt mehrere Arten. LOD gilt nicht pro Instanz, also Instanzen pro Chunk gruppieren. Das unsichtbare Collision-Mesh geht an Rapier oder cannon-es. LOD0 liegt zwischen wenigen hundert und rund zweitausend Dreiecken.

Ü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.