إذا سبق لك استخدام WebXR Device API، تكون قد قطعت معظم الطريق.
تم طرح WebXR Device API في الخريف الماضي مع الإصدار 79 من Chrome. وكما ذكرنا آنذاك، لا يزال تنفيذ واجهة برمجة التطبيقات في Chrome قيد التطوير. يسرّ فريق Chrome الإعلان عن اكتمال بعض الأعمال. في الإصدار 81 من Chrome، تمّت إضافة ميزتَين جديدتَين:
تتناول هذه المقالة الواقع المعزّز. إذا سبق لك استخدام واجهة برمجة التطبيقات WebXR Device API، ستسرّك معرفة أنّ هناك القليل جدًا من المعلومات الجديدة التي يجب تعلمها. إنّ الدخول إلى جلسة WebXR يشبه إلى حد كبير عملية الدخول إلى جلسة الواقع المعزّز. إنّ تشغيل حلقة إطارات متكررة هو نفسه إلى حد كبير. تتمثل الاختلافات في الإعدادات التي تتيح عرض المحتوى بشكلٍ مناسب لتقنية الواقع المعزّز. إذا لم تكن على دراية بالمفاهيم الأساسية لـ WebXR، عليك قراءة مشاركاتي السابقة حول WebXR Device API، أو على الأقل أن تكون على دراية بالمواضيع التي تتناولها. يجب أن تعرف كيفية طلب جلسة و دخولها وكيفية تشغيل حلقة إطارات.
للحصول على معلومات عن اختبار النتائج، يُرجى الاطّلاع على المقالة المصاحبة وضع العناصر الافتراضية في مشاهد الواقع. يستند الرمز البرمجي في هذه المقالة إلى نموذج جلسة الواقع المعزّز الغامر (العرض التجريبي المصدر) من عيّنات WebXR Device API التي تقدّمها مجموعة عمل الويب الغامر.
قبل الغوص في الرمز، يجب استخدام نموذج جلسة الواقع المعزّز الشاملة مرة واحدة على الأقل. يجب أن يكون لديك هاتف Android حديث يعمل بإصدار Chrome 81 أو إصدار أحدث.
ما هي فائدة ذلك؟
ستكون تقنية الواقع المعزّز إضافة قيّمة إلى الكثير من صفحات الويب الحالية أو الجديدة من خلال السماح لها بتنفيذ حالات استخدام الواقع المعزّز بدون مغادرة المتصفّح. على سبيل المثال، يمكن أن تساعد هذه الميزة المستخدمين في التعلم على المواقع التعليمية، وتسمح للمشترين المحتملين بالاطّلاع على المنتجات في منازلهم أثناء التسوّق.
لنلقِ نظرة على حالة الاستخدام الثانية. تخيل محاكاة وضع تمثيل قياسي لجسم افتراضي في مشهد حقيقي. بعد وضع الصورة، تبقى على السطح المحدّد، وتظهر بالحجم الذي ستظهر به إذا كان العنصر الفعلي على هذا السطح، وتسمح للمستخدم بالتحرك حولها وكذلك الاقتراب منها أو الابتعاد عنها. ويمنح ذلك المشاهدين فهمًا أعمق للجسم مقارنةً بما هو ممكن باستخدام صورة ثنائية الأبعاد.
سأطرح سؤالاً قبل الأوان. لتنفيذ ما أوضحته، تحتاج إلى وظيفة الواقع المعزّز وبعض وسائل رصد الأسطح. تتناول هذه المقالة الحالة الأولى. تتناول المقالة المصاحبة حول WebXR Hit Test API (المرتبطة أعلاه) هذه النقطة الأخيرة.
طلب جلسة
يشبه طلب جلسة إلى حد كبير ما سبق لك تجربته. عليك أولاً معرفة
ما إذا كان نوع الجلسة المطلوب متاحًا على الجهاز الحالي من خلال الاتصال بالرقم
xr.isSessionSupported()
. بدلاً من طلب 'immersive-vr'
كما في السابق،
اطلب 'immersive-ar'
.
if (navigator.xr) {
const supported = await navigator.xr.isSessionSupported('immersive-ar');
if (supported) {
xrButton.addEventListener('click', onButtonClicked);
xrButton.textContent = 'Enter AR';
xrButton.enabled = supported; // supported is Boolean
}
}
وكما في السابق، يؤدي ذلك إلى تفعيل زر "بدء الواقع المعزّز". عندما ينقر المستخدم على الزر، يتم استدعاء
xr.requestSession()
مع تمرير 'immersive-ar'
أيضًا.
let xrSession = null;
function onButtonClicked() {
if (!xrSession) {
navigator.xr.requestSession('immersive-ar')
.then((session) => {
xrSession = session;
xrSession.isImmersive = true;
xrButton.textContent = 'Exit AR';
onSessionStarted(xrSession);
});
} else {
xrSession.end();
}
}
موقع ملائم
ربما لاحظت أنّني ميّزت سطرَين في نموذج الرمز البرمجي الأخير.
يبدو أنّ عنصر XRSession
يحتوي على سمة باسم isImmersive
. هذه سمة مساعدة أنشأتها بنفسي، وهي ليست جزءًا من المواصفات. سأستخدمها لاحقًا لاتخاذ قرارات بشأن المحتوى الذي أعرضه للمشاهد. لماذا ليس
هذا الحقل جزءًا من واجهة برمجة التطبيقات؟ لأنّ تطبيقك قد يحتاج إلى تتبُّع هذه السمة
بشكل مختلف، قرّر مؤلفو المواصفات إبقاء واجهة برمجة التطبيقات نظيفة.
الدخول إلى جلسة
تذكَّر شكل onSessionStarted()
في مقالتي السابقة:
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
xrSession.requestReferenceSpace('local-floor')
.then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
أحتاج إلى إضافة بعض العناصر لعرض الواقع المعزّز. أوقِف الخلفية. أولاً، سأحدِّد ما إذا كنت بحاجة إلى الخلفية. هذا هو الأول مكان سأستخدم فيه ميزة "مكان الراحة".
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
if (session.isImmersive) {
removeBackground();
}
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}
المساحات المرجعية
لم تتناول مقالاتي السابقة مساحات الإحالة بشكل مفصّل. يستخدم النموذج الذي أصفه اثنَين منهما، لذا حان الوقت لتصحيح هذا النقص.
تصف المساحة المرجعية العلاقة بين العالم الافتراضي و البيئة المادية للمستخدم. ويتم ذلك من خلال:
- تحديد نقطة الأصل لنظام الإحداثيات المستخدَم للتعبير عن المواقع في العالم الافتراضي
- تحديد ما إذا كان من المتوقّع أن يتحرك المستخدم ضمن نظام الإحداثيات هذا
- ما إذا كان نظام الإحداثيات هذا يحتوي على حدود تمّ تحديدها مسبقًا (لا تستخدم الأمثلة المعروضة هنا أنظمة إحداثيات ذات حدود محددة مسبقًا).
في جميع المساحات المرجعية، يعبّر الإحداثي X عن اليسار واليمين، ويعبّر الإحداثي Y عن الأعلى والأسفل، ويعبّر الإحداثي Z عن الأمام والخلف. القيم الموجبة هي اليسار والفوق والخلف، على التوالي.
تعتمد الإحداثيات التي تعرضها الدالة XRFrame.getViewerPose()
على نوع
المساحة المرجعية المطلوبة.
سنتناول المزيد من المعلومات حول ذلك عندما نصل إلى حلقة عرض اللقطات. في الوقت الحالي، نحتاج إلى اختيار نوع مرجع مناسب للواقع المعزّز. مرة أخرى، يستخدم هذا الإجراء سمة
convenience.
let refSpaceType
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
if (session.isImmersive) {
removeBackground();
}
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
refSpaceType = xrSession.isImmersive ? 'local' : 'viewer';
xrSession.requestReferenceSpace(refSpaceType).then((refSpace) => {
xrSession.requestAnimationFrame(onXRFrame);
});
}
إذا اطّلعت على مثال جلسة الواقع المعزّز immersive ، ستلاحظ أنّ المشهد ثابت في البداية وليس واقعًا مُعزّزًا على الإطلاق. يمكنك السحب والتمرير سريعًا باستخدام إصبعك للتنقّل في المشهد. إذا انقرت على "بدء الواقع المعزّز"، ستتم إزالة الخلفية ويمكنك التنقّل في المشهد من خلال تحريك الجهاز. وتستخدم الأوضاع أنواعًا مختلفة من المساحات المرجعية. يوضّح النص المميّز أعلاه كيفية اختيار هذا الخيار. ويستخدم أنواع المراجع التالية:
local
- تكون نقطة الأصل في موضع المشاهد في وقت إنشاء الجلسة. وهذا يعني أنّ التجربة لا تملك بالضرورة قاعدة أساسية محدّدة جيدًا، وقد يختلف موضع المصدر الدقيق حسب المنصة. على الرغم من عدم تحديد حدود مسبقة للمساحة، من المتوقّع أن تتمكّن من مشاهدة المحتوى بدون أي حركة سوى الدوران. كما هو موضّح في مثال الواقع المعزّز
الخاص بنا، قد يكون من الممكن إجراء بعض الحركات داخل المساحة.
viewer
: يتم استخدام هذه المساحة التي تتبع جهاز العرض بشكلٍ متكرّر للمحتوى المعروض مضمّنًا في الصفحة. عند تمريرها إلى getViewerPose، لا يوفّر العارض أيّ
تتبّع، وبالتالي يُبلغ دائمًا عن وضع في الأصل ما لم يعدّل التطبيق
الوضع باستخدام XRReferenceSpace.getOffsetReferenceSpace()
. يستخدم المثال
هذا لتفعيل ميزة تمويه الخلفية بالكاميرا باللمس.
تشغيل حلقة إطارات
من الناحية النظرية، لن يحدث أي تغيير في الخطوات التي اتّبعتها في جلسة الواقع الافتراضي الموضّحة في مقالاتي
السابقة. نقْل نوع المساحة المرجعية إلى XRFrame.getViewerPose()
.
سيكون الرمز XRViewerPose
المعروض من النوع الحالي لمساحة المرجع. يتيح استخدام viewer
كقيمة تلقائية للإعدادات للصفحة عرض معاينات المحتوى قبل طلب موافقة المستخدم على استخدام الواقع المعزّز أو الافتراضي. يوضّح ذلك نقطة مهمة: يستخدم المحتوى المضمّن حلقة عرض الإطارات نفسها المستخدَمة في المحتوى الغامر، ما يقلل من مقدار الرمز البرمجي الذي يجب الاحتفاظ به.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
if (xrViewerPose) {
// Render based on the pose.
}
}
الخاتمة
لا تتناول سلسلة المقالات هذه سوى أساسيات تنفيذ المحتوى الغامر على الويب. تقدّم عيّنات WebXR Device API التي تقدّمها مجموعة Immersive Web Working Group العديد من الإمكانات وحالات الاستخدام الإضافية. لقد صعدنا أيضًا نشر مقالة عن اختبار الأداء توضّح واجهة برمجة تطبيقات لرصد الأسطح ووضع عناصر افتراضية في عرض الكاميرا في العالم الحقيقي. يمكنك الاطّلاع عليها ومشاهدة مدوّنة web.dev للحصول على المزيد من المقالات في العام المقبل.
صورة ديفيد غراندموجين على Unsplash