Presentado en HN: simulación de 20 millones de partículas en JavaScript

¿Qué tan rápido es JavaScript? Simulación de 20 millones de partículas

El desafío

• Simular 1,000,000 de partículas a 60fps en un teléfono usando solo la CPU

Primer intento

• Simular partículas en JavaScript usando solo la CPU, sin usar la GPU
• Los arreglos de JavaScript no siempre son arreglos de datos contiguos
• Usar TypedArray para mantener la memoria contigua

Primera implementación

• Implementación de multihilo usando Web Workers
• Compartir memoria usando SharedArrayBuffer
• Almacenar los datos de las partículas como números de punto flotante de 32 bits
• Renderizar cada partícula como un píxel en pantalla usando el objeto ImageData

Segundo intento

• Agregar interactividad pasando los datos de entrada a los workers
• Usar una aproximación de gravedad para que las partículas sean atraídas hacia los puntos de toque en la pantalla

Tercer intento

• Hacer que los workers dibujen los píxeles para aprovechar más todos los núcleos de la CPU
• Esperar una mayor mejora de velocidad a costa de un mayor uso de memoria

Cuarto intento

• Usar mensajería para sincronizar entre hilos hasta que termine el renderizado
• Resolver el problema de flickering

Quinto intento

• Usar doble búfer para permitir que los workers preparen el siguiente frame mientras se renderiza el actual
• Aumento en el uso de memoria

Sexto intento

• Agregar una nueva idea de interacción para que las partículas regresen a su posición inicial
• Añadir 2 números para guardar la posición inicial de las partículas

Resumen de GN⁺

• Este artículo explica cómo implementar una simulación de partículas a gran escala en JavaScript
• Trata cómo aprovechar al máximo el rendimiento de la CPU usando TypedArray y Web Workers
• Enfatiza la importancia del multihilo y la gestión de memoria
• Muestra varios intentos para aumentar la interactividad de la simulación de partículas
• Proyectos con funciones similares incluyen Three.js y Babylon.js

[GN⁺]

Comentarios de Hacker News

• Sugieren insertar la simulación directamente en el blog

  • Mencionan la necesidad de ajustar los valores para que funcione bien incluso en teléfonos antiguos
  • Agregar un enlace en la parte superior del artículo también sería una buena opción
  • Ponen como ejemplo el sitio ciechanow.ski
  • Mencionan que antes todos los sitios web incluían elementos interactivos geniales

• Mencionan que es posible ejecutar una simulación de partículas en la GPU incluso sin WebGPU

  • Proporcionan un enlace de ejemplo: enlace

• Mencionan que la demo en móvil es muy impresionante

  • Proporcionan el enlace de la demo: enlace

• Preguntan si los datos de las partículas pueden codificarse en un solo número de JS

  • Discuten cómo representar x, y, dx, dy como números de punto flotante de 32 bits
  • Exploran la posibilidad de representar los datos dentro del rango de MAX_SAFE_INTEGER de JS
  • Mencionan que codificar/decodificar los datos podría ser más lento que el ahorro de memoria

• Plantean una pregunta sobre la API de Atomics

  • Mencionan que la API de Atomics no usa promesas
  • Explican que, salvo waitAsync, no usa promesas
  • Proporcionan un enlace relacionado: enlace

• Mencionan una simulación que maneja casi 20 millones de partículas

  • Proporcionan un enlace relacionado: enlace

• Mencionan que el video está genial, pero que el enlace de CodeSandbox no funciona en Chrome de escritorio en macOS

  • Ocurren errores de SharedArrayBuffer no definido y errores de CORS

• Mencionan que les gustaría mostrarle al equipo de UI el rápido rendimiento de JS

  • En especial, que el JS bien escrito es muy rápido

• Agradecen la excelente ingeniería del autor y su gran artículo

  • Mencionan que ha ganado muchos fans

• Comparten su experiencia con un experimento similar que manejó muchas partículas con una simulación física básica

  • Proporcionan un enlace relacionado: enlace

• Mencionan que chrome://tracing podría ofrecer más información

  • Proporcionan un enlace relacionado: enlace