Lançado no HN: Simulação de 20 milhões de partículas em JavaScript

Quão rápido é o JavaScript? Simulando 20 milhões de partículas

Desafio

• Simular 1.000.000 de partículas a 60 fps usando apenas a CPU em um celular

Primeira tentativa

• Simular partículas em JavaScript usando apenas a CPU, sem usar a GPU
• Os arrays do JavaScript nem sempre são arrays de dados contíguos
• Usar TypedArray para manter a memória contígua

Primeira implementação

• Implementação de multithreading com Web Workers
• Compartilhamento de memória com SharedArrayBuffer
• Armazenamento dos dados das partículas como números de ponto flutuante de 32 bits
• Renderização de cada partícula como um pixel na tela usando o objeto ImageData

Segunda tentativa

• Adição de interatividade ao passar dados de entrada para os workers
• Uso de uma aproximação de gravidade para fazer as partículas serem atraídas para os pontos de toque na tela

Terceira tentativa

• Fazer os workers desenharem os pixels para usar mais todos os núcleos da CPU
• Expectativa de maior ganho de velocidade em troca de aumento no uso de memória

Quarta tentativa

• Uso de mensagens para sincronização entre threads até a conclusão da renderização
• Correção do problema de flickering

Quinta tentativa

• Uso de buffer duplo para permitir que os workers preparem o próximo frame durante a renderização
• Aumento no uso de memória

Sexta tentativa

• Adição de uma nova ideia de interação para fazer as partículas voltarem à posição inicial
• Adição de 2 números para armazenar a posição inicial das partículas

Resumo do GN⁺

• Este artigo explica como implementar uma simulação de partículas em larga escala em JavaScript
• Aborda como usar TypedArray e Web Workers para aproveitar ao máximo o desempenho da CPU
• Enfatiza a importância de multithreading e gerenciamento de memória
• Mostra várias tentativas de aumentar a interatividade da simulação de partículas
• Projetos com funcionalidades semelhantes incluem Three.js e Babylon.js

[GN⁺]

Comentários no Hacker News

• Sugere incorporar a simulação diretamente no blog

  • Menciona a necessidade de ajustar os valores para que funcione bem até em celulares antigos
  • Adicionar um link no topo do artigo também seria uma boa opção
  • Cita o site ciechanow.ski como exemplo
  • Menciona que no passado todos os sites tinham elementos interativos incríveis

• Menciona que é possível executar a simulação de partículas na GPU mesmo sem WebGPU

  • Link de exemplo: link

• Diz que a demo no celular é muito impressionante

  • Link da demo: link

• Pergunta se os dados das partículas podem ser codificados em um único número JS

  • Discute como representar x, y, dx, dy como ponto flutuante de 32 bits
  • Explora a possibilidade de representar os dados dentro do intervalo de MAX_SAFE_INTEGER do JS
  • Menciona que codificar/decodificar os dados pode ser mais lento do que a economia de memória obtida

• Levanta uma pergunta sobre a API Atomics

  • Menciona que a API Atomics não usa promises
  • Explica que, com exceção de waitAsync, ela não usa promises
  • Link relacionado: link

• Menciona uma simulação que lida com quase 20 milhões de partículas

  • Link relacionado: link

• Diz que o vídeo é ótimo, mas o link do CodeSandbox não funciona no Chrome para desktop no macOS

  • Ocorrem erros de SharedArrayBuffer defined e CORS

• Diz que quer mostrar para a equipe de UI como o JS pode ser rápido

  • Especialmente quando o JS é bem escrito, ele é muito rápido

• Agradece pela excelente engenharia do autor e pelo ótimo texto

  • Menciona que ele conquistou muitos fãs

• Compartilha a experiência de ter lidado com muitas partículas em uma simulação física básica por meio de um experimento parecido

  • Link relacionado: link

• Menciona que chrome://tracing pode oferecer mais insights

  • Link relacionado: link