ProyectosExperimentos
Acreción
Un experimento con WebGPU para probar rocas modeladas en Blender: una roca gira en un estudio oscuro, otras más chicas caen sobre ella y se quedan pegadas, y otros quedan orbitando alrededor.
- Estado
- Finalizado
- Periodo
- 2026.10
- Tipo
- Experimento
- Rol
- Proyecto individual, Desarrollo 3D, Física y simulación, Modelado 3D
- Tecnologías
- Three.js
- WebGPU
- TSL
- Rapier
- Vite
- Blender
- Enlaces
- Log de desarrollo
- 3 entradas
Demo interactiva
Arrastrá para girar la cámara y usá la rueda para acercarte. Pasá el puntero sobre las rocas para moverlas. El panel Controls cambia cómo caen las rocas (gravedad, amortiguación, agarre, rebote, fricción) y cómo orbitan los guijarros; Launch repite la secuencia. Necesita un navegador con WebGPU.
Descripción técnica
- Render:
WebGPURendererde Three.js r186, con el post-procesado escrito en TSL: bloom, FXAA y un fondo con dithering. Un mapa de entorno procedural de estudio nocturno, más una luz principal y una de contorno, ambas con sombras. - Física: Rapier. Cada fragmento es un cuerpo con un convex hull calculado de sus propios vértices; la roca principal usa sus triángulos reales. No hay gravedad global: cada frame, cada fragmento es atraído hacia el centro.
- Pegarse: un fragmento que se queda quieto tocando algo fijo durante un par de segundos pasa a ser un cuerpo fijo, y los siguientes se pueden apilar encima.
- Girar juntos: el mundo físico vive en el espacio del pivote de la roca, así que lo que se pega gira con ella sin cálculos extra.
- Golpes: cada impacto empuja e inclina el pivote en proporción al momento que perdió el fragmento, y un muelle amortiguado lo devuelve a su lugar. Es solo visual: en la física la roca no se mueve.
- Órbitas: cada guijarro sigue una elipse con la roca en un foco, a la que llega en espiral desde fuera de la pantalla. Son cuerpos de Rapier movidos por su velocidad, así que se apartan cuando algo se cruza y después vuelven a su carril.
- Rocas: modeladas en Blender y exportadas como GLB, comprimidas con meshopt y con las texturas en WebP. Cada modelo se dibuja como un
InstancedMesh.
Resultados y limitaciones
- Corre en navegadores con WebGPU. Three.js cae a WebGL 2 si no lo hay, pero ese camino no está probado.
- Que una roca se pegue es una regla, no un pegamento físico: queda fija cuando deja de moverse.
Log de desarrollo
Una demo para probar las rocas
La demo publicada, con un panel para que cualquiera cambie cómo caen y orbitan las rocas.
Golpes, órbitas y el puntero
La roca reacciona a cada golpe, unas rocas pequeñas quedan orbitando y el puntero puede mover las rocas.
Rocas que caen y se pegan
La roca en un estudio oscuro con WebGPU, y los primeros fragmentos que caen sobre ella y se quedan pegados.