Árboles por código

Árboles por código

Un generador de árboles: sin modelos, sin archivos que bajar. Un árbol es una forma (cómo se arma: un tronco grueso y torcido que se abre en ramas, una copa de matas de hojas, las faldas de un pino, las hebras de un sauce) pintada con una paleta (las hojas de la sombra a la luz, la corteza, nieve arriba). Todo sale de una semilla: los mismos valores dan el mismo árbol en todos lados.

En la demo: arrastrá para girar, la rueda acerca. A la derecha están los controles: cada cosa que el generador acepta se puede mover y el árbol se rehace al instante. Abajo queda escrita la línea de código que hace el árbol que estás viendo (un clic la copia).

Los controles

Los botones de arriba son árboles ya afinados (roble anciano, pino gigante, sauce del pantano, árbol de las hadas…): ponen forma, paleta y proporciones de una vez.

Cómo se usa en un juego

client/trees es lo que se lleva. Tiene tres archivos:

• tree.ts: el generador. No depende de ningún motor: devuelve la geometría (posiciones, normales, colores, uvs, índices) en cuatro partes, una por material, y las cuatro texturas chicas pintadas en un canvas.
• three.ts: esas partes como objetos de three.js, con sus materiales y sus sombras.
• vec.ts: el vector 3D con el que se arman.

import { makeTree } from "./trees/tree";
import { treeObject } from "./trees/three";

// Un roble de otoño, el tercero de los suyos.
scene.add(treeObject(makeTree({ kind: "AutumnOak", seed: 3 })));

// Cualquier forma con cualquier paleta, y más alto y más grueso que lo normal.
const pine = treeObject(makeTree({ shape: "pine", palette: "snowy", seed: 8, tall: 1.4, thick: 1.3 }));
pine.position.set(12, 0, -4);
scene.add(pine);

// Una paleta propia: las hojas a la sombra y al sol, la corteza (0..1 cada canal) y cuánta nieve.
makeTree({ shape: "willow", palette: { leaf: [[0.1, 0.05, 0.2], [0.9, 0.6, 1]], bark: [0.3, 0.25, 0.3], snow: 0 } });

makeTree devuelve además la caja del árbol (min, max), el radio del tronco al pie con raíces y todo (trunk: lo que tiene que frenar a un jugador) y cuántos triángulos tiene.

Para un bosque: hacé cuatro o cinco variantes (semillas distintas) y repetilas giradas y con otro tamaño, con treeCopy (comparten la geometría). A lo lejos, la versión lod: true.

Con otro motor: makeTree(...).parts tiene bark, leaves, cards y hang; cada una es una malla. Los materiales están descritos al principio de three.ts: mate, colores por vértice × la textura, las cartas de hojas recortadas por su textura (alfa menor a 0,45 no se dibuja) y las dos caras iluminadas igual.

three.js es una dependencia de npm: el juego que lo use se arma con la CLI de Fogón (fogon dev, fogon deploy).

Por qué se ven así

Las hojas no se iluminan cara por cara. Las normales de toda la copa apuntan hacia afuera desde su centro, así la copa entera toma la luz como una sola bola blanda; y los colores de cada vértice ya traen la luz puesta: más oscuro abajo y adentro, más claro arriba y afuera. Con eso alcanza para que un árbol de dos mil triángulos parezca pintado.

De dónde sale

Es el generador de árboles del proyecto Medival, traído acá sin su motor. Código MIT.