Palmeras low-poly para three.js: GLB y LODs

Palmeras estilo Low-poly para three.js

Las palmeras low-poly se integran en una escena three.js casi sin configuración: carga el GLB con GLTFLoader desde three/addons y pasa las mallas LOD0–LOD3 a THREE.LOD con lod.addLevel(mesh, distance), que cambia de nivel según la distancia de la cámara. El aspecto facetado sale del flat shading y de los colores por vértice (COLOR_0), así que no hay texturas: un solo material sirve para toda la escena y las hojas son geometría sólida, sin alpha test ni overdraw transparente en GPU de móviles.

La selección trae cinco palmeras: Cocotero, Palmera datilera, Palmera canaria, Washingtonia y Palmito. En LOD0 van de unos cientos a un par de miles de triángulos, con el pivote en la base y una malla de colisión invisible que puedes pasar a Rapier o cannon-es. Llena una costa con InstancedMesh o genera variaciones con BatchedMesh y una semilla nueva.

Acerca del estilo Low-poly

El low poly es el estilo más económico para renderizar y para publicar.

Sombreado plano: una normal por cara da el look facetado nítido, sin mapas de normales.
El color está en los vértices (glTF COLOR_0): sin texturas, sin trabajo de UV y casi sin memoria de video.
El follaje es geometría sólida, no tarjetas con alfa: sin alpha test ni overdraw transparente, algo clave en GPU de celulares.
Un solo material sirve para todos los modelos de la escena, así que los árboles se agrupan e instancian fácilmente.
Los presupuestos típicos van de unos cientos a un par de miles de triángulos en LOD0.

Funciona muy bien en celulares, WebGL/WebGPU, VR, estrategia, city builders y juegos indie estilizados. En el motor, usa un material que multiplique por el color de vértice.

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.