HN'de paylaşıldı: JavaScript ile 20 milyon parçacık simülasyonu

JavaScript ne kadar hızlı? 20 milyon parçacık simülasyonu

Zorluk

• Telefonda yalnızca CPU kullanarak 60fps'de 1.000.000 parçacığı simüle etmek

İlk deneme

• GPU kullanmadan, yalnızca CPU ile JavaScript'te parçacık simülasyonu
• JavaScript dizileri her zaman bitişik veri dizileri değildir
• Belleği bitişik tutmak için TypedArray kullanımı

İlk uygulama

• Web Workers kullanarak çok iş parçacıklı yapı kurma
• SharedArrayBuffer kullanarak belleği paylaşma
• Parçacık verilerini 32 bit kayan noktalı sayılar olarak saklama
• Her parçacığı ekranda piksel olarak çizmek için ImageData nesnesini kullanma

İkinci deneme

• Etkileşim eklemek için girdi verilerini worker'lara aktarma
• Parçacıkların ekrandaki dokunma noktalarına çekilmesi için yerçekimi yaklaşımı kullanma

Üçüncü deneme

• Worker'ların pikselleri çizmesini sağlayarak tüm CPU çekirdeklerini daha fazla kullanma
• Daha yüksek bellek kullanımı pahasına ek hız artışı beklentisi

Dördüncü deneme

• Render tamamlanana kadar iş parçacıkları arasında senkronizasyon için mesajlaşma kullanımı
• Titreme sorununu çözme

Beşinci deneme

• Render sırasında worker'ların bir sonraki kareyi hazırlayabilmesi için çift tamponlama kullanımı
• Artan bellek kullanımı

Altıncı deneme

• Parçacıkların başlangıç konumlarına geri dönmesini sağlayan yeni bir etkileşim fikri ekleme
• Parçacıkların başlangıç konumunu saklamak için 2 sayı ekleme

GN⁺ özeti

• Bu yazı, JavaScript ile büyük ölçekli parçacık simülasyonunun nasıl gerçekleştirileceğini açıklıyor
• TypedArray ve Web Workers kullanarak CPU performansından en üst düzeyde nasıl yararlanılacağını ele alıyor
• Çok iş parçacıklılığı ve bellek yönetiminin önemini vurguluyor
• Parçacık simülasyonunun etkileşimini artırmak için yapılan çeşitli denemeleri gösteriyor
• Benzer özelliklere sahip projeler arasında Three.js ve Babylon.js bulunuyor

[GN⁺]

Hacker News yorumları

• Simülasyonun doğrudan bloga gömülmesi öneriliyor

  • Eski telefonlarda da iyi çalışması için değerlerin ayarlanması gerektiğinden bahsediliyor
  • Yazının üst kısmına bir bağlantı eklemenin de iyi bir yöntem olduğu söyleniyor
  • Örnek olarak ciechanow.ski sitesi veriliyor
  • Geçmişte tüm web sitelerinin harika etkileşimli ögeler içerdiği belirtiliyor

• WebGPU olmadan da GPU üzerinde parçacık simülasyonu çalıştırılabildiği belirtiliyor

  • Örnek bağlantı: bağlantı

• Mobildeki demonun çok etkileyici olduğu söyleniyor

  • Demo bağlantısı: bağlantı

• Parçacık verilerinin tek bir JS sayısına kodlanıp kodlanamayacağı soruluyor

  • x, y, dx, dy değerlerinin 32 bit kayan noktalı sayı olarak ifade edilme yöntemi tartışılıyor
  • Verilerin JS'nin MAX_SAFE_INTEGER aralığı içinde temsil edilme olasılığı araştırılıyor
  • Veri kodlama/kod çözmenin, bellek tasarrufundan daha yavaş olabileceği belirtiliyor

• Atomics API hakkında soru gündeme getiriliyor

  • Atomics API'nin promise kullanmadığı belirtiliyor
  • waitAsync dışında promise kullanılmadığı açıklanıyor
  • İlgili bağlantı: bağlantı

• Neredeyse 20 milyon parçacığı işleyen bir simülasyondan bahsediliyor

  • İlgili bağlantı: bağlantı

• Videonun harika olduğu, ancak MacOS Chrome masaüstünde CodeSandbox bağlantısının çalışmadığı belirtiliyor

  • SharedArrayBuffer tanımlı değil hatası ve CORS hatası oluşuyor

• UI ekibine JS'nin ne kadar hızlı olabildiğini göstermek istediklerini söylüyorlar

  • Özellikle iyi yazılmış JS'nin çok hızlı olduğu vurgulanıyor

• Yazarın mükemmel mühendisliği ve harika yazısı için teşekkür ediliyor

  • Çok sayıda hayran kazandığı belirtiliyor

• Benzer bir deneyde çok sayıda parçacığın temel fizik simülasyonuyla işlendiği bir deneyim paylaşılıyor

  • İlgili bağlantı: bağlantı

• chrome://tracing aracının daha fazla içgörü sağlayabileceği belirtiliyor

  • İlgili bağlantı: bağlantı