অ্যান্ড্রয়েড এক্সআর-এর জন্য ক্রোম ব্রাউজার ওয়েবএক্সআর (WebXR ) সমর্থন করে। ওয়েবএক্সআর হলো W3C- এর একটি উন্মুক্ত স্ট্যান্ডার্ড, যা সমর্থিত ব্রাউজারগুলোতে উচ্চ-ক্ষমতাসম্পন্ন এক্সআর এপিআই (XR API) নিয়ে আসে। আপনি যদি ওয়েবের জন্য কিছু তৈরি করেন, তবে থ্রিডি মডেল দিয়ে বিদ্যমান সাইটগুলোকে উন্নত করতে পারেন অথবা নতুন ইমারসিভ অভিজ্ঞতা তৈরি করতে পারেন।
ক্রোম ফর অ্যান্ড্রয়েড এক্সআর নিম্নলিখিত ওয়েবএক্সআর বৈশিষ্ট্যগুলি সমর্থন করে:
- ডিভাইস এপিআই
- এআর মডিউল
- গেমপ্যাড মডিউল
- হিট টেস্ট মডিউল
- হাতের ইনপুট
- অ্যাঙ্কর
- গভীরতা সংবেদন
- আলোর অনুমান
WebXR-এর কার্যকারিতা দেখতে, একটি Android XR ডিভাইস বা Android XR এমুলেটরে Chrome চালু করুন এবং অফিসিয়াল WebXR স্যাম্পলগুলো ব্রাউজ করুন।
পূর্বশর্ত: একটি WebXR ফ্রেমওয়ার্ক নির্বাচন করুন
উন্নয়ন কাজ শুরু করার আগে সঠিক WebXR ফ্রেমওয়ার্ক বেছে নেওয়া জরুরি। এটি আপনার নিজের কর্মদক্ষতা উল্লেখযোগ্যভাবে বাড়িয়ে তোলে এবং আপনার তৈরি করা অভিজ্ঞতার মান উন্নত করে।
- থ্রিডি সিন-এর উপর সম্পূর্ণ নিয়ন্ত্রণ এবং কাস্টম বা জটিল ইন্টারঅ্যাকশন তৈরির জন্য আমরা three.js এবং babylon.js ব্যবহারের পরামর্শ দিই।
- দ্রুত প্রোটোটাইপিংয়ের জন্য অথবা এইচটিএমএল-এর মতো সিনট্যাক্স ব্যবহার করে থ্রিডি সিন সংজ্ঞায়িত করতে, আমরা এ-ফ্রেম এবং মডেল-ভিউয়ার ব্যবহারের পরামর্শ দিই।
- আপনি আরও ফ্রেমওয়ার্ক এবং নমুনা কোড পর্যালোচনা করতে পারেন।
আপনি যদি নেটিভ জাভাস্ক্রিপ্ট এবং WebGL ব্যবহার করতে পছন্দ করেন, তাহলে আপনার প্রথম WebXR এক্সপেরিমেন্ট তৈরি করতে GitHub-এ WebXR দেখুন।
অ্যান্ড্রয়েড এক্সআর-এর জন্য অভিযোজিত
অন্যান্য ডিভাইসে যদি আপনার আগে থেকেই WebXR এক্সপেরিয়েন্স চালু থাকে, তাহলে Android XR-এ WebXR-কে সঠিকভাবে সাপোর্ট করার জন্য আপনাকে আপনার কোড আপডেট করতে হতে পারে। উদাহরণস্বরূপ, মোবাইল ডিভাইসের জন্য তৈরি WebXR এক্সপেরিয়েন্সগুলোকে Android XR-এর একটি স্ক্রিন থেকে দুটি স্টেরিও স্ক্রিনের সাথে মানিয়ে নিতে হবে। মোবাইল ডিভাইস বা বিদ্যমান হেডসেটকে লক্ষ্য করে তৈরি WebXR এক্সপেরিয়েন্সগুলোর ইনপুট কোডকে হ্যান্ড-ফার্স্ট করার জন্য পরিবর্তন করতে হতে পারে।
Android XR-এ WebXR নিয়ে কাজ করার সময়, প্রতিটি চোখের জন্য একটি করে মোট দুটি স্ক্রিন থাকার বিষয়টি বিবেচনা করে আপনার কোড আপডেট করার প্রয়োজন হতে পারে।
WebXR-এ গভীরতার অনুভূতি নিশ্চিত করা সম্পর্কে
যখন কোনো ব্যবহারকারী তার বাস্তব জগতে কোনো ভার্চুয়াল বস্তু রাখেন, তখন সেটির মাপ সঠিক হওয়া উচিত, যাতে দেখে মনে হয় বস্তুটি সত্যিই সেখানে থাকার জন্য তৈরি। উদাহরণস্বরূপ, একটি আসবাবপত্র কেনাকাটার অ্যাপে, ব্যবহারকারীদের এই বিশ্বাস রাখতে হবে যে একটি ভার্চুয়াল আরামকেদারা তাদের বসার ঘরে নিখুঁতভাবে মানিয়ে যাবে।
ক্রোম ফর অ্যান্ড্রয়েড এক্সআর, ওয়েবএক্সআর (WebXR)-এর ডেপথ সেন্সিং মডিউলকে সমর্থন করে, যা কোনো ডিভাইসের বাস্তব পরিবেশের মাত্রা ও রূপরেখা উপলব্ধি করার ক্ষমতাকে উন্নত করে। এই গভীরতার তথ্য আপনাকে আরও বেশি নিমগ্ন ও বাস্তবসম্মত ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে, যা ব্যবহারকারীদেরকে সঠিক সিদ্ধান্ত নিতে সহায়তা করে।
মোবাইল ফোনের ডেপথ সেন্সিংয়ের থেকে ভিন্ন, অ্যান্ড্রয়েড এক্সআর-এর ডেপথ সেন্সিং হলো স্টেরিওস্কোপিক, যা বাইনোকুলার ভিশনের জন্য রিয়েল-টাইমে দুটি ডেপথ ম্যাপ স্ট্রিম করে। স্টেরিও ডেপথ ফ্রেমগুলোকে সঠিকভাবে সাপোর্ট করার জন্য আপনাকে আপনার WebXR কোড আপডেট করতে হতে পারে।
নিম্নলিখিত উদাহরণটি ত্রিমাত্রিকভাবে গভীরতার তথ্য প্রদর্শন করে:
// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
const session = frame.session;
session.requestAnimationFrame(onXRFrame);
const baseLayer = session.renderState.baseLayer;
const pose = frame.getViewerPose(xrRefSpace);
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Clears the framebuffer.
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Note: Two views will be returned from pose.views.
for (const view of pose.views) {
const viewport = baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
const depthData = frame.getDepthInformation(view);
if (depthData) {
renderDepthInformationGPU(depthData, view, viewport);
}
}
} else {
console.error('Pose unavailable in the current frame!'); }
}
কোড সম্পর্কে মূল বিষয়গুলো
- গভীরতার ডেটা অ্যাক্সেস করার জন্য একটি বৈধ পোজ ফেরত দিতে হবে।
-
pose.viewsপ্রতিটি চোখের জন্য একটি করে ভিউ রিটার্ন করে এবং এর সংশ্লিষ্ট `for` লুপটি দুইবার চলে।
WebXR ডেপথ সেন্সিং এপিআই ব্যবহার করে রিয়েল-টাইম ডেপথ ভিজ্যুয়ালাইজেশন। লাল রঙ কাছের পিক্সেল এবং নীল রঙ দূরের পিক্সেল নির্দেশ করে।
WebXR-এ হাতের মিথস্ক্রিয়া যোগ করুন
আপনার WebXR অ্যাপে হাতের মিথস্ক্রিয়া যোগ করা হলে তা আরও স্বজ্ঞামূলক এবং নিমগ্ন অভিজ্ঞতা প্রদানের মাধ্যমে ব্যবহারকারীর সম্পৃক্ততা বাড়ায়।
অ্যান্ড্রয়েড এক্সআর-এ হাতের ইনপুটই হলো প্রধান ইন্টারঅ্যাকশন পদ্ধতি। অ্যান্ড্রয়েড এক্সআর-এর জন্য ক্রোম ব্রাউজার ডিফল্ট ইনপুট হিসেবে হ্যান্ড ইনপুট এপিআই সমর্থন করে। এই এপিআই ব্যবহারকারীদের অঙ্গভঙ্গি এবং হাতের নড়াচড়ার মাধ্যমে দৃশ্যের উপাদানগুলোকে ধরা, ধাক্কা দেওয়া বা নাড়াচাড়া করার সুযোগ দিয়ে স্বাভাবিকভাবে ভার্চুয়াল বস্তুগুলোর সাথে ইন্টারঅ্যাক্ট করতে দেয়।
মোবাইল ফোন বা কন্ট্রোলার-কেন্দ্রিক এক্সআর ডিভাইসের মতো ডিভাইসগুলো হয়তো এখনও হ্যান্ড ইনপুট সমর্থন করে না। হ্যান্ড ইনপুট সঠিকভাবে সমর্থন করার জন্য আপনাকে আপনার WebXR কোড আপডেট করতে হতে পারে। ‘The Immersive VR Session with Hands’- এ দেখানো হয়েছে কীভাবে আপনার WebXR প্রোজেক্টে হ্যান্ড ট্র্যাকিং যুক্ত করতে হয়।
নিম্নলিখিত অ্যানিমেশনটিতে পিঞ্চিং-এর সাথে WebXR API-এর সমন্বয়ের একটি উদাহরণ দেখানো হয়েছে, যেখানে একজন ব্যবহারকারী একটি ভার্চুয়াল স্থানের পৃষ্ঠতল "মুছে ফেলার" মাধ্যমে বাস্তব জগতে প্রবেশের জন্য একটি পাস-থ্রু উইন্ডো উন্মোচন করেন।
হাতের চিমটি ব্যবহার করে স্ক্রিন মুছে ফেলার মাধ্যমে ভৌত বাস্তবতাকে ভেদ করে দেখার একটি WebXR ডেমো।
WebXR-এ অনুমতি
যখন আপনি অনুমতি-প্রয়োজনীয় WebXR API ব্যবহার করেন, তখন Chrome ব্যবহারকারীকে সাইটটির জন্য অনুমতি দিতে অনুরোধ করে। সমস্ত WebXR API-এর জন্য 3d ম্যাপিং এবং ক্যামেরা ট্র্যাকিং-এর অনুমতি প্রয়োজন। ট্র্যাক করা মুখ, চোখ এবং হাতের ডেটা অ্যাক্সেস করার বিষয়টিও অনুমতি দ্বারা সুরক্ষিত। যদি সমস্ত প্রয়োজনীয় অনুমতি দেওয়া হয়, তাহলে navigator.xr.requestSession('immersive-ar', options) কল করলে একটি বৈধ WebXR সেশন ফেরত আসে।
ব্যবহারকারীর বেছে নেওয়া অনুমতির পছন্দ প্রতিটি ডোমেনের জন্য অপরিবর্তিত থাকে। ভিন্ন ডোমেনে কোনো WebXR অভিজ্ঞতা অ্যাক্সেস করলে Chrome আবার অনুমতির জন্য অনুরোধ করে। যদি WebXR অভিজ্ঞতাটির জন্য একাধিক অনুমতির প্রয়োজন হয়, তবে Chrome একে একে প্রতিটি অনুমতির জন্য অনুরোধ করে।
ওয়েবের সকল অনুমতির মতোই, অনুমতি প্রত্যাখ্যান করা হলে আপনাকে যথাযথভাবে পরিস্থিতি সামাল দিতে হবে।