Simulador de Partículas 3D: Cómo Convertir Texto, Fotos y Modelos 3D en Miles de Partículas en tu Navegador

Escribe tu nombre y conviértelo en 15.000 partículas

Imagina escribir tu nombre y verlo estallar en quince mil puntos de luz que flotan, giran y se reorganizan en el espacio. Sin instalar nada. Sin abrir un programa de diseño. Solo tu navegador y una tarjeta gráfica haciendo el trabajo pesado.

Eso es exactamente lo que hace el Simulador de Partículas 3D del portfolio: coge cualquier cosa —texto, una foto, un vídeo en directo, incluso un modelo 3D— y la descompone en miles de partículas luminosas que puedes moldear con doce formaciones matemáticas distintas y ocho estilos visuales. Todo en tiempo real, todo dentro de la pestaña que tienes abierta ahora mismo.

En este artículo te cuento qué hace, las formas de jugar con él y —para los curiosos— cómo funciona por dentro sin enterrarte en jerga.

¿Qué es exactamente?

Piénsalo como un rompecabezas al revés. En vez de juntar piezas para formar una imagen, el simulador hace lo contrario: dispersa el original en partículas y las reorganiza en la forma que tú elijas. Una esfera perfecta, una galaxia en espiral, una doble hélice de ADN, un corazón.

Por dentro es una escena 3D construida con Three.js (la librería estándar para gráficos 3D en el navegador) sobre WebGL, es decir, sobre tu tarjeta gráfica. Eso es lo que permite mover quince mil objetos a sesenta fotogramas por segundo sin que el navegador se ahogue.

La versión actual trae doce formaciones matemáticas, pozos de gravedad con los que empujas las partículas al pasar el ratón, y cinco maneras distintas de “alimentar” el simulador con tu propio contenido.

Las 12 formaciones

Cada formación no es un dibujo prefabricado: es una fórmula matemática que decide dónde se coloca cada una de las quince mil partículas.

• Esfera — distribución de Fibonacci, el mismo patrón que siguen las semillas de un girasol para repartirse sin huecos.
• Cubo, Hélice, Toroide y Anillo de Saturno — geometría clásica llevada a 3D.
• Galaxia — brazos en espiral logarítmica, como las galaxias reales.
• ADN — la doble hélice, dos cintas de partículas entrelazadas.
• Corazón — la curva paramétrica del corazón, ideal para una campaña de San Valentín.
• Lorenz — el atractor de Lorenz, una de las formas más famosas de la teoría del caos: nunca se repite y nunca se cierra.
• Olas, Tornado y Fuegos Artificiales — movimiento procedural para lanzamientos, intros y contenido con energía.

Para un negocio, esto no es solo bonito: el corazón para febrero, los fuegos artificiales para el lanzamiento de un producto, la galaxia para contenido tecnológico. Una misma herramienta, decenas de piezas visuales.

Las 5 formas de crear partículas

Aquí está lo divertido: el simulador no se limita a sus formaciones. Puedes darle tu propio contenido y lo convierte en partículas al vuelo.

Texto a partículas

Escribes una palabra y aparece formada por partículas. El truco es sencillo de explicar: el texto se “dibuja” en un lienzo invisible, se leen sus píxeles, y cada píxel se convierte en una partícula 3D colocada en el espacio.

Imagen a partículas

Subes una foto y cada partícula adopta el color real del píxel que representa. El resultado es tu imagen reconstruida como una nube de puntos de colores fieles al original.

Vídeo en tiempo real

Lo más llamativo: cargas un vídeo y las partículas se actualizan en cada fotograma. Es como ver una película pixelada en tres dimensiones, moviéndose en directo.

Modelos 3D

Puedes subir un modelo .glb real —una pieza, un personaje, un logo en 3D— y el simulador lo transforma en una nube de puntos luminosos que conserva su volumen.

Draw Pad

Y si no quieres subir nada, dibujas. Con el ratón o el dedo trazas lo que se te ocurra y se convierte en partículas al instante.

Los 8 estilos visuales

La misma formación puede verse de ocho maneras radicalmente distintas según el estilo que elijas: Spark (brillante), Plasma (anillo de glow), Ink (tinta), Paint (pincelada artística), Steel (metálico), Glass (cristal), Vector (flechas de dirección) y Cyber (wireframe futurista).

Cada estilo es, en realidad, un pequeño programa llamado shader que se ejecuta directamente en tu tarjeta gráfica y decide cómo se pinta cada partícula: su color, su brillo, su forma. Por eso el cambio de estilo es instantáneo aunque haya quince mil partículas en pantalla.

Modo Blueprint y Draw Pad: solo los contornos

El modo Blueprint detecta los bordes de una imagen con un algoritmo de detección de contornos (Sobel) —como cuando un plano técnico solo muestra las líneas— y convierte únicamente esos contornos en partículas. El efecto recuerda a un holograma o a un plano de ingeniería flotando en el aire.

Combinado con el Draw Pad, tienes desde un boceto a mano alzada hasta el contorno preciso de una fotografía, todo hecho partículas.

¿Cómo funciona por dentro? (para curiosos)

Sin enterrarte en tecnicismos, estos son los cuatro ingredientes que lo hacen posible:

• InstancedMesh — el truco que permite a la GPU dibujar quince mil partículas como si fueran una sola. Sin esto, el navegador tendría que dar quince mil órdenes por fotograma y se arrastraría.
• Shaders GLSL — los mini-programas que deciden el aspecto de cada partícula. Son los que dan vida a los ocho estilos.
• Morphing suave (lerp) — cuando cambias de formación, las partículas no “saltan” a su nuevo sitio: se deslizan suavemente interpolando su posición. Esa transición fluida es lo que hace que se sienta orgánico.
• Bloom — el efecto de luz que hace que los puntos brillen y se difuminen como en una película de ciencia ficción.

El recorrido completo es: tu contenido → se lee en un lienzo 2D → se muestrean sus puntos → se calculan posiciones en 3D → la GPU lo renderiza. Y ese ciclo se repite sesenta veces por segundo.

Rendimiento: pensado también para el móvil

En un ordenador de sobremesa, el simulador mueve 15.000 partículas con bloom a 60 fps. En el móvil, detecta el dispositivo y se adapta solo: baja a 8.000 partículas, simplifica los efectos más pesados y ajusta los controles al táctil. La filosofía es que funcione bien en cualquier sitio sin que tengas que tocar nada.

Todo el trabajo lo hace tu tarjeta gráfica en local. No hay servidor procesando nada por detrás: lo que ves se calcula en tu propio dispositivo.

Pruébalo tú mismo

La mejor manera de entenderlo es jugar con él. Ve a la sección de Gadgets IA del portfolio, abre el Simulador de Partículas y prueba a:

• Escribir tu nombre y verlo formado por partículas.
• Subir tu foto de perfil y reconstruirla con colores reales.
• Recorrer los ocho estilos sobre la misma formación para ver cómo cambia por completo.

Abrir el Simulador de Partículas 3D

Créditos y contexto

El simulador está inspirado en el trabajo de particles.casberry.in y construido desde cero para este portfolio con Three.js r128, vanilla JavaScript, sin frameworks y sin npm — la misma filosofía que el resto del sitio: nada de dependencias innecesarias, todo a la vista, todo controlado.

Es, en el fondo, una demostración de algo sencillo: el navegador moderno es capaz de mucho más de lo que parece. Y a veces la mejor forma de demostrarlo es escribir tu nombre y verlo convertido en quince mil estrellas.