Árvores low-poly para three.js — GLB com LOD

Árvores estilo Low-poly para three.js

As árvores low-poly entram no three.js como GLB puro: aponte o GLTFLoader de three/addons para o arquivo e a malha já vem com LOD0–LOD3. Ligue os níveis com lod.addLevel(mesh, distance) e o THREE.LOD troca conforme a distância da câmera a cada frame. Flat shading e cores por vértice dispensam texturas, então um único material serve para Carvalho, Pinheiro-silvestre, Abeto, Bétula e Salgueiro-chorão.

As folhas são geometria sólida: sem alpha test e sem overdraw transparente, o que conta em GPU de celular. Num InstancedMesh, milhares de cópias saem em uma única draw call; o BatchedMesh mistura espécies. O LOD não vale por instância, então agrupe as instâncias por chunk. A malha de colisão invisível vai para Rapier ou cannon-es. No LOD0, são algumas centenas a cerca de dois mil triângulos.

Sobre o estilo Low-poly

O low poly é o estilo mais barato de renderizar e de distribuir.

Flat shading: uma normal por face dá o visual facetado nítido, sem normal maps.
A cor fica nos vértices (glTF COLOR_0): sem texturas, sem trabalho de UV e quase sem memória de vídeo.
As folhas são geometria sólida, não cards com alfa: sem alpha test nem overdraw transparente, o que pesa em GPUs de celular.
Um único material serve para todos os modelos da cena, então as árvores fazem batching e instancing com facilidade.
Orçamentos típicos vão de algumas centenas a cerca de dois mil triângulos no LOD0.

Combina com mobile, WebGL/WebGPU, VR, estratégia, city builders e jogos indie estilizados. Na engine, use um material que multiplique pela cor de vértice.

Como usar em three.js

No three.js, carregue o GLB com GLTFLoader de three/addons; adicione DRACOLoader ou KTX2Loader só se o arquivo usar essas extensões.

LOD por distância: THREE.LOD com lod.addLevel(mesh, distance) para LOD0–LOD3; o nível muda conforme a distância da câmera a cada frame.
Florestas: InstancedMesh desenha milhares de cópias em um único draw call, e BatchedMesh mistura várias variações de árvores. THREE.LOD não atua por instância, então agrupe você mesmo as instâncias por LOD em cada chunk.
Folhas: o alphaMode MASK do glTF vira material.alphaTest, e materiais de dupla face recebem side: THREE.DoubleSide automaticamente.
Malha de colisão: deixe invisível e passe para uma biblioteca de física como Rapier ou cannon-es.