Realistyczne drzewa do three.js — GLB LOD

Drzewa w stylu Realistyczny do three.js

Realistyczne drzewa wchodzą do sceny three.js przez GLTFLoader z three/addons: plik GLB zawiera siatki LOD0–LOD3 gotowe dla THREE.LOD. Po zarejestrowaniu poziomów przez lod.addLevel(mesh, distance) renderer przełącza je według odległości kamery w każdej klatce — to ważne, gdy Dąb, Sosna zwyczajna albo Wierzba płacząca stoją wprost przed kamerą pierwszoosobową.

W lasach InstancedMesh utrzymuje tysiące pni w jednym draw callu, a BatchedMesh miesza warianty Świerka, Brzozy i Klonu; ponieważ THREE.LOD działa na obiekt, instancje trzeba grupować po poziomie w obrębie chunku. Liście to karty z alpha testem (alphaMode MASK trafia do material.alphaTest, materiały dwustronne dostają THREE.DoubleSide), więc nie wymagają sortowania i rzucają poprawne cienie. Siatki kolizji pozostają niewidoczne dla Rapiera lub cannon-es; całość działa w WebGLRenderer i WebGPURenderer.

O stylu Realistyczny

Realistyczne modele korzystają z workflow PBR metal/roughness, który glTF 2.0, Unity, Unreal, Godot i three.js czytają bezpośrednio.

Kora: mapy koloru, normalnych i chropowatości na pniu i gałęziach.
Liście: karty z alpha testem (masked) i teksturami kęp liści, a nie alpha blend — zapisują głębię, nie wymagają sortowania i rzucają poprawne cienie.
Kora i liście mają osobne materiały, więc liczba draw calli jest przewidywalna, a GPU instancing działa bez problemów.
LOD0 służy do zbliżeń; LOD1–LOD3 usuwają gałęzie i karty liści, a ostatni poziom jest dość lekki na duże odległości.

Najlepiej sprawdzają się w grach FPP i TPP, survivalach, otwartych światach i symulatorach na PC i konsole. Na urządzeniach mobilnych zacznij od LOD1 lub LOD2 jako najbliższego poziomu i pilnuj overdraw liści.

Użycie w three.js

W three.js ładuj GLB przez GLTFLoader z three/addons; DRACOLoader lub KTX2Loader dodaj tylko wtedy, gdy plik używa tych rozszerzeń.

LOD według odległości: THREE.LOD z lod.addLevel(mesh, distance) dla LOD0–LOD3; poziom przełącza się co klatkę zależnie od odległości od kamery.
Lasy: InstancedMesh rysuje tysiące kopii w jednym draw callu, a BatchedMesh pozwala mieszać kilka wariantów drzew. THREE.LOD nie działa per instancja, więc samodzielnie grupuj instancje według LOD w każdym chunku.
Liście: alphaMode MASK z glTF staje się material.alphaTest, a materiały dwustronne automatycznie dostają side: THREE.DoubleSide.
Siatka kolizji: pozostaw niewidoczną i przekaż do biblioteki fizyki, np. Rapier lub cannon-es.