เปิดตัวบน HN: จำลองอนุภาค 20 ล้านตัวด้วย JavaScript

 (dgerrells.com)
4 คะแนน โดย GN⁺ 2024-07-09 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

JavaScript เร็วได้แค่ไหน? การจำลองอนุภาค 20 ล้านตัว

โจทย์ท้าทาย

  • จำลองอนุภาค 1,000,000 ตัวที่ 60fps บนโทรศัพท์มือถือโดยใช้เฉพาะ CPU

ความพยายามครั้งแรก

  • จำลองอนุภาคด้วย JavaScript โดยไม่ใช้ GPU และใช้เฉพาะ CPU
  • อาร์เรย์ของ JavaScript ไม่ได้เป็นอาร์เรย์ข้อมูลที่ต่อเนื่องกันเสมอไป
  • ใช้ TypedArray เพื่อให้หน่วยความจำคงความต่อเนื่อง

การติดตั้งใช้งานครั้งแรก

  • ใช้ Web Workers เพื่อทำมัลติเธรดดิ้ง
  • ใช้ SharedArrayBuffer เพื่อแชร์หน่วยความจำ
  • จัดเก็บข้อมูลอนุภาคเป็นตัวเลขทศนิยม 32 บิต
  • ใช้อ็อบเจ็กต์ ImageData เพื่อเรนเดอร์อนุภาคแต่ละตัวเป็นพิกเซลบนหน้าจอ

ความพยายามครั้งที่สอง

  • ส่งข้อมูลอินพุตไปยังเวิร์กเกอร์เพื่อเพิ่มการโต้ตอบ
  • ใช้การประมาณแรงโน้มถ่วงเพื่อให้อณุภาคถูกดึงเข้าหาจุดสัมผัสบนหน้าจอ

ความพยายามครั้งที่สาม

  • ให้เวิร์กเกอร์วาดพิกเซลเองเพื่อใช้ทุกคอร์ของ CPU ได้มากขึ้น
  • ยอมรับการใช้หน่วยความจำที่เพิ่มขึ้นและคาดหวังการเพิ่มความเร็วมากขึ้น

ความพยายามครั้งที่สี่

  • ใช้การส่งข้อความเพื่อซิงโครไนซ์ระหว่างเธรดจนกว่าการเรนเดอร์จะเสร็จสิ้น
  • แก้ปัญหา flickering

ความพยายามครั้งที่ห้า

  • ใช้ double buffering เพื่อให้เวิร์กเกอร์เตรียมเฟรมถัดไปได้ระหว่างการเรนเดอร์
  • การใช้หน่วยความจำเพิ่มขึ้น

ความพยายามครั้งที่หก

  • เพิ่มไอเดียการโต้ตอบแบบใหม่ที่ทำให้อณุภาคกลับไปยังตำแหน่งเริ่มต้น
  • เพิ่มตัวเลข 2 ค่าเพื่อเก็บตำแหน่งเริ่มต้นของอนุภาค

สรุปโดย GN⁺

  • บทความนี้อธิบายวิธีสร้างการจำลองอนุภาคขนาดใหญ่ด้วย JavaScript
  • กล่าวถึงวิธีใช้ TypedArray และ Web Workers เพื่อดึงประสิทธิภาพของ CPU ออกมาให้มากที่สุด
  • เน้นย้ำความสำคัญของมัลติเธรดดิ้งและการจัดการหน่วยความจำ
  • แสดงให้เห็นความพยายามหลากหลายแบบเพื่อเพิ่มความสามารถในการโต้ตอบของการจำลองอนุภาค
  • โปรเจ็กต์ที่มีฟังก์ชันคล้ายกัน ได้แก่ Three.js และ Babylon.js

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-07-09
ความคิดเห็นจาก Hacker News

  • มีการเสนอให้ฝังการจำลองไว้ในบล็อกโดยตรง

    • กล่าวถึงความจำเป็นในการปรับค่าเพื่อให้ทำงานได้ดีแม้บนโทรศัพท์รุ่นเก่า
    • การเพิ่มลิงก์ไว้ด้านบนของบทความก็เป็นวิธีที่ดีเช่นกัน
    • ยกเว็บไซต์ ciechanow.ski เป็นตัวอย่าง
    • กล่าวถึงว่าในอดีตทุกเว็บไซต์ล้วนมีองค์ประกอบอินเทอร์แอ็กทีฟที่เท่มาก

  • กล่าวว่าสามารถรันการจำลองอนุภาคบน GPU ได้แม้ไม่มี WebGPU

  • กล่าวว่าตัวเดโมบนมือถือสร้างความประทับใจอย่างมาก

  • ตั้งคำถามว่าสามารถเข้ารหัสข้อมูลอนุภาคเป็นตัวเลข JS เดียวได้หรือไม่

    • มีการพูดคุยเกี่ยวกับวิธีแทนค่า x, y, dx, dy เป็นเลขทศนิยมลอยตัว 32 บิต
    • สำรวจความเป็นไปได้ของการแทนข้อมูลให้อยู่ในช่วง MAX_SAFE_INTEGER ของ JS
    • กล่าวว่าการเข้ารหัส/ถอดรหัสข้อมูลอาจช้ากว่าการประหยัดหน่วยความจำ

  • มีการตั้งคำถามเกี่ยวกับ Atomics API

    • กล่าวว่า Atomics API ไม่ได้ใช้ promise
    • อธิบายว่านอกเหนือจาก waitAsync แล้ว ก็ไม่ได้ใช้ promise
    • มีลิงก์ที่เกี่ยวข้อง: ลิงก์

  • กล่าวถึงการจำลองที่จัดการอนุภาคได้เกือบ 20 ล้านตัว

    • มีลิงก์ที่เกี่ยวข้อง: ลิงก์

  • กล่าวว่าวิดีโอนั้นยอดเยี่ยม แต่ลิงก์ CodeSandbox ใช้งานไม่ได้บน MacOS Chrome เดสก์ท็อป

    • พบข้อผิดพลาด SharedArrayBuffer is not defined และข้อผิดพลาด CORS

  • กล่าวว่าอยากแสดงให้ทีม UI เห็นว่า JS ทำงานได้เร็วแค่ไหน

    • โดยเฉพาะ JS ที่เขียนมาอย่างดีนั้นเร็วมาก

  • ขอบคุณผู้เขียนสำหรับวิศวกรรมที่ยอดเยี่ยมและงานเขียนที่ดีมาก

    • กล่าวว่าผู้เขียนมีแฟนคลับจำนวนมากแล้ว

  • แชร์ประสบการณ์จากการทดลองคล้ายกันที่ประมวลผลอนุภาคจำนวนมากด้วยการจำลองฟิสิกส์พื้นฐาน

    • มีลิงก์ที่เกี่ยวข้อง: ลิงก์

  • กล่าวถึงว่า chrome://tracing อาจให้ข้อมูลเชิงลึกได้มากกว่า

    • มีลิงก์ที่เกี่ยวข้อง: ลิงก์