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

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

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

এই কোডল্যাবটি একটি AR ওয়েব অ্যাপ তৈরির উদাহরণের মধ্য দিয়ে যায়। এটি জাভাস্ক্রিপ্ট ব্যবহার করে 3D মডেল রেন্ডার করে যা বাস্তব জগতে বিদ্যমান বলে মনে হয়।

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

এআর কী?

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

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

তুমি কী তৈরি করবে

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

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

তুমি কি শিখবে

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

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

তোমার যা লাগবে

স্ট্যাটিক ওয়েব কন্টেন্ট কোডিং এবং হোস্ট করার জন্য একটি ওয়ার্কস্টেশন
ARCore-সক্ষম অ্যান্ড্রয়েড ডিভাইস যা অ্যান্ড্রয়েড 8.0 ওরিও চালিত
গুগল ক্রোম
গুগল প্লে সার্ভিসেস ফর এআর ইনস্টল করা হয়েছে (ক্রোম স্বয়ংক্রিয়ভাবে আপনাকে সামঞ্জস্যপূর্ণ ডিভাইসে এটি ইনস্টল করার জন্য অনুরোধ করবে)
আপনার পছন্দের একটি ওয়েব সার্ভার
আপনার AR ডিভাইসটিকে আপনার ওয়ার্কস্টেশনের সাথে সংযুক্ত করার জন্য USB কেবল
নমুনা কোড
একটি টেক্সট এডিটর
HTML, CSS, JavaScript এবং Google Chrome ডেভেলপার টুলের প্রাথমিক জ্ঞান।

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

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

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

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

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

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

তুমি তোমার সমস্ত কোডিং কাজ work ডিরেক্টরিতে করো।

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

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

Chrome অ্যাপের জন্য ওয়েব সার্ভার ইনস্টল করার পরে, chrome://apps এ যান এবং ওয়েব সার্ভার আইকনে ক্লিক করুন:

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

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

"ফোল্ডার নির্বাচন করুন" এ ক্লিক করুন এবং ar-with-webxr-master ফোল্ডারটি নির্বাচন করুন। এটি আপনাকে ওয়েব-সার্ভার ডায়ালগে ( ওয়েব সার্ভার URL(গুলি) বিভাগে) হাইলাইট করা URL এর মাধ্যমে আপনার চলমান কাজটি পরিবেশন করতে দেয়।
Options (needs restart) এর অধীনে, Automatically show index.html চেকবক্সটি নির্বাচন করুন।
ওয়েব সার্ভারকে Stop এ টগল করুন, তারপর Started এ ফিরে যান।
কমপক্ষে একটি ওয়েব সার্ভার URL(গুলি) উপস্থিত আছে কিনা তা যাচাই করুন: http://127.0.0.1:8887—ডিফল্ট লোকালহোস্ট URL।

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

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

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

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

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

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

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

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

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

Start augmented reality এ ক্লিক করুন। আপনাকে ARCore ইনস্টল করার জন্য অনুরোধ করা হতে পারে।

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

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

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

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

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

এই ধাপে, আপনি শিখবেন কিভাবে একটি WebXR সেশন এবং একটি মৌলিক AR দৃশ্য সেট আপ করতে হয়। HTML পৃষ্ঠায় CSS স্টাইলিং এবং জাভাস্ক্রিপ্ট রয়েছে যা মৌলিক AR কার্যকারিতা সক্ষম করে। এটি সেটআপ প্রক্রিয়াটিকে দ্রুততর করে, কোডল্যাবকে AR বৈশিষ্ট্যগুলিতে ফোকাস করার অনুমতি দেয়।

HTML পৃষ্ঠা

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

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

আপনার 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 এই ফাইলটি একটি AR অভিজ্ঞতা সেট আপ করার জন্য কিছু বয়লারপ্লেট প্রদান করে।

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

WebXR এবং AR সাপোর্টের জন্য চেক করুন

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

যদি সবকিছু ঠিকঠাক থাকে, তাহলে Enter augmented reality বোতামে ক্লিক করলে একটি XR সেশন তৈরি করার চেষ্টা করা হয়। অন্যথায়, onNoXRDevice() কে ( shared/utils.js এ) কল করা হয় যা 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 অভিজ্ঞতা শুরু করে।

app.js এ activateXR() ফাংশনটি খুঁজুন। কিছু কোড বাদ পড়ে গেছে:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

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

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

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

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

XRSession এর requestAnimationFrame আপনাকে নেটিভ XR ডিভাইসের রিফ্রেশ রেটে সংযুক্ত করার সুযোগ দেয়। স্ট্যান্ডার্ড ওয়েব পৃষ্ঠাগুলির রেন্ডার লুপগুলি 60 FPS এর জন্য ডিজাইন করা হয়েছে, যেখানে বহিরাগত VR ডিসপ্লেগুলি 120 FPS এ রেন্ডার করতে পারে। নন-এক্সক্লুসিভ AR সেশনগুলি এখনও কেবল 60 FPS এ চলতে পারে, তবে ডিভাইসের ভঙ্গি এবং ভিউ তথ্য কেবল একটি সেশনের requestAnimationFrame এর মধ্যেই অ্যাক্সেসযোগ্য।

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

onXRFrame এর বাস্তবায়ন সম্পূর্ণ করুন। যখন একটি ফ্রেম আঁকা হয়, তখন নিম্নলিখিতটি যোগ করে পরবর্তী অনুরোধটি সারিবদ্ধ করুন:

// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);

গ্রাফিক্স পরিবেশ সেট আপ করার জন্য কোড যোগ করুন। 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);

দর্শকের ভঙ্গি নির্ধারণ করতে, XRFrame.getViewerPose() ব্যবহার করুন। এই XRViewerPose ডিভাইসের অবস্থান এবং স্থান নির্ধারণ করে। এতে XRView এর একটি অ্যারেও রয়েছে, যা বর্তমান ডিভাইসে সঠিকভাবে প্রদর্শনের জন্য দৃশ্যটি যে দৃষ্টিকোণ থেকে রেন্ডার করা উচিত তার প্রতিটি দৃষ্টিকোণ বর্ণনা করে। যদিও স্টেরিওস্কোপিক VR-এর দুটি ভিউ রয়েছে (প্রতিটি চোখের জন্য একটি), AR ডিভাইসগুলিতে কেবল একটি ভিউ রয়েছে।
pose.views এর তথ্য সাধারণত ভার্চুয়াল ক্যামেরার ভিউ ম্যাট্রিক্স এবং প্রজেকশন ম্যাট্রিক্স কনফিগার করার জন্য ব্যবহৃত হয়। এটি দৃশ্যটি 3D তে কীভাবে সাজানো হয়েছে তা প্রভাবিত করে। ক্যামেরাটি কনফিগার করা হলে, দৃশ্যটি রেন্ডার করা যেতে পারে।
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 ভিজিট করুন। আপনি আপনার ক্যামেরার ফিডে মহাকাশে ভাসমান কিউব দেখতে পাবেন যার দৃষ্টিকোণ আপনার ডিভাইসটি সরানোর সাথে সাথে পরিবর্তিত হয়। আপনি যত বেশি ঘোরাফেরা করবেন ট্র্যাকিং তত উন্নত হবে, তাই আপনার এবং আপনার ডিভাইসের জন্য কী কাজ করে তা অন্বেষণ করুন।

If have issues running the app, check the Introduction and Set up your development environment sections.

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

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

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

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

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

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

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

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

app.js এ, navigator.xr.requestSession খুঁজুন।
requiredFeature অনুসারে "hit-test" এবং "dom-overlay" বৈশিষ্ট্যগুলি যোগ করুন। নিম্নরূপ বৈশিষ্ট্যগুলি যোগ করুন:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});

DOM ওভারলে কনফিগার করুন। document.body এলিমেন্টটি AR ক্যামেরা ভিউয়ের উপর এভাবে লেয়ার করুন:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

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

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

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

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

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

</body>
</html>

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

ডিভাইসের ভিউ যে অবস্থানের দিকে নির্দেশ করছে তা নির্দেশ করতে একটি রেটিকেল ব্যবহার করুন।

app.js এ, setupThreeJs() এ DemoUtils.createCubeScene() কলটি একটি খালি Three.Scene() দিয়ে প্রতিস্থাপন করুন।

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}

নতুন দৃশ্যে সংঘর্ষের বিন্দুকে প্রতিনিধিত্ব করে এমন একটি বস্তু দিয়ে পূর্ণ করুন। প্রদত্ত Reticle ক্লাসটি shared/utils.js এ reticle মডেল লোড করার কাজ পরিচালনা করে।
setupThreeJs() এর দৃশ্যে Reticle যোগ করুন:

setupThreeJs() {
  // ...

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

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

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

  // ...
}

এই hitTestSource ব্যবহার করে, প্রতিটি ফ্রেমে একটি হিট পরীক্ষা করুন:
- যদি হিট টেস্টের কোন ফলাফল না আসে, তাহলে ARCore পরিবেশ সম্পর্কে ধারণা তৈরি করার জন্য পর্যাপ্ত সময় পায়নি। এই ক্ষেত্রে, ব্যবহারকারীকে <div> স্ট্যাবিলাইজেশন ব্যবহার করে ডিভাইসটি সরাতে বলুন।
- যদি ফলাফল পাওয়া যায়, তাহলে রেটিকেলটিকে সেই স্থানে সরান।
রেটিকেল সরাতে 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-এ, প্রাথমিক ক্রিয়া হল একটি স্ক্রিন ট্যাপ।

onSessionStarted এর নীচে একটি select ইভেন্ট শ্রোতা যোগ করুন:

this.xrSession.addEventListener("select", this.onSelect);

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

App ক্লাসে onSelect জন্য একটি বাস্তবায়ন তৈরি করুন:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

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

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

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

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

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

Lighting and shadows are handled by three.js . You can specify which lights should cast shadows, which materials should receive and render these shadows, and which meshes can cast shadows. This app's scene contains a light that casts a shadow and a flat surface for rendering only shadows.

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 অবস্থান 10,000 ইউনিট। একবার একটি সূর্যমুখী স্থাপন করা হলে, shadowMesh কে বাস্তব-জগতের পৃষ্ঠের সমান উচ্চতায় সরান, যাতে ফুলের ছায়া বাস্তব-জগতের মাটির উপরে তৈরি হয়।

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-তে এই কোডল্যাবের শেষে পৌঁছেছেন।

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

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

এআর কী?

তুমি কী তৈরি করবে

তুমি কি শিখবে

তোমার যা লাগবে

2. আপনার উন্নয়ন পরিবেশ সেট আপ করুন

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

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

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

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

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

HTML পৃষ্ঠা

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

WebXR এবং AR সাপোর্টের জন্য চেক করুন

একটি XRSession অনুরোধ করুন

একটি XRReferenceSpace আরম্ভ করুন

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

পরীক্ষা করো।

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

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

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

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

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

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

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

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

পরীক্ষা করো।

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

আরও জানুন

একটি `XRSession` অনুরোধ করুন

একটি `XRReferenceSpace` আরম্ভ করুন

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