ملخص: تُقدّم هذه الدورة المبتدئة تصميمَ تفاعل الواقع الافتراضي دون الحاجة إلى أي خبرة تقنية أو خبرة سابقة في الواقع الافتراضي. يبني الطلاب أول بيئة واقع افتراضي تفاعلية لهم باستخدام A-Frame وWebXR، ويفهمون المبادئ الجوهرية للحضور والوقاية من دوار الواقع الافتراضي، ويصممون تنقلًا أساسيًا وتفاعلًا مع الأشياء، ويُتمّون مشروعًا للمحفظة قابلًا للعرض في أي متصفح متوافق مع WebXR أو خوذة. الخطوط العامة: مقدمة إلى مفاهيم الواقع الافتراضي ← أول مشهد (A-Frame) ← التنقل والملاحة ← التفاعل مع الأشياء ← التغذية الراجعة والصوت المكاني ← مشروع المحفظة.
أهداف التعلم
في نهاية هذه الدورة، سيتمكن الطلاب من:
- شرح (بلوم: التذكر/الفهم) ما هو الواقع الافتراضي، والفرق بين الحضور والانغماس، والأنواع الرئيسية لتجارب الواقع الافتراضي.
- إنشاء (الإنشاء) مشهد واقع افتراضي تفاعلي في المتصفح مع A-Frame، بدون خادم أو تصريف.
- تطبيق (التطبيق) نمط تنقل بسيط (انتقال فوري أو تنقل بلوحة المفاتيح) مناسب لتجربة WebVR.
- تصميم (الإنشاء) تفاعلات أساسية مع الأشياء: نقر، إمساك، رسوم تغذية راجعة متحركة.
- تقييم (التقييم) راحة تجربة الواقع الافتراضي وفق معايير التأخر ومعدل الإطارات والحركة.
- إنتاج (الإنشاء) مشروع ختامي موثق وقابل للعرض (في المتصفح، لا تلزم خوذة).
الوحدة 1 — ما هو الواقع الافتراضي؟ (2 ساعة)
المفهوم
يحل الواقع الافتراضي (VR — Virtual Reality) محل إدراك العالم الحقيقي ببيئة مُولَّدة بالكامل بواسطة الحاسوب. يقوم على ثلاثة ركائز: الانغماس (Immersion) (العزل الحسي)، الحضور (Presence) (الشعور الذاتي بأنك "هناك")، التفاعلية (Interactivity) (البيئة تستجيب للمستخدم).
التمييز الجوهري:
- الانغماس = خاصية موضوعية للنظام (الدقة، مجال الرؤية، التأخر). قابل للقياس.
- الحضور = تجربة ذاتية للمستخدم. يعتمد على الانغماس لكن أيضًا على المحتوى والسياق العاطفي.
المصدر: Slater, M., & Wilbur, S. (1997). A Framework for Immersive Virtual Environments (FIVE). Presence, 6(6), 603–616.
ثلاثة أنواع من تجارب الواقع الافتراضي:
- الواقع الافتراضي بالحجم الكامل (Room-scale VR): المستخدم يسير في المساحة الجسدية (≥ 2×2م)
- الواقع الافتراضي الثابت (Stationary VR): جلوس أو وقوف، بدون حركة
- WebVR / WebXR: واقع افتراضي في المتصفح، متاح بدون تثبيت
دوار الواقع الافتراضي (Cybersickness): إزعاج (غثيان، دوخة) ناجم عن التعارض بين الحركة البصرية والسكون الجسدي. القاعدة الذهبية: معدل الإطارات ≥ 60 fps + التأخر < 20ms + تجنب حركات الكاميرا غير المُبادَر بها من المستخدم.
التمرين المعملي 1.1 — الملاحظة والتحليل
الهدف: تنمية العين النقدية لتجارب الواقع الافتراضي الموجودة (في المتصفح).
الخطوات:
- افتح مثالًا على A-Frame على حاسوب (بدون خوذة): https://aframe.io/examples/showcase/helloworld/
- انتقل بالنقر والسحب بالماوس. لاحظ: ماذا تشعر؟ أي جسم تفاعلي؟ ما الذي ينقص؟
- افتح مثالًا ثانيًا (https://aframe.io/examples/) — اختر بحرية.
- لكل مثال، دوّن: ما الذي يخلق إحساسًا بالعمق؟ ما التغذية الراجعة التي تدل على التفاعلية؟ ما الذي ستُحسّنه؟
تمرين مصغر: ارسم يدويًا (نموذج أولي ورقي) غرفة افتراضية بسيطة مع 3 أشياء. لكل واحد، حدد: هل هو تفاعلي؟ ما السلوك الذي يُطلقه؟
الوحدة 2 — أول مشهد واقع افتراضي مع A-Frame (2 ساعة)
المفهوم
A-Frame إطار HTML إعلاني لإنشاء مشاهد WebXR ثلاثية الأبعاد. لا تصريف، لا خادم — مجرد ملف HTML يُفتح في Chrome أو Firefox.
التوثيق: https://aframe.io/docs/
البنية الأساسية الدنيا: html <!DOCTYPE html> <html> <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> </head> <body> <a-scene> <a-sky color="#87CEEB"></a-sky> <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#228B22"></a-plane> <a-box position="-1.5 0.5 -3" color="#EF2D5E" shadow="cast: true; receive: false"></a-box> <a-sphere position="0 1 -3.5" radius="0.5" color="#FFC65D"></a-sphere> <a-cylinder position="1.5 0.75 -3" radius="0.3" height="1.5" color="#4CC3D9"></a-cylinder> <a-entity id="rig" position="0 1.6 0"> <a-camera></a-camera> </a-entity> </a-scene> </body> </html>
السمات الأساسية: position (x y z بالأمتار)، rotation (درجات)، scale، color، visible، shadow
كيان الكاميرا: <a-entity id="rig"> عند ارتفاع 1.6م يحاكي ارتفاع عين الشخص البالغ.
التمرين المعملي 2.1 — أول مشهد واقع افتراضي لي
الخطوات:
- أنشئ ملف
vr-scene.htmlعلى سطح المكتب - انسخ القالب أعلاه، افتحه في Chrome
- تنقّل بالماوس (سحب) + WASD للتحرك
- عدّل: غيّر الألوان، أضف حلقة (
<a-torus>)، نصًا ثلاثي الأبعاد (<a-text value="مرحبا الواقع الافتراضي" position="0 2 -3">) - لاحظ العمق والمنظور — كيف تُقرأ المسافات؟
تمرين مصغر: أنشئ مشهدًا يمثل غرفة مغلقة (4 جدران + أرضية + سقف) مع 3 أشياء بأحجام مختلفة في مواضع متميزة. يجب أن "يحكي" كل جسم شيئًا عن الفضاء.
الوحدة 3 — التنقل والملاحة (2 ساعة)
المفهوم
التنقل (Locomotion) هو نمط الحركة في الفضاء الافتراضي. إنه أهم عامل لدوار الواقع الافتراضي — نمط تنقل سيئ يجعل التجربة غير قابلة للاستخدام.
نمطان رئيسيان للمبتدئين:
| النمط | الآلية | الراحة | متى تُستخدم |
|---|---|---|---|
| الانتقال الفوري (Teleportation) | تأشير + تأكيد → قفز فوري | ممتاز | الجمهور العام، الجلسات الطويلة |
| الملاحة بالماوس/لوحة المفاتيح | WASD + سحب (سطح المكتب) | مقبول (سطح المكتب) | نماذج أولية سريعة |
إضافة الانتقال الفوري في A-Frame (مكوّن npm): html <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-teleport-controls.min.js"></script> html <a-entity id="rig" position="0 1.6 0"> <a-camera> <a-cursor></a-cursor> </a-camera> <a-entity teleport-controls="cameraRig: #rig; teleportOrigin: #camera; button: trigger" laser-controls="hand: left"></a-entity> </a-entity>
قواعد راحة التنقل:
- لا دوران غير مُبادَر به من المستخدم أبدًا
- لا تسارع/تباطؤ مفاجئ
- دائمًا قدِّم بديلًا للأشخاص الحساسين لدوار الحركة
التمرين المعملي 3.1 — منطقة التنقل
الخطوات:
- انطلق من المشهد في التمرين المعملي 2.1
- حدِّد منطقة تنقل مرئية على الأرض (نسيج شبكي أو لون مختلف)
- أضف علامات وجهات للانتقال الفوري (دوائر متوهجة على الأرض)
- اختبر مع شخصَين: هل يلاحظان العلامات؟ هل يفهمان أنه يمكنهما التحرك؟
تمرين مصغر: ارسم خريطة التنقل لمشروعك الختامي: أين يبدأ المستخدم، أي مناطق يمكنه الوصول إليها، أي مناطق محظورة ولماذا.
الوحدة 4 — التفاعل مع الأشياء (2 ساعة)
المفهوم
يجب أن يحترم التفاعل مع أشياء الواقع الافتراضي الإيحاءات الجسدية (Physical affordances): الجسم القابل للتلاعب يجب أن يُشير إلى ذلك بصريًا.
نمط المؤشر/النظرة في A-Frame: <a-cursor> هو نقطة مركزية على الشاشة — يُختار الجسم بالتأشير عليه والنقر (أو بعد تأخير).
html <a-camera> <a-cursor color="#FF5733" fuse="true" fuse-timeout="1500"></a-cursor> </a-camera>
الاستجابة للتفاعلات: html <a-box id="mybox" position="0 1 -3" color="#4CC3D9" animation__hover="property: scale; to: 1.2 1.2 1.2; startEvents: mouseenter; dur: 200" animation__unhover="property: scale; to: 1 1 1; startEvents: mouseleave; dur: 200" animation__click="property: color; to: #FF5733; startEvents: click; dur: 300"> </a-box>
ثلاث حالات للجسم التفاعلي:
- خامل (Idle): مظهر محايد
- مُحوَّم عليه (Hover): إشارة أن الجسم مُستهدَف (حجم، حد، لون)
- نشط (Active): تأكيد الفعل (رسوم متحركة، صوت)
التمرين المعملي 4.1 — أشياء تفاعلية
الخطوات:
- في مشهدك، اختر جسمَين وأضف الحالات الثلاث (خامل / مُحوَّم عليه / نشط)
- استخدم
animation__*في A-Frame لكل انتقال - للتغذية الراجعة "النشطة": أضف تغيير لون مميز + رسوم حجم قصيرة (1 → 1.3 → 1)
- اختبر: هل تفهم أنه يمكنك التفاعل قبل التأشير على الجسم؟
تمرين مصغر: أدرج الأشياء الثلاثة في مشروعك الختامي وعرّف حالاتها الثلاث. كيف يعرف المستخدم، قبل التفاعل، أن الجسم قابل للنقر؟
الوحدة 5 — التغذية الراجعة والصوت المكاني (2 ساعة)
المفهوم
الصوت هو الناقل الثاني للحضور بعد الصورة. في واقع افتراضي سطح المكتب، يُحوّل إضافة الصوت المكاني التجربة بشكل جذري.
الصوت الموضعي في A-Frame: html <a-entity position="0 1 -3" sound="src: url(click.mp3); on: click; positional: true; rolloffFactor: 2"> </a-entity>
الصوت المحيطي (صوت البيئة): html <a-entity sound="src: url(ambience.mp3); autoplay: true; loop: true; volume: 0.3"> </a-entity>
قاعدة راحة الصوت:
- مستوى الصوت المحيطي: 20–30% (لا يهيمن على أصوات التفاعل)
- صوت التفاعل: قصير (< 500ms)، واضح، مميز عن المحيط
- خطط دائمًا للتجربة الصامتة (إتاحة، بيئات بدون صوت)
موارد الصوت CC0: https://freesound.org (تصفية "CC0") · https://pixabay.com/music/
التمرين المعملي 5.1 — مشهد مع صوت
الخطوات:
- ابحث عن صوت محيطي CC0 (مثل: رياح خفيفة، مساحة داخلية هادئة)
- ابحث عن صوتَي تفاعل CC0 (مثل: نقرة، جرس، فرقعة)
- أضف المحيط إلى المشهد + صوت واحد لكل جسم تفاعلي
- اختبر بدون النظر إلى الشاشة: هل يمكنك فهم المساحة من الصوت وحده؟
تمرين مصغر: صِف في 3 جمل تصميم الصوت لمشروعك الختامي. ما الصوت الذي يُعلم المستخدم بكل فعل رئيسي؟
الوحدة 6 — اختبار المستخدم الأساسي (2 ساعة)
المفهوم
حتى نموذج أولي لـ WebVR في المتصفح يمكن اختباره بدون خوذة. الهدف هو التحقق من أن التفاعلات مفهومة وأن الحركة مريحة.
بروتوكول اختبار أدنى (سطح المكتب، مختبران):
نيلسن ولانداور (1993): 5 مختبرين يكشفون ~85% من المشكلات. مختبران يكفيان في بداية المشروع للمشكلات الحرجة.
- جهّز مهمتَين ملموستَين ("اذهب إلى الجسم الأحمر وتفاعل معه")
- راقب بدون تدخل
- دوّن: التردد، العوائق، التعليقات التلقائية
- 3 أسئلة مفتوحة بعد الاختبار
التمرين المعملي 6.1 — اختبار مع شخصَين
الخطوات:
- جهّز نموذجك الأولي على حاسوب مخصص للاختبار
- صِغ مهمتَين (ليس "استكشف" — "افعل X")
- اختبر مع ملفَّي شخصية مختلفَين (غير اللاعبين إن أمكن)
- أملأ الشبكة: هل أُنجزت المهمة؟ الوقت؟ التردد؟ التعليقات؟
تمرين مصغر: أدرج المشكلات الثلاث الكاشفة من اختبارَيك. لكل منها، اقترح حلًا ملموسًا والأولوية (عائق / مهم / ثانوي).
مشروع الختام — "أول فضاء واقع افتراضي لي"
الإيجاز
أنشئ فضاء واقع افتراضي بسيطًا في المتصفح يُـيقدّم، يستكشف، أو يحكي شيئًا — مكان خيالي، جسم ذو معنى، كون شخصي.
القيود
- التكنولوجيا: A-Frame (WebXR)
- لا تلزم خوذة — يعمل في متصفح سطح المكتب
- يجب أن يحتوي الفضاء على 3 أشياء تفاعلية على الأقل (3 حالات لكل منها)
- صوت موضعي واحد على الأقل وصوت محيطي واحد
- مدة الاستخدام المستهدفة: 2–5 دقائق
المحصّلات
- ملف HTML وظيفي (أو رابط استضافة مثل Glitch.com، CodePen)
- توثيق قصير (صفحة A4 واحدة): المفهوم، 3 قرارات تصميمية ومبرراتها، خريطة التنقل
- شبكة الملاحظات من اختبار المستخدم (مختبران)
- عرض تقديمي (5 دقائق): عرض مباشر + إفادة تأملية
مقياس التقييم
| المعيار | غير كافٍ (1) | مُرضٍ (2) | جيد (3) | ممتاز (4) |
|---|---|---|---|---|
| الوظيفة التقنية | لا يفتح أو يتعطل | يعمل بصعوبة | يعمل بشكل موثوق | يعمل بدون احتكاك، 60 fps مستقر |
| التنقل والراحة | تضليل، دوار الحركة | قابل للتنقل بمساعدة | ملاحة واضحة | ملاحة بديهية، 0 دوار |
| التفاعلات | لا تفاعل وظيفي | 1–2 تفاعل بدون تغذية راجعة | 3 تفاعلات مع تغذية راجعة | 3+ تفاعلات + 3 حالات محددة |
| الصوت | غائب | صوت حاضر لكن سيئ التوازن | صوت محيطي + تفاعلات | صوت مكاني موضعي + تصميم صوتي متسق |
| التوثيق | غائب | حاضر لكن ناقص | مفهوم + 3 قرارات | تأمل عميق + بدائل مدروسة |
القراءات والموارد
- توثيق A-Frame: https://aframe.io/docs/
- مدرسة A-Frame (دروس تفاعلية): https://aframe.io/aframe-school/
- Glitch.com (استضافة WebXR مجانية): https://glitch.com
- Slater, M., & Wilbur, S. (1997). A Framework for Immersive Virtual Environments. Presence, 6(6), 603–616.
- LaViola Jr., J. J. (2000). A Discussion of Cybersickness. ACM SIGCHI Bulletin, 32(1), 47–56.
- Freesound.org (أصوات CC0): https://freesound.org
- مواصفات WebXR W3C: https://www.w3.org/TR/webxr/
→ المستوى التالي: تصميم التفاعل في الواقع الافتراضي — المستوى الثاني → ورشة مخصصة لمدرستك أو فريقك: احجزوا مكالمة 30 دقيقة — مجاناً
ورشة مكثّفة (يوم–يومان) للمدارس والاستوديوهات والمتاحف — نظرية مركّزة، تطبيقات موجّهة، مرافقة مشروع.
احجزوا مكالمة 30 دقيقة (مجاناً) →