Carril laminar
Carriles laminares
Hemos diseñado y refinado una animación de nubes de partículas “magnéticas” que se organizan en aros y se atraen, forman embudos y se intercambian partículas en función de su proximidad, primero entre ventanas sincronizadas y luego en una sola escena móvil con esferas arrastrables.
Stack y arquitectura Three.js (r124+) + GPUComputationRenderer para simular ~65k partículas por esfera en la GPU. Render en ping-pong con dos render targets para estelas controladas (decay/gain/threshold), y mezcla aditiva para brillo suave.Cada “esfera” es un cluster con posición y velocidad en texturas; los shaders calculan: Atracción radial, swirl (giro), axial (empuje en el eje que une esferas) y curl (turbulencia). Detección de proximidad con caída (falloff) y un “approach boost” que sube la intensidad cuando se acercan rápido. Puente temprano: antes de tocarse, las nubes se elongan elípticamente y parte de las partículas “escapan” hacia el otro aro (u_streamFrac). Intercambio al contacto: si los aros “tocan”, aumenta el jet y el funnel y se transfieren partículas con fuerza. Home force que mantiene el contorno del aro estable (no crece el círculo).
Carril laminar + “strands” sinusoidales para dar direccionalidad (corrientes tipo mar). Ráfagas/ondas de grupo: modulación temporal (gusts) y ondas viajeras a lo largo del eje para que la masa fluya en oleadas. Borde realzado (rim), paleta dinámica y intensidad global ajustable sin engordar el aro (tamaño de punto bloqueado). Interacción y UX Versión desktop: sincronización entre ventanas con alineado a píxel para que los aros coincidan visualmente. Versión móvil: una sola escena; botón “Crear esfera” y drag táctil/ratón para provocar atracción, embudos e intercambio. HUD con Crear, Limpiar, Nueva paleta e Intensidad ±. Rendimiento Ajuste de TEX_SIZE según dispositivo, uso de devicePixelRatio, y control fino de decay/gain para estelas limpias y costo estable en GPU.