WebXR ডিভাইস API ব্যবহার করে একটি অগমেন্টেড রিয়েলিটি (AR) অ্যাপ তৈরি করুন

১. শুরু করার আগে

এই কোডল্যাবে একটি এআর ওয়েব অ্যাপ তৈরির উদাহরণ দেখানো হয়েছে। এটি জাভাস্ক্রিপ্ট ব্যবহার করে থ্রিডি মডেল রেন্ডার করে, যা দেখে মনে হয় যেন সেগুলো বাস্তব জগতেই বিদ্যমান।

আপনি WebXR ডিভাইস এপিআই ব্যবহার করেন, যা অগমেন্টেড রিয়েলিটি (AR) এবং ভার্চুয়াল রিয়েলিটি (VR) কার্যকারিতাকে একত্রিত করে। ইন্টারেক্টিভ ওয়েবে চালিত একটি সহজ AR অ্যাপ তৈরি করার জন্য আপনি WebXR ডিভাইস এপিআই-এর AR এক্সটেনশনগুলোর উপর মনোযোগ দেন।

এআর কী?

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

গুগলের ARCore এবং অ্যাপলের ARKit প্রকাশের পর থেকে অ্যাপে AR-এর ব্যবহার ব্যাপকভাবে ছড়িয়ে পড়েছে, তা সেলফি ফিল্টারের জন্যই হোক বা AR-ভিত্তিক গেমের জন্যই হোক।

আপনি যা তৈরি করবেন

এই কোডল্যাবে, আপনি এমন একটি ওয়েব অ্যাপ তৈরি করবেন যা অগমেন্টেড রিয়েলিটি ব্যবহার করে বাস্তব জগতে একটি মডেল স্থাপন করে। আপনার অ্যাপটি যা করবে:

  1. লক্ষ্যবস্তু ডিভাইসটির সেন্সর ব্যবহার করে বিশ্বে এর অবস্থান এবং অভিমুখ নির্ধারণ ও ট্র্যাক করুন।
  2. লাইভ ক্যামেরা ভিউয়ের উপরে কম্পোজিট করা একটি 3D মডেল রেন্ডার করুন।
  3. বাস্তব জগতে আবিষ্কৃত পৃষ্ঠতলগুলোর উপরে বস্তু স্থাপন করতে হিট টেস্ট চালান।

আপনি যা শিখবেন

  • WebXR ডিভাইস এপিআই কীভাবে ব্যবহার করবেন
  • একটি বেসিক AR সিন কীভাবে কনফিগার করবেন
  • এআর হিট টেস্ট ব্যবহার করে কীভাবে একটি পৃষ্ঠতল খুঁজে বের করতে হয়
  • বাস্তব জগতের ক্যামেরা ফিডের সাথে সিঙ্ক্রোনাইজ করে কীভাবে একটি 3D মডেল লোড এবং রেন্ডার করবেন
  • 3D মডেলের উপর ভিত্তি করে কীভাবে ছায়া রেন্ডার করবেন

এই কোডল্যাবটি AR API-এর উপর কেন্দ্র করে তৈরি। অপ্রাসঙ্গিক ধারণা এবং কোড ব্লকগুলি সংক্ষেপে আলোচনা করা হয়েছে এবং সেগুলি আপনার জন্য সংশ্লিষ্ট রিপোজিটরি কোডে সরবরাহ করা হয়েছে।

আপনার যা যা লাগবে

এই কোডল্যাবের প্রথম ধাপটি চেষ্টা করতে আপনার AR ডিভাইসে 'Try it'- এ ক্লিক করুন। যদি আপনি এমন একটি পৃষ্ঠা পান যেখানে "আপনার ব্রাউজারে AR বৈশিষ্ট্য নেই" লেখা আছে, তাহলে আপনার অ্যান্ড্রয়েড ডিভাইসে Google Play Services for AR ইনস্টল করা আছে কিনা তা পরীক্ষা করুন।

২. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন।

কোডটি ডাউনলোড করুন

  1. আপনার ওয়ার্কস্টেশনে এই কোডল্যাবের সমস্ত কোড ডাউনলোড করতে নিচের লিঙ্কে ক্লিক করুন:

  1. ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন। এটি একটি রুট ফোল্ডার ( ar-with-webxr-master ) আনপ্যাক করবে, যার মধ্যে এই কোডল্যাবের বিভিন্ন ধাপের ডিরেক্টরি এবং আপনার প্রয়োজনীয় সমস্ত রিসোর্স রয়েছে।

step-03 এবং step-04 ফোল্ডারগুলোতে এই কোডল্যাবের তৃতীয় ও চতুর্থ ধাপের কাঙ্ক্ষিত শেষ অবস্থা এবং final ফলাফল রয়েছে। এগুলো শুধু রেফারেন্সের জন্য রাখা হয়েছে।

আপনি আপনার সমস্ত কোডিংয়ের কাজ work ডিরেক্টরিতে করেন।

ওয়েব সার্ভার ইনস্টল করুন

  1. আপনি আপনার নিজের ওয়েব সার্ভার ব্যবহার করতে পারেন। যদি আপনার আগে থেকে কোনো সার্ভার সেট আপ করা না থাকে, তবে এই বিভাগে ক্রোমের জন্য ওয়েব সার্ভার কীভাবে সেট আপ করতে হয় তার বিস্তারিত বর্ণনা দেওয়া হয়েছে।
    আপনার ওয়ার্কস্টেশনে যদি অ্যাপটি এখনও ইনস্টল করা না থাকে, তবে আপনি ক্রোম ওয়েব স্টোর থেকে এটি ইনস্টল করতে পারেন।

  1. Web Server for Chrome অ্যাপটি ইনস্টল করার পর, chrome://apps এ যান এবং Web Server আইকনটিতে ক্লিক করুন:

ওয়েব সার্ভার আইকন

এরপরে আপনি এই ডায়ালগটি দেখতে পাবেন, যা আপনাকে আপনার স্থানীয় ওয়েব সার্ভার কনফিগার করার সুযোগ দেয়:

ক্রোম ওয়েব সার্ভার কনফিগার করুন

  1. ‘choose folder’-এ ক্লিক করুন এবং ar-with-webxr-master ফোল্ডারটি নির্বাচন করুন। এর ফলে আপনি ওয়েব-সার্ভার ডায়ালগে ( Web Server URL(s) বিভাগে) হাইলাইট করা URL-এর মাধ্যমে আপনার চলমান কাজটি পরিবেশন করতে পারবেন।
  2. Options (needs restart)- এর অধীনে, Automatically show index.html চেকবক্সটি নির্বাচন করুন।
  3. ওয়েব সার্ভারটি প্রথমে বন্ধ করুন, তারপর আবার চালু করুন । ক্রোম ওয়েব সার্ভার পুনরায় চালু করুন
  4. যাচাই করুন যে অন্তত একটি ওয়েব সার্ভার ইউআরএল দেখা যাচ্ছে: http://127.0.0.1:8887—এটি হলো ডিফল্ট লোকালহোস্ট ইউআরএল।

পোর্ট ফরওয়ার্ডিং সেট আপ করুন

আপনার AR ডিভাইসটি এমনভাবে কনফিগার করুন যাতে আপনি যখন এটিতে localhost:8887 ভিজিট করবেন, তখন এটি আপনার ওয়ার্কস্টেশনের একই পোর্ট অ্যাক্সেস করতে পারে।

  1. আপনার ডেভেলপমেন্ট ওয়ার্কস্টেশনে, chrome://inspect-এ যান এবং Port forwarding...- এ ক্লিক করুন। chrome://inspect
  2. পোর্ট ৮৮৮৭-কে লোকালহোস্ট:৮৮৮৭-এ ফরওয়ার্ড করতে পোর্ট ফরওয়ার্ডিং সেটিংস ডায়ালগটি ব্যবহার করুন।
  3. পোর্ট ফরওয়ার্ডিং সক্ষম করুন চেকবক্সটি নির্বাচন করুন:

পোর্ট ফরওয়ার্ডিং কনফিগার করুন

আপনার সেটআপ যাচাই করুন

আপনার সংযোগ পরীক্ষা করুন:

  1. একটি ইউএসবি ক্যাবলের মাধ্যমে আপনার এআর ডিভাইসটিকে আপনার ওয়ার্কস্টেশনের সাথে সংযুক্ত করুন।
  2. আপনার AR ডিভাইসের Chrome ব্রাউজারের অ্যাড্রেস বারে http://localhost:8887 লিখুন। আপনার AR ডিভাইসটি এই অনুরোধটি আপনার ডেভেলপমেন্ট ওয়ার্কস্টেশনের ওয়েব সার্ভারে পাঠিয়ে দেবে। আপনি ফাইলগুলোর একটি ডিরেক্টরি দেখতে পাবেন।
  3. আপনার AR ডিভাইসে, ব্রাউজারে step-03/index.html ফাইলটি লোড করতে step-03 ক্লিক করুন।

আপনি এমন একটি পৃষ্ঠা দেখতে পাবেন যেখানে একটি 'স্টার্ট অগমেন্টেড রিয়েলিটি' বাটন থাকবে।

তবে, যদি আপনি ' Unsupported browser' ত্রুটির পৃষ্ঠা দেখতে পান, তাহলে সম্ভবত আপনার ডিভাইসটি সামঞ্জস্যপূর্ণ নয়।

ARCore সমর্থিত

ARCore সমর্থিত নয়

আপনার ওয়েব সার্ভারের সংযোগটি এখন আপনার এআর ডিভাইসের সাথে কাজ করা উচিত।

  1. 'স্টার্ট অগমেন্টেড রিয়েলিটি'- তে ক্লিক করুন। আপনাকে ARCore ইনস্টল করার জন্য অনুরোধ করা হতে পারে।

ARCore প্রম্পট ইনস্টল করুন

আপনি প্রথমবার কোনো এআর অ্যাপ চালানোর সময় ক্যামেরার অনুমতির জন্য একটি প্রম্পট দেখতে পাবেন।

ক্রোম ক্যামেরার অনুমতি চাইছে → অনুমতি ডায়ালগ

সবকিছু প্রস্তুত হয়ে গেলে, আপনি ক্যামেরা ফিডের উপরে ঘনক্ষেত্রের একটি দৃশ্য দেখতে পাবেন। ক্যামেরা যত বেশি জগৎকে বিশ্লেষণ করে, দৃশ্য বোঝার ক্ষমতা তত উন্নত হয়, তাই নড়াচড়া করলে পরিস্থিতি স্থিতিশীল হতে পারে।

৩. WebXR কনফিগার করুন

এই ধাপে, আপনি শিখবেন কীভাবে একটি WebXR সেশন এবং একটি বেসিক AR সিন সেট আপ করতে হয়। HTML পেজটিতে বেসিক AR কার্যকারিতা সক্রিয় করার জন্য CSS স্টাইলিং এবং জাভাস্ক্রিপ্ট দেওয়া আছে। এটি সেটআপ প্রক্রিয়াকে দ্রুততর করে, যার ফলে কোডল্যাবটি AR ফিচারগুলোর উপর মনোযোগ দিতে পারে।

এইচটিএমএল পৃষ্ঠা

আপনি প্রচলিত ওয়েব প্রযুক্তি ব্যবহার করে একটি সাধারণ ওয়েবপেজে একটি AR অভিজ্ঞতা তৈরি করেন। এই অভিজ্ঞতায়, আপনি একটি ফুল-স্ক্রিন রেন্ডারিং ক্যানভাস ব্যবহার করেন, তাই HTML ফাইলটি খুব বেশি জটিল হওয়ার প্রয়োজন নেই।

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

আপনার work ডিরেক্টরিতে আগে থেকেই থাকা index.html ফাইলটি দেখতে নিচের মতো হওয়া উচিত। এটি মূল বিষয়বস্তুর একটি অংশ মাত্র; এই কোডটি আপনার ফাইলে কপি করবেন না!

<!-- Don't copy this code into your file! -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js"></script>

    <script src="../shared/utils.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <!-- Information about AR removed for brevity. -->

  <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
  <a onclick="activateXR()" class="mdc-button mdc-button--raised mdc-button--accent">
    Start augmented reality
  </a>

</body>
</html>

মূল জাভাস্ক্রিপ্ট কোডটি খুলুন

আপনার অ্যাপের সূচনা বিন্দু হলো app.js ফাইলটি। এই ফাইলটিতে একটি এআর অভিজ্ঞতা সেট আপ করার জন্য কিছু বয়লারপ্লেট কোড দেওয়া আছে।

আপনার ওয়ার্ক ডিরেক্টরিতে অ্যাপ কোড ( app.js ) ইতিমধ্যেই অন্তর্ভুক্ত আছে।

WebXR এবং AR সমর্থনের জন্য পরীক্ষা করুন

কোনো ব্যবহারকারী AR নিয়ে কাজ করার আগে, navigator.xr এবং প্রয়োজনীয় XR ফিচারগুলোর অস্তিত্ব যাচাই করুন। navigator.xr অবজেক্টটি হলো WebXR ডিভাইস API-এর এন্ট্রি পয়েন্ট, তাই ডিভাইসটি সামঞ্জস্যপূর্ণ হলে এটির অস্তিত্ব থাকা উচিত। এছাড়াও, "immersive-ar" সেশন মোডটি সমর্থিত কিনা তা যাচাই করুন।

সবকিছু ঠিক থাকলে, 'Enter augmented reality' বোতামে ক্লিক করলে একটি XR সেশন তৈরি করার চেষ্টা করা হয়। অন্যথায়, ( shared/utils.js ফাইলে) onNoXRDevice() ফাংশনটি কল করা হয়, যা AR সাপোর্টের অভাব নির্দেশ করে একটি বার্তা প্রদর্শন করে।

এই কোডটি app.js এ আগে থেকেই রয়েছে, তাই কোনো পরিবর্তন করার প্রয়োজন নেই।

(async function() {
  if (navigator.xr && await navigator.xr.isSessionSupported("immersive-ar")) {
    document.getElementById("enter-ar").addEventListener("click", activateXR)
  } else {
    onNoXRDevice();
  }
})();

একটি XRSession জন্য অনুরোধ করুন

আপনি যখন 'Enter augmented Reality'-তে ক্লিক করেন, তখন কোডটি activateXR() কল করে। এর মাধ্যমে AR অভিজ্ঞতাটি শুরু হয়।

  1. app.js ফাইলে activateXR() ফাংশনটি খুঁজুন। কিছু কোড বাদ দেওয়া হয়েছে: 
activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

WebXR-এ প্রবেশের পথ হলো XRSystem.requestSession() । রেন্ডার করা কন্টেন্টকে বাস্তব পরিবেশে দেখার জন্য immersive-ar মোড ব্যবহার করুন।

  1. "immersive-ar" মোড ব্যবহার করে this.xrSession শুরু করুন: 
activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

একটি XRReferenceSpace শুরু করুন

একটি XRReferenceSpace ভার্চুয়াল জগতের বস্তুগুলোর জন্য ব্যবহৃত স্থানাঙ্ক ব্যবস্থা বর্ণনা করে। 'local' মোড একটি AR অভিজ্ঞতার জন্য সবচেয়ে উপযুক্ত, যেখানে রেফারেন্স স্পেসের মূলবিন্দু দর্শকের কাছাকাছি থাকে এবং ট্র্যাকিং স্থিতিশীল হয়।

onSessionStarted() ফাংশনে নিম্নলিখিত কোড ব্যবহার করে this.localReferenceSpace ইনিশিয়ালাইজ করুন:

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

একটি অ্যানিমেশন লুপ সংজ্ঞায়িত করুন

  1. window.requestAnimationFrame এর মতোই, একটি রেন্ডারিং লুপ শুরু করতে XRSession এর requestAnimationFrame ব্যবহার করুন।

প্রতিটি ফ্রেমে, একটি টাইমস্ট্যাম্প এবং একটি XRFrame সহ onXRFrame কল করা হয়।

  1. onXRFrame এর বাস্তবায়ন সম্পূর্ণ করুন। যখন একটি ফ্রেম আঁকা হয়, তখন নিম্নলিখিতটি যোগ করে পরবর্তী অনুরোধটি কিউতে রাখুন: 
// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);
  1. গ্রাফিক্স পরিবেশ সেট আপ করার জন্য কোড যোগ করুন। onXRFrame এর শেষে যোগ করুন: 
// Bind the graphics framebuffer to the baseLayer's framebuffer.
const framebuffer = this.xrSession.renderState.baseLayer.framebuffer;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this.renderer.setFramebuffer(framebuffer);
  1. ভিউয়ারের পোজ নির্ধারণ করতে, XRFrame.getViewerPose() ব্যবহার করুন। এই XRViewerPose মহাকাশে ডিভাইসটির অবস্থান এবং অভিমুখ বর্ণনা করে। এতে XRView এর একটি অ্যারেও থাকে, যা সেই সমস্ত ভিউপয়েন্ট বর্ণনা করে যেখান থেকে দৃশ্যটি বর্তমান ডিভাইসে সঠিকভাবে প্রদর্শনের জন্য রেন্ডার করা উচিত। যদিও স্টিরিওস্কোপিক ভিআর-এ দুটি ভিউ থাকে (প্রতিটি চোখের জন্য একটি), এআর ডিভাইসগুলিতে কেবল একটি ভিউ থাকে।
    pose.views এর তথ্য সাধারণত ভার্চুয়াল ক্যামেরার ভিউ ম্যাট্রিক্স এবং প্রোজেকশন ম্যাট্রিক্স কনফিগার করতে ব্যবহৃত হয়। এটি 3D-তে দৃশ্যটি কীভাবে বিন্যস্ত হবে তা প্রভাবিত করে। ক্যামেরা কনফিগার করা হয়ে গেলে, দৃশ্যটি রেন্ডার করা যায়।
  2. onXRFrame এর নীচে যোগ করুন: 
// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(this.localReferenceSpace);
if (pose) {
  // In mobile AR, we only have one view.
  const view = pose.views[0];

  const viewport = this.xrSession.renderState.baseLayer.getViewport(view);
  this.renderer.setSize(viewport.width, viewport.height);

  // Use the view's transform matrix and projection matrix to configure the THREE.camera.
  this.camera.matrix.fromArray(view.transform.matrix);
  this.camera.projectionMatrix.fromArray(view.projectionMatrix);
  this.camera.updateMatrixWorld(true);

  // Render the scene with THREE.WebGLRenderer.
  this.renderer.render(this.scene, this.camera);
}

এটা পরীক্ষা করুন

অ্যাপটি চালান; আপনার ডেভেলপমেন্ট ডিভাইসে work/index.html এ যান। আপনি আপনার ক্যামেরা ফিড দেখতে পাবেন, যেখানে কিছু ঘনক শূন্যে ভাসছে এবং আপনার ডিভাইসটি নাড়াচাড়া করার সাথে সাথে সেগুলোর দৃষ্টিকোণ পরিবর্তিত হচ্ছে। আপনি যত বেশি নড়াচড়া করবেন, ট্র্যাকিং তত উন্নত হবে, তাই আপনার এবং আপনার ডিভাইসের জন্য কোনটি সবচেয়ে ভালো কাজ করে তা খুঁজে দেখুন।

অ্যাপটি চালাতে সমস্যা হলে, পরিচিতি এবং আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন অংশগুলো দেখুন।

৪. একটি টার্গেটিং রেটিকেল যোগ করুন।

একটি প্রাথমিক AR দৃশ্য সেট আপ করা হয়ে গেলে, এবার হিট টেস্ট ব্যবহার করে বাস্তব জগতের সাথে মিথস্ক্রিয়া শুরু করার পালা। এই অংশে, আপনি একটি হিট টেস্ট প্রোগ্রাম করবেন এবং বাস্তব জগতে একটি পৃষ্ঠতল খুঁজে বের করতে এটি ব্যবহার করবেন।

হিট টেস্ট বুঝুন

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

WebXR ডিভাইস এপিআই আপনাকে জানিয়ে দেয় যে এই রশ্মিটি বাস্তব জগতের কোনো বস্তুকে ছেদ করেছে কি না, যা এর অন্তর্নিহিত এআর সক্ষমতা এবং জগৎ সম্পর্কে উপলব্ধির দ্বারা নির্ধারিত হয়।

হিট টেস্ট ব্যাখ্যাকারী

অতিরিক্ত বৈশিষ্ট্য সহ একটি XRSession জন্য অনুরোধ করুন

হিট টেস্ট পরিচালনা করার জন্য, XRSession অনুরোধ করার সময় অতিরিক্ত বৈশিষ্ট্যের প্রয়োজন হয়।

  1. app.js ফাইলে navigator.xr.requestSession খুঁজে বের করুন।
  2. নিম্নলিখিতভাবে "hit-test" এবং "dom-overlay" ফিচার দুটিকে requiredFeature হিসেবে যোগ করুন: 
this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});
  1. DOM ওভারলে কনফিগার করুন। AR ক্যামেরা ভিউয়ের উপর document.body এলিমেন্টটিকে এইভাবে লেয়ার করুন: 
this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

একটি মোশন প্রম্পট যোগ করুন

পরিবেশ সম্পর্কে পর্যাপ্ত ধারণা তৈরি হলে ARCore সবচেয়ে ভালোভাবে কাজ করে। এটি সাইমালটেনিয়াস লোকলাইজেশন অ্যান্ড ম্যাপিং (SLAM) নামক একটি প্রক্রিয়ার মাধ্যমে অর্জন করা হয়, যেখানে দৃশ্যত স্বতন্ত্র ফিচার পয়েন্ট ব্যবহার করে অবস্থানের পরিবর্তন এবং পরিবেশগত বৈশিষ্ট্য গণনা করা হয়।

ক্যামেরা স্ট্রিমের উপরে একটি মোশন প্রম্পট প্রদর্শন করতে পূর্ববর্তী ধাপের "dom-overlay" ব্যবহার করুন।

index.html এ stabilization আইডি সহ একটি <div> যোগ করুন। এই <div> ব্যবহারকারীদের কাছে স্থিতিশীলতার অবস্থা তুলে ধরে একটি অ্যানিমেশন প্রদর্শন করে এবং SLAM প্রক্রিয়াকে উন্নত করার জন্য তাদের ডিভাইসটি নিয়ে নড়াচড়া করতে উৎসাহিত করে। ব্যবহারকারী AR-এ প্রবেশ করলে এটি প্রদর্শিত হয় এবং রেটিকেল কোনো পৃষ্ঠ খুঁজে পেলে এটি অদৃশ্য হয়ে যায়, যা <body> ক্লাস দ্বারা নিয়ন্ত্রিত হয়। 

  <div id="stabilization"></div>

</body>
</html>

একটি রেটিকেল যোগ করুন

ডিভাইসটির দৃষ্টি যেদিকে নির্দেশ করছে, তা বোঝাতে রেটিকেল ব্যবহার করুন।

  1. app.js ফাইলে, setupThreeJs() ফাংশনের মধ্যে থাকা DemoUtils.createCubeScene() কলটিকে একটি খালি Three.Scene() দিয়ে প্রতিস্থাপন করুন। 
setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}
  1. নতুন দৃশ্যটিতে সংঘর্ষের বিন্দুকে প্রতিনিধিত্বকারী একটি অবজেক্ট যুক্ত করুন। প্রদত্ত Reticle ক্লাসটি shared/utils.js ফাইলে রেটিকল মডেল লোড করার কাজটি করে।
  2. setupThreeJs() ফাংশনে দৃশ্যে Reticle যোগ করুন: 
setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
  this.reticle = new Reticle();
  this.scene.add(this.reticle);
}

হিট টেস্ট করার জন্য, একটি নতুন XRReferenceSpace ব্যবহার করতে হয়। এই রেফারেন্স স্পেসটি দর্শকের দৃষ্টিকোণ থেকে একটি নতুন স্থানাঙ্ক ব্যবস্থা নির্দেশ করে, যা দেখার দিকের সাথে সারিবদ্ধ একটি রশ্মি তৈরি করে। এই স্থানাঙ্ক ব্যবস্থাটি XRSession.requestHitTestSource() -এ ব্যবহৃত হয়, যা হিট টেস্ট গণনা করতে পারে।

  1. app.js এর onSessionStarted() ফাংশনে নিম্নলিখিতটি যোগ করুন: 
async onSessionStarted() {
  // ...

  // Setup an XRReferenceSpace using the "local" coordinate system.
  this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

  // Add these lines:
  // Create another XRReferenceSpace that has the viewer as the origin.
  this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");
  // Perform hit testing using the viewer as origin.
  this.hitTestSource = await this.xrSession.requestHitTestSource({ space: this.viewerSpace });

  // ...
}
  1. এই hitTestSource ব্যবহার করে প্রতি ফ্রেমে একটি হিট টেস্ট করুন:
    • যদি হিট টেস্টের কোনো ফলাফল না আসে, তাহলে ARCore পরিবেশ সম্পর্কে ধারণা তৈরি করার জন্য যথেষ্ট সময় পায়নি। এই ক্ষেত্রে, স্টেবিলাইজেশন <div> ব্যবহার করে ডিভাইসটি সরানোর জন্য ব্যবহারকারীকে অনুরোধ করুন।
    • যদি ফলাফল পাওয়া যায়, তাহলে রেটিকেলটি সেই অবস্থানে নিয়ে যান।
  2. রেটিকেল সরাতে onXRFrame পরিবর্তন করুন: 
onXRFrame = (time, frame) => {
  // ... some code omitted ...
  this.camera.updateMatrixWorld(true);

  // Add the following:
  const hitTestResults = frame.getHitTestResults(this.hitTestSource);

  if (!this.stabilized && hitTestResults.length > 0) {
    this.stabilized = true;
    document.body.classList.add("stabilized");
  }
  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(this.localReferenceSpace);

    // update the reticle position
    this.reticle.visible = true;
    this.reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
    this.reticle.updateMatrixWorld(true);
  }
  // More code omitted.
}

স্ক্রিনে ট্যাপ করলে আচরণ যোগ করুন

একটি XRSession ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে select ইভেন্টের মাধ্যমে ইভেন্ট নির্গত করতে পারে, যা প্রাথমিক ক্রিয়াকে নির্দেশ করে। মোবাইল ডিভাইসে WebXR-এ, প্রাথমিক ক্রিয়াটি হলো স্ক্রিন ট্যাপ।

  1. onSessionStarted এর একেবারে নিচে একটি select ইভেন্ট লিসেনার যোগ করুন: 
this.xrSession.addEventListener("select", this.onSelect);

এই উদাহরণে, স্ক্রিনে ট্যাপ করলে রেটিকলে একটি সূর্যমুখী ফুল স্থাপিত হয়।

  1. App ক্লাসে onSelect জন্য একটি ইমপ্লিমেন্টেশন তৈরি করুন: 
onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

অ্যাপটি পরীক্ষা করুন

আপনি একটি রেটিকেল তৈরি করেছেন যা দিয়ে হিট টেস্টের মাধ্যমে আপনার ডিভাইসে নিশানা করা যায়। স্ক্রিনে ট্যাপ করলে, রেটিকেল দ্বারা নির্দেশিত স্থানে আপনি একটি সূর্যমুখী ফুল স্থাপন করতে পারবেন।

  1. আপনার অ্যাপটি চালানোর সময়, মেঝের পৃষ্ঠ বরাবর একটি রেটিকেল দেখতে পাওয়ার কথা। যদি তা না হয়, তবে আপনার ফোন দিয়ে ধীরে ধীরে চারপাশটা দেখার চেষ্টা করুন।
  2. রেটিকেলটি দেখতে পেলে, সেটিতে ট্যাপ করুন। এর উপরে একটি সূর্যমুখী ফুল স্থাপন করা হবে। আপনাকে কিছুটা নড়াচড়া করতে হতে পারে, যাতে অন্তর্নিহিত এআর প্ল্যাটফর্মটি বাস্তব জগতের পৃষ্ঠতলগুলো আরও ভালোভাবে শনাক্ত করতে পারে। কম আলো এবং বৈশিষ্ট্যহীন পৃষ্ঠতল দৃশ্য বোঝার ক্ষমতা কমিয়ে দেয় এবং কোনো হিট না পাওয়ার সম্ভাবনা বাড়িয়ে দেয়। যদি আপনি কোনো সমস্যার সম্মুখীন হন, তবে এই ধাপটির একটি কার্যকর উদাহরণ দেখতে step-04/app.js কোডটি দেখুন।

৫. ছায়া যোগ করুন

একটি বাস্তবসম্মত দৃশ্য তৈরি করতে ডিজিটাল বস্তুর উপর সঠিক আলো ও ছায়ার মতো উপাদান জড়িত থাকে, যা দৃশ্যে বাস্তবতা ও নিমগ্নতা যোগ করে।

আলো এবং ছায়ার কাজটি three.js দ্বারা নিয়ন্ত্রিত হয়। আপনি নির্দিষ্ট করে দিতে পারেন কোন লাইটগুলো ছায়া ফেলবে, কোন ম্যাটেরিয়ালগুলো সেই ছায়া গ্রহণ ও রেন্ডার করবে এবং কোন মেশগুলো ছায়া ফেলতে পারবে। এই অ্যাপটির সিনে একটি লাইট রয়েছে যা ছায়া ফেলে এবং শুধুমাত্র ছায়া রেন্ডার করার জন্য একটি সমতল পৃষ্ঠ রয়েছে।

  1. three.js WebGLRenderer এ শ্যাডো সক্রিয় করুন। রেন্ডারারটি তৈরি করার পর, এর shadowMap এ নিম্নলিখিত মানগুলি সেট করুন: 
setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

DemoUtils.createLitScene() এ তৈরি করা উদাহরণ দৃশ্যে shadowMesh নামের একটি অবজেক্ট রয়েছে, যা একটি সমতল, অনুভূমিক পৃষ্ঠ এবং শুধুমাত্র ছায়া রেন্ডার করে। এই পৃষ্ঠটির প্রাথমিক Y অবস্থান ১০,০০০ ইউনিট। একটি সূর্যমুখী ফুল স্থাপন করার পর, shadowMesh টিকে বাস্তব-জগতের পৃষ্ঠের সমান উচ্চতায় সরান, যাতে ফুলটির ছায়া বাস্তব-জগতের মাটির উপরে রেন্ডার হয়।

  1. onSelect এর মধ্যে, সিন-এ clone যোগ করার পর, শ্যাডো প্লেনটির অবস্থান পরিবর্তন করার জন্য কোড যোগ করুন: 
onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);

    const shadowMesh = this.scene.children.find(c => c.name === "shadowMesh");
    shadowMesh.position.y = clone.position.y;
  }
}

এটা পরীক্ষা করুন

একটি সূর্যমুখী ফুল স্থাপন করার সময়, আপনি এর একটি ছায়া দেখতে পাবেন। যদি কোনো সমস্যা হয়, তবে এই ধাপটির একটি কার্যকর উদাহরণ দেখতে final/app.js কোডটি দেখুন।

৬. অতিরিক্ত সম্পদ

অভিনন্দন! আপনি WebXR ব্যবহার করে AR বিষয়ক এই কোডল্যাবটির শেষ প্রান্তে পৌঁছেছেন।

আরও জানুন