Ra mắt trên HN: Mô phỏng 20 triệu hạt bằng JavaScript

 (dgerrells.com)
4 điểm bởi GN⁺ 2024-07-09 | 1 bình luận | Chia sẻ qua WhatsApp

JavaScript nhanh đến mức nào? Mô phỏng 20 triệu hạt

Thử thách

  • Mô phỏng 1.000.000 hạt ở 60fps chỉ bằng CPU trên điện thoại

Lần thử đầu tiên

  • Mô phỏng hạt bằng JavaScript chỉ với CPU, không dùng GPU
  • Mảng của JavaScript không phải lúc nào cũng là mảng dữ liệu liên tục
  • Dùng TypedArray để giữ bộ nhớ ở dạng liên tục

Triển khai đầu tiên

  • Triển khai đa luồng bằng Web Workers
  • Dùng SharedArrayBuffer để chia sẻ bộ nhớ
  • Lưu dữ liệu hạt dưới dạng số thực dấu phẩy động 32-bit
  • Dùng đối tượng ImageData để render từng hạt thành pixel trên màn hình

Lần thử thứ hai

  • Truyền dữ liệu đầu vào cho worker để bổ sung khả năng tương tác
  • Dùng phép xấp xỉ trọng lực để các hạt bị hút về điểm chạm trên màn hình

Lần thử thứ ba

  • Cho worker vẽ pixel để tận dụng nhiều hơn tất cả các lõi CPU
  • Chấp nhận tăng mức sử dụng bộ nhớ để kỳ vọng cải thiện thêm tốc độ

Lần thử thứ tư

  • Dùng messaging để đồng bộ giữa các luồng cho đến khi render xong
  • Giải quyết vấn đề flickering

Lần thử thứ năm

  • Dùng double buffering để worker có thể chuẩn bị khung hình tiếp theo trong khi đang render
  • Tăng mức sử dụng bộ nhớ

Lần thử thứ sáu

  • Bổ sung một ý tưởng tương tác mới để các hạt quay về vị trí ban đầu
  • Thêm 2 số để lưu vị trí ban đầu của hạt

Tóm tắt của GN⁺

  • Bài viết này giải thích cách triển khai mô phỏng hạt quy mô lớn bằng JavaScript
  • Trình bày cách tận dụng tối đa hiệu năng CPU bằng TypedArray và Web Workers
  • Nhấn mạnh tầm quan trọng của đa luồng và quản lý bộ nhớ
  • Cho thấy nhiều thử nghiệm khác nhau để tăng tính tương tác của mô phỏng hạt
  • Các dự án có tính năng tương tự gồm có Three.js và Babylon.js

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-07-09
Ý kiến Hacker News

  • Đề xuất nhúng trực tiếp mô phỏng vào bài blog

    • Nhắc đến việc cần điều chỉnh tham số để chạy tốt cả trên điện thoại đời cũ
    • Thêm một liên kết ở đầu bài cũng là một cách hay
    • Đưa ra trang ciechanow.ski làm ví dụ
    • Nhắc rằng trước đây mọi website đều có các yếu tố tương tác rất ngầu

  • Nhắc rằng vẫn có thể chạy mô phỏng hạt trên GPU ngay cả khi không có WebGPU

  • Nhắc rằng bản demo trên di động rất ấn tượng

  • Hỏi liệu có thể mã hóa dữ liệu hạt thành một số JS duy nhất hay không

    • Thảo luận về cách biểu diễn x, y, dx, dy dưới dạng số thực dấu phẩy động 32 bit
    • Khám phá khả năng biểu diễn dữ liệu trong phạm vi MAX_SAFE_INTEGER của JS
    • Nhắc rằng việc mã hóa/giải mã dữ liệu có thể chậm hơn so với phần bộ nhớ tiết kiệm được

  • Đặt câu hỏi về Atomics API

    • Nhắc rằng Atomics API không dùng promise
    • Giải thích rằng ngoại trừ waitAsync thì nó không dùng promise
    • Cung cấp liên kết liên quan: liên kết

  • Nhắc đến một mô phỏng xử lý gần 20 triệu hạt

  • Nhắc rằng video rất tuyệt nhưng liên kết CodeSandbox không hoạt động trên Chrome desktop của MacOS

    • Xuất hiện lỗi SharedArrayBuffer is not defined và lỗi CORS

  • Nhắc rằng muốn cho đội UI thấy hiệu năng nhanh của JS

    • Đặc biệt là JS được viết tốt có thể rất nhanh

  • Cảm ơn kỹ thuật xuất sắc và bài viết tuyệt vời của tác giả

    • Nhắc rằng tác giả đã có được rất nhiều người hâm mộ

  • Chia sẻ trải nghiệm từng làm thí nghiệm tương tự để xử lý rất nhiều hạt bằng mô phỏng vật lý cơ bản

  • Nhắc rằng chrome://tracing có thể mang lại thêm nhiều insight