ملخص: تُقدِّم هذه الدورة المبتدئة تصميمَ تفاعل الواقع المعزّز (AR) بلا حاجة إلى خبرة مسبقة في البرمجة أو AR. يبني الطلاب أول نموذج أولي AR تفاعلي باستخدام A-Frame وأدوات WebAR (بعلامات ثم بلا علامات)، ويتعلمون المبادئ الأساسية للتغذية الراجعة المكانية والتثبيت، ويُنجزون مشروع بورتفوليو. المحاور: مقدمة في مفاهيم AR ← أول مشهد AR (HTML/A-Frame) ← التفاعل بالعلامات ← التثبيت على السطح ← التغذية الراجعة البصرية والصوتية ← مشروع البورتفوليو.
أهداف التعلم
في نهاية هذه الدورة، سيكون الطالب قادراً على:
- شرح (Bloom: تذكُّر/فهم) ما هو الواقع المعزّز، وأنواعه (بالعلامات، بلا علامات) وتطبيقاته الملموسة.
- إنشاء (إنشاء) مشهد AR وظيفي في المتصفح باستخدام A-Frame بلا خادم ولا ترجمة.
- تطبيق (تطبيق) العلامات البصرية لتفعيل محتوى AR وضبط التثبيت على سطح مستوٍ.
- تصميم (إنشاء) تفاعلات أساسية: tap-to-place، دوران الكائن، تغذية راجعة بصرية عند التحديد.
- تقييم (تقييم) جودة النموذج AR وفق معايير قابلية القراءة والتثبيت والتغذية الراجعة.
- إنتاج (إنشاء) مشروع تخرج موثَّق وقابل للعرض.
الوحدة 1 — ما هو AR؟ (ساعتان)
المفهوم
يُضيف الواقع المعزّز (Augmented Reality - AR) عناصر رقمية على إدراك العالم المادي في الوقت الفعلي. يختلف عن الواقع الافتراضي (VR - Virtual Reality) بالانغماس الكلي وعن الواجهة التقليدية بالشاشة ثنائية الأبعاد.
معايير أزوما الثلاثة (1997): يجمع الحقيقي + الافتراضي / تفاعلي في الوقت الفعلي / فضاء ثلاثي الأبعاد.
المصدر: Azuma, R. (1997). A Survey of Augmented Reality. Presence, 6(4), 355–385.
أنواع AR للتذكُّر:
- بالعلامات (Marker-based): يُفعَّل بصورة هدف (رمز QR، شعار)
- بلا علامات / SLAM: يكتشف الأسطح دون علامة
- WebAR: AR في المتصفح (بلا تطبيق)
- AR بالخوذة (HMD AR): نظارات مخصصة (HoloLens، Vision Pro)
المختبر 1.1 — مراقبة وتحليل
الهدف: تطوير نظرة نقدية على تجارب AR القائمة.
الخطوات:
- فتح تجربتَي WebAR على الهاتف الذكي (مثال A-Frame: https://aframe.io/examples/showcase/helloworld/)
- لكل تجربة، دوِّن على ورقة: ما المُثبَّت؟ ما التغذية الراجعة البصرية؟ ما الذي يعمل/لا يعمل؟
- شارك في 3 جمل: «ما يعمل / ما لا يعمل / ما سأحسّنه»
تمرين قصير: ارسم باليد (نموذج ورقي) تجربة AR بسيطة لشرح شيء في محيطك المباشر.
الوحدة 2 — أول مشهد AR مع A-Frame (ساعتان)
المفهوم
A-Frame هو إطار HTML تصريحي لإنشاء مشاهد WebXR ثلاثية الأبعاد. بلا ترجمة، بلا خادم — مجرد ملف HTML.
التوثيق: 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-box position="0 1.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
الخصائص الأساسية: position (x y z)، rotation (درجات)، scale، color، visible
المختبر 2.1 — أول مشهد AR لي
الخطوات:
- أنشئ ملف
index.htmlعلى سطح المكتب - انسخ القالب أعلاه، افتحه في Chrome
- عدِّل: غيِّر اللون، أضف كرة (
<a-sphere>)، أسطوانة (<a-cylinder>) - أضف مستوى لمحاكاة الأرض:
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
تمرين قصير: أنشئ مشهداً يظهر 3 كائنات بسيطة (أشكال هندسية) على ارتفاعات مختلفة. سمِّ كل كائن بنص ثلاثي الأبعاد (<a-text>).
الوحدة 3 — AR بالعلامات مع AR.js (ساعتان)
المفهوم
AR.js مكتبة تُضيف تتبع AR إلى A-Frame. تكتشف النسخة بالعلامات علاماتٍ Hiro أو صوراً مخصصة وتُثبِّت عليها محتوى ثلاثي الأبعاد.
توثيق AR.js: https://ar-js-org.github.io/AR.js-Docs/
قالب العلامات: html <html> <head> <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script> </head> <body style="margin: 0; overflow: hidden;"> <a-scene embedded arjs> <a-marker preset="hiro"> <a-box position="0 0.5 0" material="color: red;"></a-box> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>
المتطلبات المادية: هاتف ذكي بكاميرا + متصفح Chrome/Firefox + علامة Hiro مطبوعة (https://ar-js-org.github.io/AR.js-Docs/marker-based/)
المختبر 3.1 — كائن على علامة
الخطوات:
- اطبع علامة Hiro أو اعرضها على الشاشة
- أنشئ ملف HTML بالعلامات أعلاه
- شغِّل الملف على خادم محلي (مثال:
npx serve.في الطرفية، أو VS Code Live Server) - افتح على الهاتف الذكي، أشر نحو العلامة
- راقب التثبيت والتتبع
تمرين قصير: استبدل المكعب الأحمر ببرج من 3 أشكال هندسية متراكمة. لكل شكل لون مختلف ودوران خاص به.
الوحدة 4 — التثبيت على السطح (بلا علامات) (ساعتان)
المفهوم
Tap-to-place هو النمط التفاعلي الأكثر شيوعاً في AR المحمول: يُشير المستخدم نحو سطح فتظهر معاينة، ثم ينقر ليضع الكائن. تستخدم ARKit وARCore تقنية SLAM لاكتشاف الأسطح المستوية.
على الويب، تقدم MindAR.js تتبعاً بسيطاً للأسطح بلا تطبيق:
https://hiukim.github.io/mind-ar-js-doc/
بديلاً عن ذلك، تقدم 8thWall (حل تجاري/مجاني جزئياً) SLAM عالي الجودة في المتصفح:
https://www.8thwall.com
المختبر 4.1 — معاينة وتوضيع (ورقي/نموذج)
(إذا تعذَّر الوصول إلى 8thWall أو MindAR، أنجز النموذج على الورق/Figma.)
خطوات النسخة الورقية:
- ارسم 5 شاشات: الحالة الأولية ← اكتشاف السطح (شبكة في الأرض) ← الكائن في معاينة (شبه شفاف) ← النقر ← الكائن موضوع ← التفاعل مع الكائن الموضوع
- علِّق على كل شاشة: ما المعلومة البصرية التي تُشير إلى حالة النظام؟
- حدِّد 3 أسئلة لاختبارها مع مستخدم حقيقي
تمرين قصير: اكتب في 5 جمل كيف تُشير للمستخدم أن هاتفه «يرى» سطحاً قابلاً للاكتشاف — بلا نص على الشاشة.
الوحدة 5 — التغذية الراجعة البصرية والصوتية (ساعتان)
المفهوم
في الواقع المعزّز، تحل التغذية الراجعة محل الاستجابة اللمسية للأشياء المادية. تُعلم المستخدم بحالة النظام (الكائن محدَّد، العملية مُنجزة، خطأ).
ثلاثة مستويات للتغذية الراجعة:
- مؤشر الحالة (خامل → hover → محدَّد → عملية): تغيير اللون، الحجم، الهالة
- تأكيد العملية: رسوم متحركة، جسيمات، صوت
- خطأ / حد: وميض أحمر، اهتزاز (على الجوّال)، صوت خطأ
قاعدة حرجة: يجب أن يكون كمون التغذية الراجعة < 100 مللي ثانية ليُدرَك فورياً (Nielsen، 1994 — قاعدة تأخيرات الواجهة).
المصدر: Nielsen, J. (1994). Usability Engineering. Morgan Kaufmann.
المختبر 5.1 — إضافة تغذية راجعة على كائن A-Frame
الخطوات:
- خذ مشهد المختبر 2.1
- أضف حدث نقر على المكعب:
html <a-box id="mycube" position="0 1.5 -3" color="#4CC3D9" event-set__click="_target: #mycube; color: #FF5733"> </a-box>
- أضف صوت نقر (ملف صوتي مجاني — مثال Freesound.org، ترخيص CC0)
- اختبر: هل يغير الكائن لونه فوراً؟
تمرين قصير: حدِّد لمشروع التخرج (انظر §المشروع): ما الحالات الثلاث الرئيسية لكائن AR في مشهدك؟ صف التغذية الراجعة البصرية لكل انتقال.
الوحدة 6 — اختبار المستخدمين الأساسي (ساعتان)
المفهوم
لا يحتاج اختبار مستخدمي AR إلى تعقيد للكشف عن مشكلات حرجة. حتى نموذج ورقي أو نموذج markerless بسيط يُتيح اختبار المؤثرات.
بروتوكول الاختبار الأدنى (يكفي 5 مستخدمين — جاكوب نيلسن):
Nielsen, J., & Landauer, T. (1993). A Mathematical Model of the Finding of Usability Problems. CHI '93 Proceedings. https://doi.org/10.1145/169059.169166
- جهِّز مهمة ملموسة («ضع الكائن على الطاولة»)
- راقب دون التدخل (لا تساعد)
- دوِّن: التردد، الأخطاء، التخلي، التغذية الراجعة اللفظية العفوية
- بعد المهمة: 3 أسئلة مفتوحة
المختبر 6.1 — اختبار مع شخصين
الخطوات:
- جهِّز نموذجك الأولي (رقمي أو ورقي)
- اكتب مهمة واضحة واحدة (لا «استكشف التطبيق» — بل «ضع الكائن الأحمر على السطح الذي تختاره»)
- اختبر مع شخصين من ملفين شخصيين مختلفين
- املأ شبكة ملاحظة: أُنجزت المهمة؟ الوقت؟ التردد؟ التعليقات؟
تمرين قصير: أدرج المشكلات الثلاث الرئيسية التي كشفتها اختباراتك، واقترح تصحيحاً ملموساً لكل واحدة.
مشروع التخرج — «كائني AR الأول»
الموجز
أنشئ تجربة AR بسيطة (بعلامات أو على سطح) تشرح أو تُقدِّم أو تُعزِّز كائناً أو فضاءً تعرفه جيداً — نبتة، كائن تصميمي، عمل فني، مكان.
القيود
- التكنولوجيا: A-Frame + AR.js (أو MindAR.js)
- مدة الاستخدام المستهدفة: 1–2 دقيقة
- يجب أن تعمل التجربة على الهاتف الذكي دون تثبيت تطبيق
- 0 نص تعليمي مرئي — يجب أن يكون التفاعل ذاتي التوجيه
المُسلَّمات
- ملف HTML وظيفي (نموذج أولي أو رابط للاستضافة)
- توثيق قصير (صفحة A4 واحدة): المفهوم، خيارات التفاعل، 3 قرارات تصميمية والسبب
- شبكة ملاحظة من اختبار المستخدم (1–2 مختبِر)
- عرض (5 دقائق): عرض حي + تأمل نقدي
معيار التقييم
| المعيار | غير كافٍ (1) | مُرضٍ (2) | جيد (3) | ممتاز (4) |
|---|---|---|---|---|
| الأداء التقني | لا يعمل على الهاتف | يعمل بصعوبة | يعمل بشكل موثوق | يعمل بلا احتكاك، الحالات مُدارة |
| جودة التثبيت | كائن عائم، غير مستقر | مثبَّت لكن غير مستقر | تثبيت مستقر | تثبيت طبيعي + إخفاء محاكى |
| تغذية راجعة للتفاعل | لا توجد | موجودة لكن متأخرة أو مُربِكة | واضحة (< 100 مللي ثانية) | متعددة الوسائط، متسقة |
| التوثيق | غائب أو غير مفهوم | موجود لكن ناقص | مفهوم + 3 قرارات | تأمل عميق + بدائل مدروسة |
| اختبار المستخدمين | غائب | مختبِر واحد، بيانات قليلة | 2 مختبِرَين، شبكة مملوءة | 2+ مختبِرَين، تكرار موثَّق |
القراءات والموارد
- توثيق A-Frame: https://aframe.io/docs/
- توثيق AR.js: https://ar-js-org.github.io/AR.js-Docs/
- MindAR.js: https://hiukim.github.io/mind-ar-js-doc/
- 8th Wall (WebAR): https://www.8thwall.com
- Azuma, R. (1997). A Survey of Augmented Reality. Presence, 6(4), 355–385.
- Nielsen, J. (1994). Usability Engineering. Morgan Kaufmann.
- Freesound.org (أصوات CC0): https://freesound.org
→ المستوى التالي: تصميم تفاعل AR — المستوى 2 → ورشة عمل مخصصة لمدرستك أو فريقك: احجزوا مكالمة 30 دقيقة — مجاناً
ورشة مكثّفة (يوم–يومان) للمدارس والاستوديوهات والمتاحف — نظرية مركّزة، تطبيقات موجّهة، مرافقة مشروع.
احجزوا مكالمة 30 دقيقة (مجاناً) →