Diluncurkan di HN: Simulasi 20 Juta Partikel dengan JavaScript

Seberapa cepat JavaScript? Simulasi 20 juta partikel

Tantangan

• Mensimulasikan 1.000.000 partikel pada 60fps di ponsel hanya dengan menggunakan CPU

Percobaan pertama

• Mensimulasikan partikel dengan JavaScript hanya menggunakan CPU tanpa GPU
• Array di JavaScript tidak selalu berupa array data yang kontigu
• Menggunakan TypedArray agar memori tetap kontigu

Implementasi pertama

• Menerapkan multithreading dengan Web Workers
• Berbagi memori dengan SharedArrayBuffer
• Menyimpan data partikel sebagai angka floating point 32-bit
• Merender setiap partikel sebagai piksel di layar menggunakan objek ImageData

Percobaan kedua

• Menambahkan interaksi dengan mengirim data input ke worker
• Menggunakan pendekatan gravitasi agar partikel tertarik ke titik sentuh di layar

Percobaan ketiga

• Membiarkan worker menggambar piksel agar semua inti CPU lebih termanfaatkan
• Mengharapkan peningkatan kecepatan lebih lanjut dengan konsekuensi penggunaan memori yang meningkat

Percobaan keempat

• Menggunakan messaging untuk sinkronisasi antar-thread hingga rendering selesai
• Menyelesaikan masalah flickering

Percobaan kelima

• Menggunakan double buffering agar worker dapat menyiapkan frame berikutnya selama rendering berlangsung
• Penggunaan memori meningkat

Percobaan keenam

• Menambahkan ide interaksi baru agar partikel kembali ke posisi awalnya
• Menambahkan 2 angka untuk menyimpan posisi awal partikel

Ringkasan GN⁺

• Artikel ini menjelaskan cara mengimplementasikan simulasi partikel skala besar dengan JavaScript
• Membahas cara memaksimalkan pemanfaatan performa CPU dengan TypedArray dan Web Workers
• Menekankan pentingnya multithreading dan manajemen memori
• Menunjukkan berbagai percobaan untuk meningkatkan interaktivitas simulasi partikel
• Proyek dengan fungsi serupa antara lain Three.js dan Babylon.js

[GN⁺]

Opini Hacker News

• Mengusulkan untuk menyematkan simulasi langsung ke dalam blog

  • Menyebut perlunya menyesuaikan nilai agar tetap berjalan baik di ponsel lama
  • Menambahkan tautan di bagian atas artikel juga merupakan cara yang baik
  • Menyebut situs ciechanow.ski sebagai contoh
  • Menyebut bahwa dulu semua situs web memiliki elemen interaktif yang keren

• Menyebut bahwa simulasi partikel dapat dijalankan di GPU bahkan tanpa WebGPU

  • Menyediakan tautan contoh: tautan

• Menyebut bahwa demo di perangkat mobile sangat mengesankan

  • Menyediakan tautan demo: tautan

• Bertanya apakah data partikel bisa dienkode sebagai satu angka JS

  • Membahas cara merepresentasikan x, y, dx, dy sebagai bilangan floating-point 32-bit
  • Mengeksplorasi kemungkinan merepresentasikan data dalam rentang MAX_SAFE_INTEGER milik JS
  • Menyebut bahwa encoding/decoding data bisa lebih lambat daripada penghematan memori

• Mengajukan pertanyaan tentang Atomics API

  • Menyebut bahwa Atomics API tidak menggunakan promise
  • Menjelaskan bahwa selain waitAsync, API tersebut tidak menggunakan promise
  • Menyediakan tautan terkait: tautan

• Menyebut simulasi yang menangani hampir 20 juta partikel

  • Menyediakan tautan terkait: tautan

• Menyebut bahwa videonya keren, tetapi tautan CodeSandbox tidak berfungsi di desktop MacOS Chrome

  • Terjadi error SharedArrayBuffer is not defined dan error CORS

• Menyebut ingin menunjukkan performa cepat JS kepada tim UI

  • Terutama JS yang ditulis dengan baik bisa sangat cepat

• Berterima kasih atas engineering penulis yang luar biasa dan tulisan yang sangat bagus

  • Menyebut bahwa penulis telah mendapatkan banyak penggemar

• Membagikan pengalaman melakukan eksperimen serupa yang menangani banyak partikel dengan simulasi fisika dasar

  • Menyediakan tautan terkait: tautan

• Menyebut bahwa chrome://tracing bisa memberikan insight yang lebih banyak

  • Menyediakan tautan terkait: tautan