WonderSnap کے ساتھ GPU پارٹیکل ماڈلز بنائیں اور کنٹرول کریں

WonderSnap کیا ہے؟

WonderSnap براؤزر پر مبنی 3D تجربہ ہے جو طریقہ کار سے بنائے گئے ماڈلز کو GPU سے چلنے والے زیادہ سے زیادہ 250,000 ذرات کے روشن بادلوں میں بدل دیتا ہے۔ آپ ذرات کو بلانے کے لیے انگلیاں چٹخا سکتے ہیں، انہیں مشہور مقامات یا جسمانی ساختوں کی شکل دے سکتے ہیں، ہاتھ سے ماڈلز گھما سکتے ہیں، اور اسمبلیوں کو لیبل والے دھماکہ خیز مناظر میں کھول سکتے ہیں۔

یہ ایپلیکیشن ڈیوائس پر ہینڈ ٹریکنگ، حسبِ ضرورت اشاروں کی شناخت، طریقہ کار سے بنائے گئے ماڈلز، اور ہاتھ سے لکھے گئے WebGL2 رینڈرر کو یکجا کرتی ہے۔ اس میں Three.js، گیم انجن، یا فرنٹ اینڈ فریم ورک استعمال نہیں ہوتا۔ ویب کیم کی ویڈیو آپ کی مشین پر ہی رہتی ہے اور کسی سرور کو نہیں بھیجی جاتی۔

ویب کیم اختیاری ہے۔ ہر ضروری تعامل آن اسکرین کنٹرولز، کی بورڈ، اور ماؤس کے ذریعے بھی دستیاب ہے۔

اہم خصوصیات

• GPU پارٹیکل رینڈرنگ: ذرات کی طبیعیات WebGL2 ٹرانسفارم فیڈبیک کے ذریعے چلتی ہے اور زیادہ سے زیادہ 250,000 ذرات کو سپورٹ کرتی ہے۔
• ڈیوائس پر ہینڈ ٹریکنگ: MediaPipe Hand Landmarker زیادہ سے زیادہ دو ہاتھوں کو ٹریک کرتا ہے، اور ہر ہاتھ کے 21 لینڈمارکس ہوتے ہیں۔
• اشاروں کی شناخت: حسبِ ضرورت کلاسیفائر انگلیاں چٹخانے، مٹھی بنانے، کھلے ہاتھ، اشارہ کرنے، چٹکی بنانے، امن کے نشان، ہاتھ گھمانے، اور دونوں ہاتھوں سے زوم کرنے کو پہچانتے ہیں۔
• 33 طریقہ کار سے بنائے گئے ماڈلز: اس مجموعے میں مشہور مقامات، جسمانی ساخت، حیاتیات، انجن، گاڑیاں، اور مشینیں شامل ہیں۔
• تعامل پذیر پرزے: نامزد اجزا روشن ہو سکتے ہیں، دھماکہ خیز مناظر میں الگ ہو سکتے ہیں، لیبل دکھا سکتے ہیں، اور قریب سے جانچنے کے لیے باہر کھینچے جا سکتے ہیں۔
• متحرک جسمانی ساخت: دل 72 bpm کی رفتار سے دھڑکتا ہے، جبکہ پھیپھڑے 4.5 سیکنڈ کے چکر میں سانس لیتے ہیں۔
• تعلیمی ٹولز: کوئز موڈ آپ سے پرزوں کی شناخت کرواتا ہے، جبکہ وضاحت اور تقریر کی خصوصیات ان کے بارے میں معلومات دیتی ہیں۔
• آواز کے ذریعے کنٹرول: Chrome اور Edge show me the heart، zoom in، اور quiz جیسی کمانڈز پر کارروائی کر سکتے ہیں۔
• کٹ اوے اور ریکارڈنگ: آپ روشن کراس سیکشنز ظاہر کر سکتے ہیں اور منظر کو WebM ویڈیو کے طور پر محفوظ کر سکتے ہیں۔

ضروریات

WonderSnap انسٹال کرنے سے پہلے یقینی بنائیں کہ آپ کے پاس درج ذیل چیزیں موجود ہیں:

• Node.js 18 یا اس کے بعد کا ورژن۔
• دستاویزی براؤزر تجربے کے لیے Chrome یا Edge۔
• اگر آپ اشاروں کے ذریعے کنٹرول چاہتے ہیں تو ایک ویب کیم۔
• ایسا براؤزر اور ڈیوائس جو WebGL2 کو سپورٹ کرتے ہوں۔

کیمرے تک رسائی localhost یا HTTPS ایڈریس سے ہونی چاہیے۔ index.html پر ڈبل کلک کرکے ایپلیکیشن شروع نہ کریں؛ اس کے بجائے شامل کردہ مقامی سرور استعمال کریں۔

WonderSnap انسٹال اور شروع کریں

1. ریپوزٹری کلون کریں

git clone https://github.com/AkbarSheikh-debug/wondersnap.git
cd wondersnap

2. انحصارات انسٹال کریں

npm install

یہ مرحلہ ہینڈ ٹریکنگ رن ٹائم کو node_modules سے دستیاب بھی بنا دیتا ہے۔ اگر MediaPipe کبھی لوڈ نہ ہو تو تصدیق کریں کہ انسٹالیشن کامیابی سے مکمل ہوئی ہے۔

3. مقامی سرور شروع کریں

npm start

Chrome یا Edge میں http://localhost:5173 کھولیں۔ ہینڈ ٹریکنگ فعال کرنے کے لیے Start with camera منتخب کریں، یا ماؤس، کی بورڈ، اور آن اسکرین کنٹرولز استعمال کرنے کے لیے Continue without camera منتخب کریں۔

4. ضرورت پڑنے پر مختلف پورٹ استعمال کریں

اگر پورٹ 5173 پہلے ہی استعمال ہو رہی ہو تو اسٹارٹ کمانڈ میں کوئی دوسری پورٹ درج کریں:

npm start -- 8080

اس کے بعد آپ http://localhost:8080 کھول سکتے ہیں۔

اشاروں کے ذریعے بنیادی طریقۂ کار

کیمرے کی اجازت دینے کے بعد اپنا ہاتھ ایسی جگہ رکھیں جہاں ویب کیم اسے واضح طور پر دیکھ سکے۔ عام تعامل کی ترتیب یہ ہے:

1. انگلیاں چٹخائیں تاکہ ذرات ظاہر ہوں۔ دوبارہ انگلیاں چٹخانے سے موجودہ ماڈل تحلیل ہو جاتا ہے۔
2. مٹھی بنائیں تاکہ منتخب کردہ عجوبہ، عضو، گاڑی، انجن، یا مشین کی شکل بنے۔
3. ہاتھ اٹھائیں، گھمائیں، یا جھکائیں تاکہ بنے ہوئے ماڈل کو گھمایا اور جھکایا جا سکے۔
4. ہاتھ کھولیں تاکہ کسی عجوبے کو اگلے ماڈل پر لے جایا جا سکے۔ اعضا، انجنوں، اور گاڑیوں کے لیے ہاتھ کھولنے سے یہ کنٹرول ہوتا ہے کہ پرزے کتنی دور باہر پھیلیں؛ ہاتھ بند کرنے سے وہ دوبارہ اکٹھے ہو جاتے ہیں۔
5. کسی پرزے کی طرف اشارہ کریں اور اسے منتخب کرنے کے لیے انگلی اس پر رکھیں۔ پرزہ روشن ہو جاتا ہے اور ایک معلوماتی کارڈ اس کا کردار بیان کرتا ہے۔
6. چٹکی بنائیں تاکہ منتخب پرزہ اپنی طرف کھینچ سکیں۔ اسے واپس رکھنے کے لیے دوبارہ چٹکی بنائیں۔
7. دونوں ہاتھ استعمال کریں اور زوم اِن یا زوم آؤٹ کرنے کے لیے ان کے درمیان فاصلہ تبدیل کریں۔
8. امن کا نشان بنائیں تاکہ اگلے ماڈل پر جایا جا سکے۔

کی بورڈ اور ماؤس کا استعمال

اگر آپ کے پاس ویب کیم نہیں ہے، یا زیادہ درست کنٹرول چاہتے ہیں، تو کی بورڈ اور ماؤس استعمال کریں۔ کسی پرزے کو منتخب کرنے کے لیے اس پر کلک کریں اور منظر کو گھمانے کے لیے اسے ڈریگ کریں۔

• Space: انگلی چٹخانے کی نقل کریں۔
• F، O، اور V: مٹھی، کھلے ہاتھ، اور فتح کے اشارے کی کارروائیاں شروع کریں۔
• Left Arrow اور Right Arrow: پچھلا یا اگلا ماڈل منتخب کریں۔
• E، Up Arrow، Down Arrow، یا ماؤس وہیل: پھیلائے گئے منظر کو ایڈجسٹ کریں۔
• +، -، اور 0: زوم تبدیل یا ری سیٹ کریں۔ آپ کنٹرول کے ساتھ ماؤس وہیل بھی استعمال کر سکتے ہیں۔
• C: کیمرہ آن یا آف کریں۔
• L: حصوں کے لیبل دکھائیں یا چھپائیں۔
• R: خودکار گردش آن یا آف کریں۔
• G: ہاتھ کی مدد سے گردش فعال یا غیر فعال کریں۔
• X: کٹے ہوئے کراس سیکشن کو فعال کریں۔ کٹنگ پلین کو تھوڑا تھوڑا حرکت دینے کے لیے , اور . استعمال کریں۔
• Q: کوئز موڈ شروع کریں۔
• M: صوتی کمانڈز اور متن خوانی کی سہولیات استعمال کریں۔
• K: ویڈیو ریکارڈ کریں۔
• D: شامل کردہ ڈیمو چلائیں۔
• I: منتخب حصے کی وضاحت دیکھیں۔
• Esc: موجودہ حصہ غیر منتخب کریں۔
• H: مدد دکھائیں۔

ماڈلز کا مجموعہ دریافت کریں

WonderSnap میں حقیقی پیمائشوں سے اخذ کردہ اور چھ گروپس میں منظم 33 طریقۂ کار سے بنائے گئے ماڈلز شامل ہیں:

• عجائبات: گیارہ یادگاریں، جن میں ایفل ٹاور، عظیم ہرم، تاج محل، بگ بین، اور سڈنی اوپیرا ہاؤس شامل ہیں۔
• جسمانی ساخت: دس ماڈلز، جن میں دماغ، دھڑکتا ہوا دل، سانس لینے والے پھیپھڑے، ڈھانچا، اور تہہ دار انسانی جسم شامل ہیں۔
• حیاتیات: DNA کی ایک ڈبل ہیلکس جسے کھولا جا سکتا ہے، اور ایک حیوانی خلیہ۔
• انجن: اِن لائن-4، سپرچارجڈ HEMI V8، ٹربوفین جیٹ، اور نو سلنڈر ریڈیل انجن۔
• گاڑیاں: اسپورٹس کار، موٹر سائیکل، مسافر طیارہ، اور مرحلہ وار علیحدگی والا Saturn V۔
• مشینیں: مکینیکل کلائی گھڑی اور خلیوں، بس بارز، کولنگ، اور بیٹری مینجمنٹ سسٹم والا EV بیٹری پیک۔

تعلیمی سہولیات استعمال کریں

لیبل شدہ حصوں کا معائنہ کریں

کسی جزو کو منتخب کرنے کے لیے اس کی طرف اشارہ کریں یا اس پر کلک کریں۔ منتخب حصہ روشن ہو جاتا ہے اور اس کا کارڈ اس کے کام کی وضاحت کرتا ہے۔ انفرادی حصوں کے ناموں کو ملانے والی رہنما لائنیں دکھانے کے لیے L سے لیبل فعال کریں۔

کوئز شروع کریں

کوئز موڈ میں داخل ہونے کے لیے Q دبائیں۔ WonderSnap ایسے سوالات دکھاتا ہے جیسے تلاش کریں: Hippocampus۔ مطلوبہ جزو کی طرف اشارہ کریں یا اس پر کلک کریں۔ ایک کوئز میں پانچ سوالات ہوتے ہیں اور اس کے نتیجے میں اسکور ملتا ہے۔

منظر کو آواز سے کنٹرول کریں

صوتی کمانڈز اور متن خوانی کے رویے تک رسائی کے لیے M دبائیں۔ معاون مثالوں میں show me the heart، open it up، where is the right atrium، zoom in، اور quiz شامل ہیں۔ اسپیچ سنتھیسس کی معاونت Chrome اور Edge کے لیے دستاویزی ہے۔

کراس سیکشن بنائیں

کٹے ہوئے منظر کو فعال کرنے کے لیے X دبائیں۔ کٹنگ پلین آپ کے ہاتھ کی پیروی کر سکتا ہے اور روشن کراس سیکشن دکھاتا ہے۔ اشارے کے بغیر، پلین کو بتدریج حرکت دینے کے لیے , اور . استعمال کریں۔

نتیجہ ریکارڈ کریں

منظر ریکارڈ کرنے اور اسے WebM ویڈیو کے طور پر محفوظ کرنے کے لیے K دبائیں۔

URL اختیارات سے WonderSnap ترتیب دیں

کوئری اسٹرنگ کے اختیارات آپ کو سورس فائلوں میں ترمیم کیے بغیر ابتدائی رویہ تبدیل کرنے اور رینڈرنگ کو بہتر بنانے دیتے ہیں۔

• ?n=250000: ذرات کی تعداد مقرر کریں۔
• ?model=12: مخصوص ماڈل نمبر سے آغاز کریں۔
• ?autostart=camera: ابتدائی اسکرین چھوڑ کر کیمرہ موڈ کی درخواست کریں۔
• ?autostart=nocamera: ابتدائی اسکرین چھوڑ کر کیمرے کے بغیر چلائیں۔
• ?trails=0: ذرات کے ٹریلز غیر فعال کریں۔
• ?dpr=1: ڈیوائس پکسل ریشو 1 پر مجبور کریں، جو سست GPUs پر مددگار ہو سکتا ہے۔

اختیارات کو یکجا کیا جا سکتا ہے۔ مثال کے طور پر، یہ پتہ کیمرے کے بغیر، 100,000 ذرات کے ساتھ، ڈیوائس پکسل ریشو 1 پر، اور ٹریلز غیر فعال کرکے شروع ہوتا ہے:

http://localhost:5173/?autostart=nocamera&n=100000&dpr=1&trails=0

اعلیٰ درجے کی تجاویز

سست ہارڈویئر پر کارکردگی بہتر بنائیں

ذرات کی تعداد اور ڈیوائس پکسل ریشو رینڈرنگ کے بوجھ کو براہِ راست متاثر کرتے ہیں۔ README کی تجویز کردہ کم فریم ریٹ والی ترتیب سے شروع کریں:

http://localhost:5173/?n=100000&dpr=1

ضرورت ہو تو ذرات کے ٹریلز بند کرنے کے لیے trails=0 بھی شامل کریں۔

متعین ابتدائی لنکس استعمال کریں

مظاہروں یا قابل تکرار جانچ کے لیے model کو autostart موڈ کے ساتھ یکجا کریں۔ اس سے ہر بار ابتدائی اسکرین اور ماڈل فہرست میں دستی طور پر جانے کی ضرورت نہیں رہتی۔

ایپلیکیشن کے ڈھانچے کو سمجھیں

مرکزی رینڈر لوپ، پکنگ، زوم، پھیلائے گئے مناظر، لیبلز، کوئز، کٹا ہوا منظر، اور ڈیمو کا رویہ src/app.js میں موجود ہے۔ ویب کیم اور MediaPipe کا انضمام src/hands.js میں ہے، جبکہ صوتی کنٹرول، متن خوانی کی معاونت، اور ریکارڈنگ src/features.js میں نافذ ہیں۔

src/gl/ ڈائریکٹری میں WebGL2 شیڈرز اور ٹرانسفارم فیڈبیک رینڈرر موجود ہیں۔ اشاروں کی منطق، اسٹیٹ مشین، کنٹرولرز، اور پارٹیکل فزکس کا CPU متبادل src/logic/ میں ہیں۔ طریقۂ کار سے جیومیٹری بنانے کی افادیتیں src/lib/ کے تحت ہیں، اور ماڈل کی تعریفیں src/models/ میں گروپ کی گئی ہیں۔

ٹیسٹ سوٹ چلائیں

WonderSnap میں Playwright سے بنائے گئے 36 اینڈ ٹو اینڈ اور یونٹ ٹیسٹس شامل ہیں۔ یہ ٹیسٹس مصنوعی ہاتھوں اور متعین گھڑی کے ساتھ حقیقی ایپلیکیشن چلاتے ہیں۔

Playwright کا Chromium براؤزر ایک بار انسٹال کریں:

npx playwright install chromium

پھر ٹیسٹس چلائیں:

npm test

یہ سوٹ اشاروں کے مکمل سلسلے، ہر ماڈل، الگ کیے گئے مناظر، کی بورڈ اور وہیل کنٹرولز، موافق لے آؤٹس، دھڑکن اور سانس لینے کی اینیمیشنز، دونوں ہاتھوں سے زوم، پرزے کا انتخاب، چٹکی والے تعاملات، کوئزز، صوتی کمانڈز، کٹ اوے موڈ، ریکارڈنگ، کیمرہ فال بیک رویے، پوز کلاسیفائرز، حالت کی منتقلی، طریقہ کار سے تیار کردہ ماڈل کی صحت، اور GPU فزکس کا احاطہ کرتا ہے۔ GPU شیڈر کا موازنہ بھی اس کے CPU متبادل سے کیا جاتا ہے، اور ہر موڈ میں تقریباً 1e-7 تک مطابقت پائی جاتی ہے۔

مسائل کا حل

• کیمرہ شروع نہیں ہوتا: index.html کو براہِ راست کھولنے کے بجائے ایپلیکیشن کو http://localhost:5173 کے ذریعے کھولیں، اور اشارہ ملنے پر کیمرے کی اجازت دیں۔
• ہاتھوں کی ٹریکنگ لوڈ نہیں ہوتی: npm install چلائیں۔ ٹریکنگ رن ٹائم node_modules سے فراہم کیا جاتا ہے۔
• فریم ریٹ کم ہے: http://localhost:5173/?n=100000&dpr=1 آزمائیں۔
• پورٹ 5173 استعمال میں ہے: npm start -- 8080 چلائیں اور http://localhost:8080 کھولیں۔

نتیجہ

WonderSnap یہ دکھاتا ہے کہ ڈیوائس پر ہاتھوں کی ٹریکنگ، حسبِ ضرورت اشارہ کلاسیفائرز، طریقہ کار سے ماڈل سازی، اور GPU پارٹیکل فزکس مل کر مکمل طور پر براؤزر میں ایک تعاملی تعلیمی تجربہ کیسے تخلیق کر سکتے ہیں۔ معیاری مقامی سیٹ اپ سے آغاز کریں، snap، مٹھی، کھلے ہاتھ، اشارہ کرنے اور چٹکی والے تعاملات سیکھیں، پھر URL ٹیوننگ، صوتی کنٹرول، کوئزز، کراس سیکشنز، ریکارڈنگ، اور خودکار ٹیسٹ سوٹ کا جائزہ لیں۔