FoliMesh

Palmeiras estilo Low-poly para three.js

As palmeiras low-poly entram na cena three.js com pouquíssima configuração: carregue o GLB com o GLTFLoader de three/addons e ligue as malhas LOD0–LOD3 ao THREE.LOD via lod.addLevel(mesh, distance) — o nível troca conforme a distância da câmera. O visual facetado vem do flat shading e das cores de vértice (COLOR_0), sem texturas: um único material atende a cena inteira, e as folhas são geometria sólida, sem alpha test nem overdraw de transparência em GPUs móveis.

A seleção traz cinco palmeiras: Coqueiro, Tamareira, Palmeira-das-canárias, Washingtônia e Palmeira-anã. No LOD0 são de algumas centenas a cerca de dois mil triângulos, com pivô na base e malha de colisão invisível para usar com Rapier ou cannon-es. Alinhe um litoral com InstancedMesh ou varie a vegetação com BatchedMesh e uma nova semente.

Modelos
5
Níveis de detalhe
LOD0 – LOD3
Formatos
GLB · FBX · OBJ

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.

Funciona com WebGLRenderer e com WebGPURenderer.

Outras categorias

O mesmo em outros estilos

O mesmo para outras engines