بني وتحكّم فنماذج الجسيمات ديال GPU مع WonderSnap

شنو هي WonderSnap؟

WonderSnap هي تجربة ثلاثية الأبعاد خدامة فالمتصفح، كتحوّل النماذج الإجرائية لسحب مضيئة فيها حتى لـ 250,000 جسيم كتحركهم وحدة معالجة الرسوميات. تقدر تصفق بصباعيك باش تستدعي الجسيمات، وتشكلها على هيئة معالم أو بنيات تشريحية، وتدوّر النماذج بيدك، وتفتح التركيبات فمشاهد مفككة وموسومة.

التطبيق كيجمع بين تتبع اليد على الجهاز، والتعرف المخصص على الإيماءات، والنماذج الإجرائية، ومحرك WebGL2 مكتوب يدوياً. ما كيستعملش Three.js، ولا محرك ألعاب، ولا إطار عمل للواجهة الأمامية. فيديو الكاميرا كيبقى فالجهاز ديالك وما كيتبعثش لأي خادم.

الكاميرا اختيارية. كل تفاعل أساسي متوفر حتى من خلال عناصر التحكم اللي فالشاشة، ولوحة المفاتيح، والفأرة.

المميزات الرئيسية

• رسم الجسيمات بوحدة معالجة الرسوميات: فيزياء الجسيمات كتخدم عبر WebGL2 transform feedback وكتدعم حتى لـ 250,000 جسيم.
• تتبع اليد على الجهاز: MediaPipe Hand Landmarker كيتبع حتى جوج ديال اليدين، بـ 21 نقطة مرجعية لكل يد.
• التعرف على الإيماءات: مصنفات مخصصة كتتعرف على التصفيق بالأصابع، والقبضات، واليدين المفتوحتين، والإشارة، والقرص، وعلامة السلام، وتدوير اليد، والتكبير بجوج اليدين.
• 33 نموذجاً إجرائياً: المجموعة كتشمل المعالم، والتشريح، والبيولوجيا، والمحركات، والمركبات، والآلات.
• أجزاء تفاعلية: المكونات المسماة تقدر تضي، وتتفرق فمشاهد مفككة، وتعرض التسميات، ويمكن سحبها باش تتفحص عن قرب.
• تشريح متحرك: القلب كينبض بسرعة 72 نبضة فالدقيقة، والرئتان كيتنفسو فدورة مدتها 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

حل http://localhost:5173 فـ Chrome أو Edge. اختار 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: كيكبرو ولا كيصغرو العرض، ولا كيرجعوه للحجم العادي. تقدر تستعمل حتى Control مع عجلة الفأرة.
• C: كيشعل ولا كيطفّي الكاميرا.
• L: كيبانيو ولا كيختافيو تسميات الأجزاء.
• R: كيشعل ولا كيطفّي الدوران الأوتوماتيكي.
• G: كيفعّل ولا كيوقف الدوران باليد.
• X: كيفعّل المقطع الداخلي. استعمل , و. باش تحرك مستوى القطع بشوية.
• Q: كيبدا وضع الاختبار.
• M: كيستعمل الأوامر الصوتية وخصائص القراءة بصوت عالي.
• K: كيسجل فيديو.
• D: كيشغل العرض التجريبي المدمج.
• I: كيوصف الجزء المختار.
• Esc: كيلغي اختيار الجزء الحالي.
• H: كيعرض المساعدة.

استكشف مجموعة الموديلات

WonderSnap فيه 33 موديل إجرائي مبنيين على قياسات حقيقية ومنظمين فست مجموعات:

• المعالم: حداش معلمة، منها برج إيفل، الهرم الأكبر، تاج محل، بيغ بن، ودار الأوبرا ديال سيدني.
• التشريح: عشرة موديلات، منها الدماغ، القلب النابض، الرئتين وهما كيتنفسو، الهيكل العظمي، وجسم بشري بطبقات.
• البيولوجيا: حلزون مزدوج ديال DNA كيقدر يتحل، وخلية حيوانية.
• المحركات: محركات Inline-4 وHEMI V8 بشاحن فائق، ومحرك طائرة نفاثة turbofan، ومحرك شعاعي بتسع أسطوانات.
• المركبات: سيارة رياضية، دراجة نارية، طائرة ركاب، وSaturn V مع فصل المراحل.
• الآلات: ساعة يد ميكانيكية، وحزمة بطارية ديال سيارة كهربائية فيها الخلايا، القضبان الناقلة، التبريد، ونظام تدبير البطارية.

استعمل الخصائص التعليمية

عاين الأجزاء اللي عليها التسميات

وجه المؤشر لشي مكوّن ولا كليكي عليه باش تختارو. الجزء المختار كينور، والبطاقة ديالو كشرح شنو كيدير. فعّل التسميات بL باش تبانو خطوط الربط بين السميات والأجزاء الفردية.

بدا اختبار

ضغط على Q باش تدخل لوضع الاختبار. WonderSnap كيقدم أسئلة بحال لقا: Hippocampus. وجه المؤشر للمكوّن المطلوب ولا كليكي عليه. كل اختبار فيه خمسة ديال الأسئلة وكيعطي نقطة.

تحكم فالمشهد بالصوت

ضغط على M باش توصل للأوامر الصوتية وخاصية القراءة بصوت عالي. من الأمثلة المدعومة: show me the heart وopen it up وwhere is the right atrium وzoom in وquiz. تركيب الكلام موثق فChrome وEdge.

صايب مقطع داخلي

ضغط على X باش تفعّل العرض المقطوع. مستوى القطع يقدر يتبع يدك وكيكشف مقطع داخلي منور. إلا ماكانش إدخال بالإشارة، استعمل , و. باش تحرك المستوى بالتدريج.

سجل النتيجة

ضغط على K باش تسجل المشهد وتحفظو ففيديو WebM.

ضبط WonderSnap باستعمال اختيارات الرابط

اختيارات سلسلة الاستعلام كتخليك تبدل سلوك البداية وتضبط التصيير بلا ما تعدل ملفات المصدر.

• ?n=250000: كيحدد عدد الجزيئات.
• ?model=12: كيبدا بموديل محدد بالرقم.
• ?autostart=camera: كيتجاوز شاشة البداية وكيطلب وضع الكاميرا.
• ?autostart=nocamera: كيتجاوز شاشة البداية وكيخدم بلا كاميرا.
• ?trails=0: كيعطّل آثار الجزيئات.
• ?dpr=1: كيفرض نسبة بكسلات الجهاز تكون 1، وهادشي يقدر يعاون مع كروت الشاشة البطيئة.

تقدر تجمع بين الاختيارات. مثلا، هاد العنوان كيبدا بلا كاميرا، كيستعمل 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 ومصيّر transform-feedback. منطق الإشارات، وآلة الحالات، ووحدات التحكم، والنسخة اللي كتخدم بالـCPU من فيزياء الجزيئات كاينين فsrc/logic/. أدوات الهندسة الإجرائية كاينة تحت src/lib/، وتعريفات الموديلات مجموعين فsrc/models/.

شغل مجموعة الاختبارات

WonderSnap فيه 36 اختبار من اختبارات النهاية للنهاية واختبارات الوحدات مبنيين باستعمال Playwright. الاختبارات كتحرك التطبيق الحقيقي باستعمال أيادٍ اصطناعية وساعة محددة.

ثبت متصفح Chromium ديال Playwright مرة وحدة:

npx playwright install chromium

ومن بعد شغل الاختبارات:

npm test

هاد السويت كيغطي المسار الكامل ديال الإيماءات، وجميع الموديلات، والمناظر المفككة، والتحكم بالكيبورد وبالعجلة، والتخطيطات المتجاوبة، وحركات النبض والتنفس، والتكبير بجوج اليدين، واختيار الأجزاء، وتفاعلات القرص، والاختبارات، والأوامر الصوتية، ووضعية القطع، والتسجيل، والسلوك البديل ديال الكاميرا، ومصنّفات الوضعيات، والانتقالات بين الحالات، وصلاحية الموديلات الإجرائية، وفيزياء الـGPU. وحتى شيدر الـGPU كيتقارن مع النظير ديالو فالـCPU باش يوصل تقريباً لـ1e-7 فكل وضعية.

حل المشاكل

• الكاميرا ما كتبدأش: حلّ التطبيق عبر http://localhost:5173 بلا ما تحلّ index.html مباشرة، وسمح باستعمال الكاميرا ملي يطلب منك المتصفح.
• تتبّع اليد ما كيتحمّلش: شغّل npm install. وقت التشغيل ديال التتبّع كيتخدم من node_modules.
• معدّل الإطارات ضعيف: جرّب http://localhost:5173/?n=100000&dpr=1.
• المنفذ 5173 مستعمل: شغّل npm start -- 8080 وحلّ http://localhost:8080.

الخلاصة

WonderSnap كيبين كيفاش يقدرو تتبّع اليد على الجهاز، ومصنّفات الإيماءات المخصّصة، والنمذجة الإجرائية، وفيزياء الجزيئات على الـGPU يخلّقو تجربة تعليمية تفاعلية كاملة فالمتصفح. بدا بالإعداد المحلي العادي، وتعلّم تفاعلات السناب، والقبضة، واليد محلولة، والإشارة، والقرص، ومن بعد استكشف ضبط الرابط، والتحكم الصوتي، والاختبارات، والمقاطع العرضية، والتسجيل، ومجموعة الاختبارات الآلية.