অ্যান্ড্রয়েড এক্সআর-এ ক্রোম ওয়েবএক্সআর সমর্থন করে। ওয়েবএক্সআর হল W3C- এর একটি ওপেন স্ট্যান্ডার্ড যা সমর্থিত ব্রাউজারগুলিতে উচ্চ-কার্যক্ষমতাসম্পন্ন এক্সআর এপিআই নিয়ে আসে। আপনি যদি ওয়েবের জন্য তৈরি করেন, তাহলে আপনি 3D মডেল ব্যবহার করে বিদ্যমান সাইটগুলিকে উন্নত করতে পারেন অথবা নতুন নিমজ্জিত অভিজ্ঞতা তৈরি করতে পারেন।
নিম্নলিখিত WebXR বৈশিষ্ট্যগুলি Chrome for Android XR দ্বারা সমর্থিত:
WebXR কে কার্যকরভাবে দেখতে, একটি Android XR ডিভাইসে Chrome অথবা Android XR এমুলেটর চালু করুন এবং অফিসিয়াল WebXR নমুনাগুলি ব্রাউজ করুন।
পূর্বশর্ত: একটি WebXR ফ্রেমওয়ার্ক বেছে নিন
ডেভেলপমেন্ট শুরু করার আগে, সঠিক WebXR ফ্রেমওয়ার্ক নির্বাচন করা গুরুত্বপূর্ণ। এটি আপনার নিজস্ব উৎপাদনশীলতা উল্লেখযোগ্যভাবে বৃদ্ধি করে এবং আপনার তৈরি অভিজ্ঞতার মান উন্নত করে।
- 3D দৃশ্যের উপর সম্পূর্ণ নিয়ন্ত্রণ এবং কাস্টম বা জটিল মিথস্ক্রিয়া তৈরির জন্য, আমরা three.js এবং babylon.js সুপারিশ করি।
- দ্রুত প্রোটোটাইপিং বা 3D দৃশ্য সংজ্ঞায়িত করার জন্য HTML-এর মতো সিনট্যাক্স ব্যবহারের জন্য, আমরা A-Frame এবং model-viewer সুপারিশ করি।
- আপনি আরও ফ্রেমওয়ার্ক এবং নমুনা কোড পর্যালোচনা করতে পারেন।
আপনি যদি নেটিভ জাভাস্ক্রিপ্ট এবং WebGL ব্যবহার করতে পছন্দ করেন, তাহলে আপনার প্রথম WebXR পরীক্ষা তৈরি করতে GitHub-এ WebXR দেখুন।
অ্যান্ড্রয়েড এক্সআর-এর জন্য অ্যাডাপ্ট করুন
যদি আপনার অন্য ডিভাইসে WebXR অভিজ্ঞতা চলমান থাকে, তাহলে Android XR-এ WebXR সঠিকভাবে সমর্থন করার জন্য আপনার কোড আপডেট করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, মোবাইল ডিভাইসগুলিতে ফোকাস করা WebXR অভিজ্ঞতাগুলিকে Android XR-এ একটি স্ক্রিন থেকে দুটি স্টেরিও স্ক্রিনে অভিযোজিত করতে হবে। মোবাইল ডিভাইস বা বিদ্যমান হেডসেটগুলিকে লক্ষ্য করে 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প্রতিটি চোখের জন্য একটি ভিউ প্রদান করে এবং এর সাথে সম্পর্কিত লুপ দুবার রান করে।
WebXR ডেপথ সেন্সিং API ব্যবহার করে রিয়েল-টাইম ডেপথ ভিজ্যুয়ালাইজেশন। লাল রঙ কাছাকাছি পিক্সেল নির্দেশ করে যখন নীল রঙ আরও দূরে পিক্সেল নির্দেশ করে।
WebXR-এ হাতের মিথস্ক্রিয়া যোগ করুন
আপনার WebXR অ্যাপে হাতের মিথস্ক্রিয়া যোগ করলে ব্যবহারকারীর ব্যস্ততা বৃদ্ধি পায়, যার ফলে আরও স্বজ্ঞাত এবং নিমজ্জিত অভিজ্ঞতা সম্ভব হয়।
অ্যান্ড্রয়েড এক্সআর-এ হ্যান্ড ইনপুট হল প্রাথমিক ইন্টারঅ্যাকশন প্রক্রিয়া। অ্যান্ড্রয়েড এক্সআর-এর জন্য ক্রোম ডিফল্ট ইনপুট হিসেবে হ্যান্ড ইনপুট এপিআই সমর্থন করে। এই এপিআই ব্যবহারকারীদের দৃশ্যের উপাদানগুলিকে ধরতে, ধাক্কা দিতে বা ম্যানিপুলেট করতে অঙ্গভঙ্গি এবং হাতের নড়াচড়া ব্যবহার করে স্বাভাবিকভাবেই ভার্চুয়াল বস্তুর সাথে ইন্টারঅ্যাক্ট করতে দেয়।
মোবাইল ফোন বা কন্ট্রোলার-কেন্দ্রিক XR ডিভাইসের মতো ডিভাইসগুলি এখনও হাতের ইনপুট সমর্থন নাও করতে পারে। সঠিকভাবে হাতের ইনপুট সমর্থন করার জন্য আপনাকে আপনার WebXR কোড আপডেট করতে হতে পারে। ইমারসিভ VR সেশন উইথ হ্যান্ডস আপনার WebXR প্রকল্পে হাতের ট্র্যাকিং কীভাবে একীভূত করবেন তা প্রদর্শন করে।
নিচের অ্যানিমেশনটি WebXR API-এর সাথে পিঞ্চিং-এর সমন্বয়ের একটি উদাহরণ দেখায় যেখানে একজন ব্যবহারকারী ভার্চুয়াল স্পেসের পৃষ্ঠ "মুছে" ফেলে বাস্তব জগতে একটি পাস-থ্রু উইন্ডো প্রকাশ করে।
বাস্তবতা দেখার জন্য স্ক্রিন মুছে ফেলার জন্য হ্যান্ড পিঞ্চ ব্যবহার করার WebXR ডেমো।
WebXR-এ অনুমতি
যখন আপনি WebXR API ব্যবহার করেন যার জন্য অনুমতির প্রয়োজন হয়, তখন Chrome ব্যবহারকারীকে সাইটটিকে অনুমতি দেওয়ার জন্য অনুরোধ করে। সমস্ত WebXR API-এর জন্য 3D ম্যাপিং এবং ক্যামেরা ট্র্যাকিং অনুমতি প্রয়োজন। ট্র্যাক করা মুখ, চোখ এবং হাতের ডেটা অ্যাক্সেসও অনুমতি দ্বারা সুরক্ষিত। যদি সমস্ত প্রয়োজনীয় অনুমতি মঞ্জুর করা হয়, তাহলে navigator.xr.requestSession('immersive-ar', options) কল করলে একটি বৈধ WebXR সেশন ফেরত আসে।
ব্যবহারকারীর দ্বারা নির্বাচিত অনুমতির পছন্দ প্রতিটি ডোমেনের জন্য বহাল থাকে। ভিন্ন ডোমেনে WebXR অভিজ্ঞতা অ্যাক্সেস করার ফলে Chrome আবার অনুমতির জন্য অনুরোধ করে। যদি WebXR অভিজ্ঞতার জন্য একাধিক অনুমতির প্রয়োজন হয়, তাহলে Chrome প্রতিটি অনুমতির জন্য অনুরোধ করে।
ওয়েবে সমস্ত অনুমতির মতো, আপনার এমন পরিস্থিতিগুলি সঠিকভাবে পরিচালনা করা উচিত যেখানে অনুমতি অস্বীকার করা হয়।