WebXR দিয়ে ডেভেলপ করুন

Android XR-এ Chrome WebXR সমর্থন করে। WebXR হল W3C দ্বারা একটি উন্মুক্ত মান যা সমর্থিত ব্রাউজারগুলিতে উচ্চ-পারফরম্যান্স XR API নিয়ে আসে। আপনি যদি ওয়েবের জন্য তৈরি করছেন, আপনি 3D মডেলের সাথে বিদ্যমান সাইটগুলিকে উন্নত করতে পারেন বা নতুন নিমজ্জিত অভিজ্ঞতা তৈরি করতে পারেন৷

নিম্নলিখিত WebXR বৈশিষ্ট্যগুলি Android XR-এর জন্য Chrome দ্বারা সমর্থিত:

• ডিভাইস API
• এআর মডিউল
• গেমপ্যাড মডিউল
• টেস্ট মডিউল আঘাত করুন
• হ্যান্ড ইনপুট
• নোঙ্গর
• ডেপথ সেন্সিং
• হালকা অনুমান

WebXR কার্যকরী দেখতে, একটি Android XR ডিভাইস বা Android XR এমুলেটরে Chrome চালু করুন এবং অফিসিয়াল WebXR নমুনাগুলি ব্রাউজ করুন৷

পূর্বশর্ত: একটি WebXR ফ্রেমওয়ার্ক চয়ন করুন

আপনি বিকাশ শুরু করার আগে, সঠিক WebXR ফ্রেমওয়ার্ক বেছে নেওয়া গুরুত্বপূর্ণ। এটি উল্লেখযোগ্যভাবে আপনার নিজস্ব উত্পাদনশীলতা বাড়ায় এবং আপনার তৈরি করা অভিজ্ঞতার গুণমান উন্নত করে।

• 3D দৃশ্যের উপর সম্পূর্ণ নিয়ন্ত্রণ এবং কাস্টম বা জটিল মিথস্ক্রিয়া তৈরির জন্য, আমরা three.js এবং babylon.js সুপারিশ করি।
• দ্রুত প্রোটোটাইপ করার জন্য বা 3D দৃশ্য সংজ্ঞায়িত করতে HTML-এর মতো সিনট্যাক্স ব্যবহার করার জন্য, আমরা A-Frame এবং মডেল-দর্শক সুপারিশ করি।
• আপনি আরও ফ্রেমওয়ার্ক এবং নমুনা কোড পর্যালোচনা করতে পারেন।

আপনি যদি নেটিভ জাভাস্ক্রিপ্ট এবং WebGL ব্যবহার করতে পছন্দ করেন, তাহলে আপনার প্রথম WebXR পরীক্ষা তৈরি করতে GitHub-এ WebXR দেখুন।

Android XR-এর জন্য মানিয়ে নিন

আপনার যদি অন্য ডিভাইসে বিদ্যমান WebXR অভিজ্ঞতা থাকে, তাহলে আপনাকে Android XR-এ WebXR-কে সঠিকভাবে সমর্থন করার জন্য আপনার কোড আপডেট করতে হতে পারে। উদাহরণস্বরূপ, মোবাইল ডিভাইসগুলিতে ফোকাস করা WebXR অভিজ্ঞতাগুলিকে Android XR-এ একটি স্ক্রীন থেকে দুটি স্টেরিও স্ক্রিনে মানিয়ে নিতে হবে। মোবাইল ডিভাইস বা বিদ্যমান হেডসেটগুলিকে লক্ষ্য করে WebXR অভিজ্ঞতার জন্য ইনপুট কোড মানিয়ে নেওয়ার প্রয়োজন হতে পারে।

অ্যান্ড্রয়েড এক্সআর-এ WebXR-এর সাথে কাজ করার সময়, প্রতিটি চোখের জন্য দুটি স্ক্রিন রয়েছে—একটি সত্যের জন্য ক্ষতিপূরণ দিতে আপনাকে আপনার কোড আপডেট করতে হতে পারে।

WebXR-এ গভীরতার ধারনা নিশ্চিত করার বিষয়ে

যখন একজন ব্যবহারকারী তাদের ফিজিক্যাল স্পেসে একটি ভার্চুয়াল অবজেক্ট রাখে, তখন তার স্কেলটি সঠিক হওয়া উচিত যাতে এটি মনে হয় যেন এটি সত্যিই সেখানে রয়েছে। উদাহরণস্বরূপ, একটি আসবাব কেনাকাটার অ্যাপে, ব্যবহারকারীদের বিশ্বাস করতে হবে যে একটি ভার্চুয়াল আর্মচেয়ার তাদের বসার ঘরে পুরোপুরি ফিট হবে।

Android XR-এর জন্য Chrome 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-এ হাতের মিথস্ক্রিয়া যোগ করুন

আপনার WebXR অ্যাপে হ্যান্ড ইন্টারঅ্যাকশন যোগ করা আরও স্বজ্ঞাত এবং নিমগ্ন অভিজ্ঞতা সক্ষম করে ব্যবহারকারীর ব্যস্ততা বাড়ায়।

অ্যান্ড্রয়েড এক্সআর-এ হ্যান্ড ইনপুট প্রাথমিক মিথস্ক্রিয়া প্রক্রিয়া। Android XR-এর জন্য Chrome ডিফল্ট ইনপুট হিসাবে হ্যান্ড ইনপুট API সমর্থন করে। এই API ব্যবহারকারীদের দৃশ্যের উপাদানগুলি দখল, ধাক্কা বা ম্যানিপুলেট করতে অঙ্গভঙ্গি এবং হাতের নড়াচড়া ব্যবহার করে স্বাভাবিকভাবে ভার্চুয়াল বস্তুর সাথে ইন্টারঅ্যাক্ট করতে দেয়।

মোবাইল ফোন বা কন্ট্রোলার-কেন্দ্রিক XR ডিভাইসের মতো ডিভাইসগুলি এখনও হ্যান্ড ইনপুট সমর্থন করে না। সঠিকভাবে হ্যান্ড ইনপুট সমর্থন করার জন্য আপনাকে আপনার WebXR কোড আপডেট করতে হতে পারে। হাতের সাথে ইমারসিভ ভিআর সেশনটি দেখায় কিভাবে আপনার WebXR প্রকল্পে হ্যান্ড ট্র্যাকিংকে একীভূত করতে হয়।

নিচের অ্যানিমেশনটি ওয়েবএক্সআর এপিআই-এর সাথে পিঞ্চিংকে একত্রিত করার একটি উদাহরণ দেখায় যাতে একজন ব্যবহারকারীকে ভার্চুয়াল স্পেসের পৃষ্ঠকে "মুছে ফেলা" দেখানোর জন্য বাস্তব জগতে একটি পাস-থ্রু উইন্ডো প্রকাশ করা হয়।

WebXR-এ অনুমতি

আপনি যখন WebXR API ব্যবহার করেন যার জন্য অনুমতি প্রয়োজন, Chrome ব্যবহারকারীকে সাইটের অনুমতি দেওয়ার জন্য অনুরোধ করে। সমস্ত WebXR API-এর 3d ম্যাপিং এবং ক্যামেরা ট্র্যাকিং অনুমতি প্রয়োজন৷ অ্যাক্সেস ট্র্যাক করা মুখ, চোখ এবং হাতের ডেটাও অনুমতি দ্বারা সুরক্ষিত। যদি সমস্ত প্রয়োজনীয় অনুমতি দেওয়া হয়, navigator.xr.requestSession('immersive-ar', options) কল করা একটি বৈধ WebXR সেশন ফিরিয়ে দেয়।

ব্যবহারকারীর দ্বারা নির্বাচিত অনুমতি পছন্দ প্রতিটি ডোমেনের জন্য অব্যাহত থাকে। একটি ভিন্ন ডোমেনে একটি WebXR অভিজ্ঞতা অ্যাক্সেস করার ফলে Chrome আবার অনুমতির জন্য অনুরোধ করে৷ যদি WebXR অভিজ্ঞতার জন্য একাধিক অনুমতির প্রয়োজন হয়, Chrome প্রতিটি অনুমতির জন্য একবারে অনুরোধ করে।

ওয়েবে সমস্ত অনুমতির মতো, অনুমতি প্রত্যাখ্যান করা হয় এমন পরিস্থিতিতে আপনাকে সঠিকভাবে পরিচালনা করা উচিত।