বর্ধিত বাস্তবতা: আপনি এটি ইতিমধ্যেই জানেন

আপনি যদি ইতিমধ্যেই WebXR ডিভাইস এপিআই ব্যবহার করে থাকেন, তবে আপনি সেখানে বেশিরভাগই আছেন।

Joe Medley

ওয়েবএক্সআর ডিভাইস এপিআই ক্রোম 79-এ শেষ পতনে পাঠানো হয়েছে। তখন বলা হয়েছে, ক্রোমের এপিআই বাস্তবায়নের কাজ চলছে। কিছু কাজ শেষ হওয়ার ঘোষণা দিয়ে ক্রোম খুশি। Chrome 81 এ, দুটি নতুন বৈশিষ্ট্য এসেছে:

• অগমেন্টেড রিয়েলিটি সেশনের ধরন ।
• হিট টেস্টিং .

এই নিবন্ধটি বর্ধিত বাস্তবতা কভার করে। আপনি যদি ইতিমধ্যে WebXR ডিভাইস API ব্যবহার করে থাকেন, তাহলে শিখতে খুব কম নতুন আছে জেনে খুশি হবেন। একটি WebXR সেশনে প্রবেশ করা অনেকাংশে একই। একটি ফ্রেম লুপ চালানো মূলত একই। পার্থক্যগুলি কনফিগারেশনের মধ্যে রয়েছে যা বর্ধিত বাস্তবতার জন্য সামগ্রীকে যথাযথভাবে দেখানোর অনুমতি দেয়। আপনি যদি WebXR-এর মৌলিক ধারণাগুলির সাথে পরিচিত না হন, তাহলে আপনার WebXR ডিভাইস API-এ আমার আগের পোস্টগুলি পড়া উচিত, অথবা অন্তত এতে কভার করা বিষয়গুলির সাথে পরিচিত হওয়া উচিত৷ আপনার জানা উচিত কিভাবে অনুরোধ করতে হয় এবং একটি সেশনে প্রবেশ করতে হয় এবং আপনার জানা উচিত কিভাবে একটি ফ্রেম লুপ চালাতে হয়।

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

কোডে ডুব দেওয়ার আগে আপনাকে অন্তত একবার ইমারসিভ এআর সেশনের নমুনা ব্যবহার করতে হবে। আপনার Chrome 81 বা তার পরবর্তী সংস্করণ সহ একটি আধুনিক Android ফোন প্রয়োজন৷

এটা কি জন্য দরকারী?

অগমেন্টেড রিয়েলিটি অনেকগুলি বিদ্যমান বা নতুন ওয়েব পৃষ্ঠাগুলির জন্য একটি মূল্যবান সংযোজন হবে যাতে ব্রাউজার ছাড়াই AR ব্যবহারের ক্ষেত্রে প্রয়োগ করা যায়৷ উদাহরণস্বরূপ, এটি লোকেদের শিক্ষার সাইটগুলিতে শিখতে সাহায্য করতে পারে এবং সম্ভাব্য ক্রেতাদের কেনাকাটা করার সময় তাদের বাড়ির বস্তুগুলি কল্পনা করতে দেয়৷

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

আমি নিজের থেকে একটু এগিয়ে আছি। আমি যা বর্ণনা করেছি তা আসলে করতে, আপনার AR কার্যকারিতা এবং পৃষ্ঠতল সনাক্ত করার কিছু উপায় প্রয়োজন। এই নিবন্ধটি সাবেক কভার. WebXR হিট টেস্ট এপিআই (উপরে লিঙ্ক করা) এর সহকারী নিবন্ধটি পরবর্তীটিকে কভার করে।

একটি অধিবেশন অনুরোধ

একটি অধিবেশন অনুরোধ আপনি আগে দেখেছেন মত ​​অনেক. প্রথমে 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 নামে একটি সম্পত্তি আছে বলে মনে হচ্ছে। এটি একটি সুবিধাজনক সম্পত্তি যা আমি নিজেই তৈরি করেছি, এবং স্পেকের অংশ নয়। দর্শককে কী দেখাতে হবে সে বিষয়ে সিদ্ধান্ত নিতে আমি পরে এটি ব্যবহার করব। কেন এই সম্পত্তি API এর অংশ নয়? কারণ আপনার অ্যাপটিকে এই সম্পত্তিটিকে আলাদাভাবে ট্র্যাক করতে হতে পারে তাই স্পেক লেখকরা API পরিষ্কার রাখার সিদ্ধান্ত নিয়েছে।

একটি অধিবেশন প্রবেশ

আমার আগের নিবন্ধে 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);
  });

}

রেফারেন্স স্পেস

আমার আগের নিবন্ধগুলি রেফারেন্স স্পেস উপর skimmed. আমি যে নমুনাটি বর্ণনা করছি তা তাদের মধ্যে দুটি ব্যবহার করে, তাই এই বাদ দেওয়ার সময় এসেছে।

একটি রেফারেন্স স্পেস ভার্চুয়াল বিশ্ব এবং ব্যবহারকারীর শারীরিক পরিবেশের মধ্যে সম্পর্ক বর্ণনা করে। এটি এটি করে:

• ভার্চুয়াল জগতে অবস্থান প্রকাশের জন্য ব্যবহৃত স্থানাঙ্ক সিস্টেমের উত্স নির্দিষ্ট করা।
• ব্যবহারকারীর সেই স্থানাঙ্ক সিস্টেমের মধ্যে সরানো আশা করা হচ্ছে কিনা তা উল্লেখ করা।
• সেই সমন্বয় ব্যবস্থার পূর্ব-প্রতিষ্ঠিত সীমানা আছে কিনা। (এখানে দেখানো উদাহরণগুলি পূর্ব-প্রতিষ্ঠিত সীমানার সাথে সমন্বয় সিস্টেম ব্যবহার করে না।)

সমস্ত রেফারেন্স স্পেসের জন্য, X স্থানাঙ্ক বাম এবং ডানে প্রকাশ করে, Y উপরে এবং নীচে প্রকাশ করে এবং Z সামনে এবং পিছনে প্রকাশ করে। ইতিবাচক মান যথাক্রমে ডান, উপরে এবং পশ্চাদপদ।

XRFrame.getViewerPose() দ্বারা প্রত্যাবর্তিত স্থানাঙ্কগুলি অনুরোধ করা রেফারেন্স স্পেস প্রকারের উপর নির্ভর করে। আমরা ফ্রেম লুপ পেতে যখন যে সম্পর্কে আরো. এই মুহূর্তে আমাদের একটি রেফারেন্স টাইপ নির্বাচন করতে হবে যা বর্ধিত বাস্তবতার জন্য উপযুক্ত। আবার, এটি আমার সুবিধার সম্পত্তি ব্যবহার করে।

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);
  });
}

আপনি যদি ইমারসিভ এআর সেশনের নমুনাটি দেখে থাকেন তবে আপনি লক্ষ্য করবেন যে প্রাথমিকভাবে দৃশ্যটি স্থির এবং মোটেও বর্ধিত বাস্তবতা নয়। আপনি দৃশ্যের চারপাশে সরানোর জন্য আপনার আঙুল দিয়ে টেনে আনতে এবং সোয়াইপ করতে পারেন। আপনি যদি "স্টার্ট AR" ক্লিক করেন, তাহলে পটভূমি বাদ পড়ে যায় এবং আপনি ডিভাইসটি সরিয়ে দৃশ্যের চারপাশে যেতে পারেন। মোডগুলি বিভিন্ন রেফারেন্স স্পেস প্রকার ব্যবহার করে। উপরের হাইলাইট করা টেক্সট দেখায় কিভাবে এটি নির্বাচন করা হয়। এটি নিম্নলিখিত রেফারেন্স প্রকারগুলি ব্যবহার করে:

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

viewer - পৃষ্ঠায় ইনলাইনে উপস্থাপিত সামগ্রীর জন্য প্রায়শই ব্যবহৃত হয়, এই স্থানটি দেখার ডিভাইস অনুসরণ করে। getViewerPose-এ পাস করা হলে এটি কোন ট্র্যাকিং প্রদান করে না, এবং এইভাবে সর্বদা মূলে একটি পোজ রিপোর্ট করে যদি না অ্যাপ্লিকেশন এটিকে XRReferenceSpace.getOffsetReferenceSpace() দিয়ে পরিবর্তন করে। নমুনা ক্যামেরার স্পর্শ-ভিত্তিক প্যানিং সক্ষম করতে এটি ব্যবহার করে।

একটি ফ্রেম লুপ চলমান

ধারণাগতভাবে, আমার আগের নিবন্ধগুলিতে বর্ণিত VR সেশনে আমি যা করেছি তার থেকে কিছুই পরিবর্তন হয় না। XRFrame.getViewerPose() এ রেফারেন্স স্পেস টাইপ পাস করুন। রিটার্ন করা XRViewerPose বর্তমান রেফারেন্স স্পেস টাইপের জন্য হবে। ডিফল্ট হিসেবে viewer ব্যবহার করলে AR বা VR-এর জন্য ব্যবহারকারীর সম্মতি চাওয়ার আগে একটি পৃষ্ঠাকে কন্টেন্ট প্রিভিউ দেখানোর অনুমতি দেয়। এটি একটি গুরুত্বপূর্ণ বিষয় তুলে ধরে: ইনলাইন বিষয়বস্তু নিমজ্জিত বিষয়বস্তুর মতো একই ফ্রেম লুপ ব্যবহার করে, কোডের পরিমাণ কমিয়ে দেয় যা বজায় রাখতে হবে।

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  let xrViewerPose = xrFrame.getViewerPose(refSpaceType);
  if (xrViewerPose) {
    // Render based on the pose.
  }
}

উপসংহার

নিবন্ধগুলির এই সিরিজটি শুধুমাত্র ওয়েবে নিমজ্জিত বিষয়বস্তু বাস্তবায়নের মূল বিষয়গুলিকে কভার করে৷ ইমারসিভ ওয়েব ওয়ার্কিং গ্রুপের ওয়েবএক্সআর ডিভাইস API নমুনা দ্বারা আরও অনেক ক্ষমতা এবং ব্যবহারের ক্ষেত্রে উপস্থাপন করা হয়। আমরা সবেমাত্র একটি হিট পরীক্ষা নিবন্ধ প্রকাশ করেছি যা পৃষ্ঠতল সনাক্তকরণ এবং একটি বাস্তব-বিশ্ব ক্যামেরা ভিউতে ভার্চুয়াল আইটেম স্থাপনের জন্য একটি API ব্যাখ্যা করে। সেগুলি দেখুন এবং আগামী বছরে আরও নিবন্ধের জন্য web.dev ব্লগ দেখুন৷

আনস্প্ল্যাশে ডেভিড গ্র্যান্ডমাউগিনের ছবি