HN पर साझा: JavaScript में 2 करोड़ particles का simulation

 (dgerrells.com)
4 पॉइंट द्वारा GN⁺ 2024-07-09 | 1 टिप्पणियां | WhatsApp पर शेयर करें

JavaScript कितनी तेज़ है? 2 करोड़ particles का simulation

चुनौती

  • मोबाइल फोन पर केवल CPU का उपयोग करके 60fps पर 1,000,000 particles का simulation करना

पहला प्रयास

  • GPU का उपयोग किए बिना केवल CPU पर JavaScript से particles का simulation
  • JavaScript की arrays हमेशा contiguous data arrays नहीं होतीं
  • memory को contiguous रखने के लिए TypedArray का उपयोग

पहला implementation

  • multithreading के लिए Web Workers का उपयोग
  • memory share करने के लिए SharedArrayBuffer का उपयोग
  • particle data को 32-bit floating point numbers के रूप में store करना
  • हर particle को स्क्रीन पर pixel के रूप में render करने के लिए ImageData object का उपयोग

दूसरा प्रयास

  • interaction जोड़ने के लिए input data को workers तक पहुंचाना
  • स्क्रीन के touch points की ओर particles को खींचने के लिए gravity approximation का उपयोग

तीसरा प्रयास

  • workers से pixels draw करवाकर सभी CPU cores का अधिक उपयोग
  • memory usage बढ़ने की कीमत पर और अधिक speedup की उम्मीद

चौथा प्रयास

  • rendering पूरा होने तक threads के बीच synchronization के लिए messaging का उपयोग
  • flickering समस्या का समाधान

पाँचवाँ प्रयास

  • double buffering का उपयोग ताकि rendering के दौरान workers अगला frame तैयार कर सकें
  • memory usage में वृद्धि

छठा प्रयास

  • एक नया interaction idea जोड़ना, जिससे particles अपनी शुरुआती position पर लौटें
  • particles की शुरुआती position store करने के लिए 2 numbers जोड़ना

GN⁺ का सार

  • यह लेख बताता है कि JavaScript में बड़े पैमाने पर particle simulation कैसे implement किया जाए
  • TypedArray और Web Workers का उपयोग करके CPU performance का अधिकतम लाभ कैसे लिया जाए, यह शामिल है
  • multithreading और memory management के महत्व पर ज़ोर दिया गया है
  • particle simulation की interactivity बढ़ाने के लिए अलग-अलग प्रयास दिखाए गए हैं
  • समान क्षमता वाले projects में Three.js और Babylon.js शामिल हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-07-09
Hacker News टिप्पणियाँ

  • ब्लॉग में सिमुलेशन को सीधे एम्बेड करने का सुझाव दिया गया

    • पुराने फ़ोन पर भी अच्छा चलने के लिए वैल्यू ट्यून करने की ज़रूरत का उल्लेख
    • लेख के शीर्ष पर लिंक जोड़ना भी एक अच्छा तरीका बताया गया
    • उदाहरण के तौर पर ciechanow.ski साइट का ज़िक्र किया गया
    • यह भी कहा गया कि पहले लगभग हर वेबसाइट में शानदार इंटरैक्टिव एलिमेंट होते थे

  • यह उल्लेख किया गया कि WebGPU के बिना भी GPU पर particle simulation चलाया जा सकता है

  • मोबाइल पर डेमो बहुत प्रभावशाली होने का उल्लेख

  • पूछा गया कि क्या particle data को एक ही JS number में encode किया जा सकता है

    • x, y, dx, dy को 32-bit floating point के रूप में व्यक्त करने के तरीक़े पर चर्चा
    • JS के MAX_SAFE_INTEGER रेंज के भीतर डेटा व्यक्त करने की संभावना पर विचार
    • यह भी कहा गया कि data encoding/decoding, memory बचत की तुलना में धीमी हो सकती है

  • Atomics API पर सवाल उठाया गया

    • कहा गया कि Atomics API promises का उपयोग नहीं करता
    • समझाया गया कि waitAsync को छोड़कर यह promises का उपयोग नहीं करता
    • संबंधित लिंक: लिंक

  • लगभग 2 करोड़ particles को संभालने वाले simulation का उल्लेख

  • कहा गया कि वीडियो शानदार है, लेकिन MacOS Chrome desktop पर CodeSandbox लिंक काम नहीं करता

    • SharedArrayBuffer is not defined एरर और CORS एरर होने का उल्लेख

  • UI टीम को JS की तेज़ performance दिखाना चाहने की बात

    • खासकर अच्छी तरह लिखा गया JS बहुत तेज़ होता है

  • लेखक की बेहतरीन engineering और शानदार लेखन के लिए आभार व्यक्त किया गया

    • यह भी कहा गया कि उन्होंने बहुत से प्रशंसक बनाए हैं

  • इसी तरह के एक प्रयोग में basic physics simulation से बहुत सारे particles संभालने का अनुभव साझा किया गया

  • कहा गया कि chrome://tracing और अधिक insights दे सकता है