Palmeras realistas en three.js — modelos GLB LOD

Palmeras estilo Realista para three.js

Para three.js, las palmeras realistas son lo que más se nota en una playa o un oasis, y lo que más cuesta: las tarjetas de hojas con alpha test provocan mucho overdraw. Los cinco modelos — Cocotero, Palmera datilera, Palmera canaria, Washingtonia y Palmito — vienen en GLB liviano que GLTFLoader, desde three/addons, carga sin conversiones.

Cada modelo trae LOD0–LOD3, el pivote en la base y una malla de colisión aparte para Rapier o cannon-es. La corteza y las hojas llevan materiales PBR distintos: las tarjetas enmascaradas se vuelven material.alphaTest, escriben profundidad y no requieren ordenamiento. Los niveles se conectan con THREE.LOD y lod.addLevel(mesh, distance), y las palmeras lejanas se dibujan con InstancedMesh por chunk, tanto en WebGLRenderer como en WebGPURenderer.

Acerca del estilo Realista

Los modelos realistas usan el flujo PBR metal/roughness, que glTF 2.0, Unity, Unreal, Godot y three.js leen de forma directa.

Corteza: mapas de color, normales y rugosidad en el tronco y las ramas.
Follaje: tarjetas con alpha test (masked) y texturas de racimos de hojas, no alpha blend: escriben profundidad, no requieren ordenamiento y generan sombras correctas.
Corteza y follaje tienen materiales separados, por lo que la cantidad de draw calls es predecible y el instancing por GPU funciona sin problemas.
LOD0 es para tomas cercanas; LOD1–LOD3 quitan ramas y tarjetas de hojas, y el último nivel es lo suficientemente liviano para la distancia.

Ideales para juegos en primera y tercera persona, supervivencia, mundos abiertos y simuladores en PC y consola. En celulares, usa LOD1 o LOD2 como nivel más cercano y controla el overdraw del follaje.

Uso en three.js

En three.js, carga el GLB con GLTFLoader de three/addons; agrega DRACOLoader o KTX2Loader solo si un archivo usa esas extensiones.

LOD por distancia: THREE.LOD con lod.addLevel(mesh, distance) para LOD0–LOD3; cambia de nivel según la distancia a la cámara en cada cuadro.
Bosques: InstancedMesh dibuja miles de copias en un solo draw call y BatchedMesh combina varias variaciones de árboles. THREE.LOD no funciona por instancia, así que agrupa tú las instancias por LOD en cada chunk.
Follaje: el alphaMode MASK de glTF se convierte en material.alphaTest y los materiales de doble cara reciben side: THREE.DoubleSide automáticamente.
Malla de colisión: déjala invisible y pásala a una biblioteca de física como Rapier o cannon-es.