Falling Leaves

Una demo técnica para validar el sistema de partículas de las hojas antes de modelar el árbol definitivo: que las hojas nazcan ancladas a las ramas, que el árbol reaccione al puntero, que el movimiento desprenda algunas, que caigan de forma creíble y que vuelvan a crecer en su lugar.

Hay una partícula por anclaje durante toda la vida de la página: no se crea ni se destruye nada. Cada una recorre tres estados:

• Unida (ATTACHED): sigue a su rama. Se suelta cuando la sacudida de su hueso supera su agarre, que es distinto para cada hoja y cambia en cada ciclo, y después de un sorteo que se hace 20 veces por segundo para no depender del frame rate.
• Cayendo (FALLING): sale con la velocidad que traía la rama y cae con gravedad, rozamiento contra el aire, viento con rachas de ruido 3D y un giro propio. Al tocar el suelo queda plana, reposa unos segundos y se encoge hasta desaparecer.
• Creciendo (GROWING): vuelve a su anclaje con escala 0, espera un momento y crece hasta su tamaño. Ya sigue a la rama mientras crece.

• CPU: solo el raycast del puntero y el rig del árbol, unas decenas de huesos movidos por muelles amortiguados a paso fijo. Nada recorre las hojas en JavaScript.
• GPU: todo el estado y el movimiento de las hojas, en un único compute shader de TSL por frame, con seis buffers de tamaño fijo creados una sola vez.
• Anclajes: cada hoja es un punto en el espacio local de un hueso. El compute y el render leen las mismas matrices en el mismo frame, así que una hoja unida nunca va retrasada respecto de su rama.
• Azar reproducible: se deriva en la GPU de un hash del índice de la hoja, la semilla y el ciclo. No ocupa memoria y la misma semilla da el mismo resultado.
• Render: las hojas son un único mesh instanciado, con un material y un solo draw call. Cada una elige una de cinco texturas de ramita de conífera según un reparto configurable.

El árbol se arma en Blender con Sapling Tree Gen y se exporta como GLB: un Armature con huesos de tronco y de rama, y la malla con skinning. Para eso escribí una especificación del formato, un script que convierte un árbol de Sapling a ese formato y un validador que revisa la escena antes de exportar. El GLB puede ir comprimido con meshopt. Para que el raycast del puntero no sea caro, el árbol trae una malla collider simplificada.

• Las hojas unidas siguen a sus ramas con un error máximo de 0,39 µm frente al cálculo en CPU, y de 0,48 µm con 100.000 hojas.
• Dos ejecuciones con la misma semilla dan buffers idénticos bit a bit.
• Veinte ciclos completos no dejan memoria colgada.
• El rig da las mismas rotaciones a 30, 60, 75 y 240 fps.
• Con 1.000, 20.000 y 100.000 hojas se mantuvo a unos 64 fps, el límite de refresco de la pantalla en ese momento: el techo real todavía no está medido.

• Cada hoja sigue a un solo hueso, no a la superficie deformada: por eso el árbol tiene que tener pesos casi rígidos por tramo de rama.
• El raycast del puntero se hace en CPU contra la malla deformada; con mallas densas hace falta el collider.
• Las hojas no chocan con el árbol ni entre sí, y el viento solo mueve las que caen.
• Solo probado en Chromium con WebGPU. Quedan las pruebas de rendimiento y de estrés con más árboles en escena.

• Basado en lecciones del curso WebGPU & TSL de Three.js Journey (Anvil, Clair Obscur Title y Sphere Particles Physics).
• Árbol generado con Sapling Tree Gen, el addon de Blender.
• Texturas de las hojas recortadas de una imagen de referencia generada con IA.