এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ভার্চুয়াল বাস্তবতা ওয়েবে আসে

নিমজ্জিত অভিজ্ঞতার একটি বর্ণালীর জন্য আপনাকে প্রস্তুত করার জন্য কয়েকটি মৌলিক বিষয়: ভার্চুয়াল বাস্তবতা, বর্ধিত বাস্তবতা এবং এর মধ্যে সবকিছু।

Joe Medley

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

এই নিবন্ধটি নিমজ্জিত ওয়েবে একটি সিরিজ শুরু করে। এই কিস্তিতে একটি মৌলিক WebXR অ্যাপ্লিকেশন সেট আপ করার পাশাপাশি একটি XR সেশনে প্রবেশ এবং প্রস্থান করা অন্তর্ভুক্ত রয়েছে। পরবর্তী নিবন্ধগুলি ফ্রেম লুপ (ওয়েবএক্সআর অভিজ্ঞতার ওয়ার্কহরস), অগমেন্টেড রিয়েলিটির বিশেষত্ব এবং ওয়েবএক্সআর হিট টেস্ট এপিআই, একটি এআর সেশনে সারফেস সনাক্ত করার একটি মাধ্যম কভার করবে। অন্যথায় বলা না থাকলে, আমি এই এবং পরবর্তী নিবন্ধগুলিতে যা কভার করেছি তা AR এবং VR উভয় ক্ষেত্রেই সমানভাবে প্রযোজ্য।

নিমজ্জিত ওয়েব কি?

যদিও আমরা নিমজ্জিত অভিজ্ঞতা বর্ণনা করতে দুটি শব্দ ব্যবহার করি—অগমেন্টেড রিয়েলিটি এবং ভার্চুয়াল রিয়েলিটি—অনেকে সেগুলিকে সম্পূর্ণ বাস্তবতা থেকে সম্পূর্ণ ভার্চুয়াল পর্যন্ত বর্ণালীতে ভাবেন, এর মধ্যে নিমজ্জনের মাত্রা সহ। XR-এ 'X' একটি বীজগাণিতিক পরিবর্তনশীল যা নিমজ্জিত অভিজ্ঞতার বর্ণালীতে যেকোন কিছুর জন্য দাঁড়িয়েছে এমন চিন্তাভাবনাকে প্রতিফলিত করার উদ্দেশ্যে।

একটি গ্রাফ সম্পূর্ণ বাস্তবতা থেকে সম্পূর্ণ নিমজ্জিত পর্যন্ত চাক্ষুষ অভিজ্ঞতার বর্ণালী চিত্রিত করে। — নিমজ্জিত অভিজ্ঞতার বর্ণালী

নিমজ্জিত অভিজ্ঞতার উদাহরণগুলির মধ্যে রয়েছে:

গেমস
360° ভিডিও
নিমগ্ন পরিবেশে উপস্থাপিত ঐতিহ্যবাহী 2D (বা 3D) ভিডিও
বাড়ি কেনা
আপনি কেনার আগে আপনার বাড়িতে পণ্য দেখুন
নিমগ্ন শিল্প
কিছু শীতল কেউ এখনও ভাবেনি

ধারণা এবং ব্যবহার

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

এই নিবন্ধের কোডটি ইমারসিভ ওয়েব ওয়ার্কিং গ্রুপের বেয়ারবোনস নমুনার ( ডেমো , উত্স ) উপর ভিত্তি করে তৈরি করা হয়েছে, তবে স্পষ্টতা এবং সরলতার জন্য সম্পাদনা করা হয়েছে।

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

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

একটি XR সেশনে প্রবেশ করার জন্য একটি ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন৷ এটি পেতে, XRSystem ( navigator.xr এর মাধ্যমে) পরীক্ষা করতে বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করুন এবং XRSystem.isSessionSupported() এ একটি কল করুন। জেনে রাখুন যে ক্রোম সংস্করণ 79 এবং 80-এ XRSystem অবজেক্টটিকে XR বলা হত।

নীচের উদাহরণে, আমি ইঙ্গিত করেছি যে আমি 'immersive-vr' সেশনের ধরন সহ একটি ভার্চুয়াল বাস্তবতা সেশন চাই৷ অন্যান্য সেশনের ধরন হল 'immersive-ar' এবং 'inline' । একটি ইনলাইন সেশন হল HTML এর মধ্যে সামগ্রী উপস্থাপনের জন্য এবং প্রধানত টিজার সামগ্রীর জন্য ব্যবহৃত হয়। ইমারসিভ এআর সেশন নমুনা এটি প্রদর্শন করে। আমি পরবর্তী নিবন্ধে এটি ব্যাখ্যা করব।

একবার আমি জানি যে ভার্চুয়াল রিয়েলিটি সেশনগুলি সমর্থিত, আমি একটি বোতাম সক্ষম করি যা আমাকে একটি ব্যবহারকারীর অঙ্গভঙ্গি অর্জন করতে দেয়৷

if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported('immersive-vr');
  if (supported) {
    xrButton.addEventListener('click', onButtonClicked);
    xrButton.textContent = 'Enter VR';
    xrButton.enabled = supported; // supported is Boolean
  }
}

বোতাম সক্রিয় করার পরে, আমি একটি ক্লিক ইভেন্টের জন্য অপেক্ষা করি তারপর একটি সেশনের অনুরোধ করি৷

let xrSession = null;
function onButtonClicked() {
  if (!xrSession) {
    navigator.xr.requestSession('immersive-vr')
    .then((session) => {
      xrSession = session;
      xrButton.textContent = 'Exit XR';
      onSessionStarted(xrSession);
    });
  } else {
    xrSession.end();
  }
}

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

একটি অধিবেশন লিখুন

একটি সেশন পাওয়ার পরে, আমাকে এটি শুরু করতে হবে এবং এটিতে প্রবেশ করতে হবে। কিন্তু প্রথমে, আমাকে কয়েকটি জিনিস সেট আপ করতে হবে। একটি সেশনের একটি onend ইভেন্ট হ্যান্ডলার প্রয়োজন যাতে ব্যবহারকারী প্রস্থান করার সময় অ্যাপ বা ওয়েব পৃষ্ঠা পুনরায় সেট করা যায়।

আমার দৃশ্য আঁকার জন্য আমার একটি <canvas> উপাদানেরও প্রয়োজন হবে। এটি একটি XR-সামঞ্জস্যপূর্ণ WebGLRenderingContext বা WebGL2RenderingContext হতে হবে। সমস্ত অঙ্কন তাদের বা WebGL-ভিত্তিক ফ্রেমওয়ার্ক যেমন Three.js ব্যবহার করে করা হয়।

এখন যেহেতু আমার আঁকার জায়গা আছে, তাতে আঁকতে আমার কন্টেন্টের উৎস দরকার। তার জন্য, আমি XRWebGLLayer এর একটি উদাহরণ তৈরি করি। আমি XRSession.updateRenderState() কল করে এটিকে ক্যানভাসের সাথে সংযুক্ত করি।

আমি একবার সেশনে থাকলে, ভার্চুয়াল বাস্তবতায় জিনিসগুলি কোথায় আছে তা নির্ধারণ করার জন্য আমার একটি উপায় দরকার। আমি একটি রেফারেন্স স্থান প্রয়োজন হবে. একটি 'local-floor' রেফারেন্স স্পেস হল এমন একটি যেখানে উত্সটি দর্শকের কাছে অবস্থিত এবং y-অক্ষটি ফ্লোর স্তরে 0 এবং এটি সরানোর প্রত্যাশিত নয়৷ রেফারেন্স স্পেস অন্যান্য ধরনের আছে, কিন্তু এটি একটি আরো জটিল বিষয় আমি এখানে যেতে পারি. আমি একটি ভেরিয়েবলে রেফারেন্স স্পেস সংরক্ষণ করি কারণ যখন আমি স্ক্রিনে আঁকব তখন আমার এটির প্রয়োজন হবে।

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);

  let canvas = document.createElement('canvas');
  webGLRenContext = canvas.getContext('webgl', { xrCompatible: true });

  xrSession.updateRenderState({
    baseLayer: new XRWebGLLayer(xrSession, webGLRenContext)
  });

  xrSession.requestReferenceSpace('local-floor')
  .then((refSpace) => {
    xrRefSpace = refSpace;
    xrSession.requestAnimationFrame(onXRFrame);
  });
}

একটি রেফারেন্স স্পেস পাওয়ার পর, আমি XRSession.requestAnimationFrame() কল করি। এটি ভার্চুয়াল সামগ্রী উপস্থাপনের শুরু, যা ফ্রেম লুপে করা হয়।

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

ফ্রেম লুপ হল একটি ব্যবহারকারী-এজেন্ট নিয়ন্ত্রিত অসীম লুপ যাতে বিষয়বস্তু বারবার পর্দায় আঁকা হয়। বিষয়বস্তু ফ্রেম নামক পৃথক ব্লকে আঁকা হয়। ফ্রেমের উত্তরাধিকার আন্দোলনের বিভ্রম তৈরি করে। VR অ্যাপ্লিকেশনের জন্য প্রতি সেকেন্ডে ফ্রেম 60 থেকে 144 পর্যন্ত হতে পারে। Android এর জন্য AR প্রতি সেকেন্ডে 30 ফ্রেমে চলে। আপনার কোড কোন নির্দিষ্ট ফ্রেম হার অনুমান করা উচিত নয়.

ফ্রেম লুপের মৌলিক প্রক্রিয়া হল:

XRSession.requestAnimationFrame() কল করুন। জবাবে, ব্যবহারকারী এজেন্ট XRFrameRequestCallback কে আহ্বান করে, যা আপনার দ্বারা সংজ্ঞায়িত করা হয়েছে।
আপনার কলব্যাক ফাংশনের ভিতরে:
1. XRSession.requestAnimationFrame() আবার কল করুন।
2. দর্শকের ভঙ্গি পান।
3. XRWebGLLayer থেকে WebGLRenderingContext এ WebGLFramebuffer পাস ('bind') করুন।
4. প্রতিটি XRView অবজেক্টের উপর পুনরাবৃত্তি করুন, XRWebGLLayer থেকে এর XRViewport পুনরুদ্ধার করুন এবং এটি WebGLRenderingContext এ পাস করুন।
5. ফ্রেমবাফারে কিছু আঁকুন।

এই নিবন্ধের অবশিষ্টাংশ ধাপ 1 এবং ধাপ 2 এর অংশ বর্ণনা করে, XRFrameRequestCallback সেট আপ এবং কল করা। ধাপ 2-এর অবশিষ্ট আইটেমগুলি দ্বিতীয় অংশে কভার করা হয়েছে।

XRFrameRequestCallback

XRFrameRequestCallback আপনার দ্বারা সংজ্ঞায়িত করা হয়েছে। এটি দুটি প্যারামিটার লাগে: একটি DOMHighResTimeStamp এবং একটি XRFrame উদাহরণ৷ XRFrame অবজেক্ট ডিসপ্লেতে একটি একক ফ্রেম রেন্ডার করার জন্য প্রয়োজনীয় তথ্য প্রদান করে। DOMHighResTimeStamp যুক্তিটি ভবিষ্যতে ব্যবহারের জন্য।

অন্য কিছু করার আগে, আমি পরবর্তী অ্যানিমেশন ফ্রেম অনুরোধ করতে যাচ্ছি। পূর্বে বলা হয়েছে, ফ্রেমের সময় অন্তর্নিহিত হার্ডওয়্যারের উপর ভিত্তি করে ব্যবহারকারী এজেন্ট দ্বারা নির্ধারিত হয়। পরবর্তী ফ্রেমের জন্য প্রথমে অনুরোধ করা নিশ্চিত করে যে কলব্যাকের সময় কিছু ভুল হলে ফ্রেম লুপ চলতে থাকবে।

function onXRFrame(hrTime, xrFrame) {
  let xrSession = xrFrame.session;
  xrSession.requestAnimationFrame(onXRFrame);
  // Render a frame.
}

এই মুহুর্তে, এটি দর্শকদের জন্য কিছু আঁকার সময়। যে অংশ II জন্য একটি আলোচনা. সেখানে যাওয়ার আগে, আমাকে দেখান কিভাবে একটি সেশন শেষ করতে হয়।

অধিবেশন শেষ করুন

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

একটি সেশনে প্রবেশ করা থেকে স্মরণ করুন যে সেটআপের সময়, আমি একটি onend ইভেন্ট হ্যান্ডলার যোগ করেছি।

function onSessionStarted(xrSession) {
  xrSession.addEventListener('end', onSessionEnded);
  // More setup…
}

ইভেন্ট হ্যান্ডলারের ভিতরে, ব্যবহারকারী একটি সেশনে প্রবেশ করার আগে অ্যাপটির অবস্থা পুনরুদ্ধার করুন।

function onSessionEnded(event) {
  xrSession = null;
  xrButton.textContent = 'Enter VR';
}

উপসংহার

একটি ওয়েব XR বা AR অ্যাপ্লিকেশন লিখতে আপনার যা প্রয়োজন তা আমি ব্যাখ্যা করিনি। আশা করি, আমি আপনাকে নিজের জন্য কোডটি বোঝার জন্য যথেষ্ট এবং পরীক্ষা শুরু করার জন্য যথেষ্ট দিয়েছি। পরবর্তী প্রবন্ধে, আমি ফ্রেম লুপ ব্যাখ্যা করব, যেখানে বিষয়বস্তু পর্দায় আঁকা হয়।

আনস্প্ল্যাশে JESHOOTS.COM এর ছবি