নিমজ্জিত ওয়েবে স্বাগতম

ইমারসিভ ওয়েব মানে ব্রাউজারের মাধ্যমে হোস্ট করা ভার্চুয়াল বিশ্বের অভিজ্ঞতা। এই সম্পূর্ণ ভার্চুয়াল বাস্তবতার অভিজ্ঞতা ব্রাউজারে বা ভিআর সক্ষম হেডসেটে প্রকাশ পেয়েছে।

Joe Medley

ইমারসিভ ওয়েব মানে ব্রাউজারের মাধ্যমে হোস্ট করা ভার্চুয়াল বিশ্বের অভিজ্ঞতা। এটি ব্রাউজারে বা Google-এর Daydream, Oculus Rift, Samsung Gear VR, HTC Vive, এবং Windows মিক্সড রিয়েলিটি হেডসেটের মতো VR সক্ষম হেডসেটগুলিতে প্রদর্শিত সম্পূর্ণ ভার্চুয়াল রিয়েলিটি (VR) অভিজ্ঞতার পাশাপাশি AR-সক্ষম মোবাইলের জন্য তৈরি অগমেন্টেড রিয়েলিটি অভিজ্ঞতাগুলিকে কভার করে৷ ডিভাইস

যদিও আমরা নিমগ্ন অভিজ্ঞতা বর্ণনা করার জন্য দুটি শব্দ ব্যবহার করি, তবে সেগুলিকে সম্পূর্ণ বাস্তবতা থেকে সম্পূর্ণ নিমজ্জিত VR পরিবেশে একটি বর্ণালী হিসাবে বিবেচনা করা উচিত, এর মধ্যে বিভিন্ন স্তরের AR রয়েছে৷

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

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

আমি সেখানে কিভাবে পেতে পারি?

নিমজ্জিত ওয়েব প্রায় এক বছর ধরে ভ্রূণ আকারে পাওয়া যাচ্ছে। এটি WebVR 1.1 API এর মাধ্যমে করা হয়েছিল, যা Chrome 62 সাল থেকে একটি অরিজিন ট্রায়ালে উপলব্ধ। সেই APIটি Firefox এবং Edge এবং Safari-এর জন্য একটি পলিফিল দ্বারাও সমর্থিত।

কিন্তু এটা এগিয়ে যাওয়ার সময়.

অরিজিন ট্রায়াল 24 জুলাই, 2018-এ শেষ হয়েছে এবং স্পেকটি WebXR ডিভাইস API এবং একটি নতুন অরিজিন ট্রায়াল দ্বারা বাতিল করা হয়েছে।

WebVR 1.1 এর কি হয়েছে?

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

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

WebXR ডিভাইস API ডিজাইন করা হয়েছে এবং এই বর্ধিত ব্যবহারের কেসগুলিকে মাথায় রেখে নামকরণ করা হয়েছে এবং এটি এগিয়ে যাওয়ার আরও ভাল পথ সরবরাহ করে। WebVR এর বাস্তবায়নকারীরা WebXR ডিভাইস API এ স্থানান্তরিত করার জন্য প্রতিশ্রুতিবদ্ধ।

WebXR ডিভাইস API কি?

এর আগে WebVR স্পেকের মতো, WebXR ডিভাইস API হল Immersive Web Community Group এর একটি পণ্য যার Google, Microsoft, Mozilla এবং অন্যান্যদের থেকে অবদানকারী রয়েছে। XR-এর মধ্যে 'X' হল এক ধরণের বীজগণিতীয় পরিবর্তনশীল যা নিমজ্জিত অভিজ্ঞতার বর্ণালীতে যেকোনো কিছুর জন্য দাঁড় করানো হয়। এটি পূর্বে উল্লিখিত অরিজিন ট্রায়ালের পাশাপাশি একটি পলিফিলের মাধ্যমে উপলব্ধ।

যখন এই নিবন্ধটি মূলত Chrome 67 বিটা সময়ের মধ্যে প্রকাশিত হয়েছিল, তখন শুধুমাত্র VR ক্ষমতাগুলি সক্ষম করা হয়েছিল৷ ক্রোম 69-এ অগমেন্টেড রিয়েলিটি এসেছে। ওয়েবের জন্য অগমেন্টেড রিয়েলিটিতে এটি সম্পর্কে পড়ুন।

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

এই নিবন্ধটির জন্য, আমি একটি XR সেশন শুরু করা, বন্ধ করা এবং চালানোর পাশাপাশি ইনপুট প্রক্রিয়াকরণ সম্পর্কে কয়েকটি মৌলিক বিষয় নিয়ে আলোচনা করতে যাচ্ছি।

আমি যা কভার করতে যাচ্ছি না তা হল কিভাবে পর্দায় AR/VR সামগ্রী আঁকতে হয়। WebXR ডিভাইস API ইমেজ রেন্ডারিং বৈশিষ্ট্য প্রদান করে না। সেটা আপনার ব্যাপার। WebGL API ব্যবহার করে অঙ্কন করা হয়। আপনি যদি সত্যিই উচ্চাকাঙ্ক্ষী হন তবে আপনি এটি করতে পারেন। যদিও, আমরা একটি ফ্রেমওয়ার্ক ব্যবহার করার পরামর্শ দিই। নিমজ্জিত ওয়েব নমুনাগুলি কটনটেল নামক ডেমোগুলির জন্য তৈরি একটি ব্যবহার করে। Three.js মে মাস থেকে WebXR সমর্থন করেছে। আমি A-Frame সম্পর্কে কিছুই শুনিনি।

একটি অ্যাপ শুরু এবং চালানো হচ্ছে

মৌলিক প্রক্রিয়া এই:

1. একটি XR ডিভাইসের জন্য অনুরোধ করুন।
2. এটি উপলব্ধ থাকলে, একটি XR সেশনের অনুরোধ করুন৷ আপনি যদি চান যে ব্যবহারকারী তাদের ফোন একটি হেডসেটে রাখুক, এটিকে একটি নিমজ্জিত সেশন বলা হয় এবং প্রবেশ করার জন্য একটি ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন৷
3. একটি রেন্ডার লুপ চালানোর জন্য সেশন ব্যবহার করুন যা প্রতি সেকেন্ডে 60টি ইমেজ ফ্রেম প্রদান করে। প্রতিটি ফ্রেমে পর্দায় উপযুক্ত বিষয়বস্তু আঁকুন।
4. ব্যবহারকারী প্রস্থান করার সিদ্ধান্ত না নেওয়া পর্যন্ত রেন্ডার লুপটি চালান।
5. এক্সআর সেশন শেষ করুন।

আসুন একটু বিস্তারিতভাবে এটি দেখুন এবং কিছু কোড অন্তর্ভুক্ত করুন। আমি আপনাকে যা দেখাতে যাচ্ছি তা থেকে আপনি একটি অ্যাপ চালাতে পারবেন না৷ কিন্তু আবার, এই শুধু এটা একটি ধারনা দিতে.

একটি XR ডিভাইসের জন্য অনুরোধ করুন

এখানে, আপনি স্ট্যান্ডার্ড বৈশিষ্ট্য সনাক্তকরণ কোড চিনতে পারবেন। আপনি checkForXR() মতো কিছু নামক একটি ফাংশনে এটি মোড়ানো করতে পারেন।

আপনি যদি একটি নিমজ্জিত সেশন ব্যবহার না করেন তবে আপনি কার্যকারিতা বিজ্ঞাপন এড়িয়ে যেতে পারেন এবং একটি ব্যবহারকারীর অঙ্গভঙ্গি পেতে পারেন এবং সরাসরি একটি সেশনের অনুরোধে যেতে পারেন৷ একটি নিমজ্জিত অধিবেশন একটি হেডসেট প্রয়োজন হয়. একটি অ-ইমারসিভ সেশন কেবল ডিভাইসের স্ক্রিনে সামগ্রী দেখায়। আপনি যখন ভার্চুয়াল রিয়েলিটি বা অগমেন্টেড রিয়েলিটি উল্লেখ করেন তখন বেশিরভাগ লোকেরা যা ভাবেন সেটিই আগেরটি। পরেরটিকে কখনও কখনও 'ম্যাজিক উইন্ডো' বলা হয়।

if (navigator.xr) {
    navigator.xr.requestDevice()
    .then(xrDevice => {
    // Advertise the AR/VR functionality to get a user gesture.
    })
    .catch(err => {
    if (err.name === 'NotFoundError') {
        // No XRDevices available.
        console.error('No XR devices available:', err);
    } else {
        // An error occurred while requesting an XRDevice.
        console.error('Requesting XR device failed:', err);
    }
    })
} else{
    console.log("This browser does not support the WebXR API.");
}

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

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

xrPresentationContext = htmlCanvasElement.getContext('xrpresent');
let sessionOptions = {
    // The immersive option is optional for non-immersive sessions; the value
    //   defaults to false.
    immersive: false,
    outputContext: xrPresentationContext
}
xrDevice.requestSession(sessionOptions)
.then(xrSession => {
    // Use a WebGL context as a base layer.
    xrSession.baseLayer = new XRWebGLLayer(session, gl);
    // Start the render loop
})

রেন্ডার লুপ চালান

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

একটি রেন্ডার লুপের জন্য মৌলিক প্রক্রিয়া হল:

1. একটি অ্যানিমেশন ফ্রেম অনুরোধ করুন.
2. ডিভাইসের অবস্থানের জন্য ক্যোয়ারী।
3. এটির অবস্থানের উপর ভিত্তি করে ডিভাইসের অবস্থানে বিষয়বস্তু আঁকুন।
4. ইনপুট ডিভাইসের জন্য প্রয়োজনীয় কাজ করুন।
5. ব্যবহারকারী প্রস্থান করার সিদ্ধান্ত না নেওয়া পর্যন্ত সেকেন্ডে 60 বার পুনরাবৃত্তি করুন।

একটি উপস্থাপনা ফ্রেম অনুরোধ করুন

ওয়েব XR প্রসঙ্গে 'ফ্রেম' শব্দের বিভিন্ন অর্থ রয়েছে। প্রথমটি হল রেফারেন্সের ফ্রেম যা সংজ্ঞায়িত করে কোঅর্ডিনেট সিস্টেমের উৎপত্তি কোথা থেকে গণনা করা হয় এবং ডিভাইসটি সরে গেলে সেই উৎপত্তির কী ঘটে। (ব্যবহারকারী যখন সরে যায় তখন কি ভিউ একই থাকে বা বাস্তব জীবনে যেমন পরিবর্তন হয়?)

দ্বিতীয় ধরনের ফ্রেম হল প্রেজেন্টেশন ফ্রেম , যা একটি XRFrame অবজেক্ট দ্বারা উপস্থাপিত হয়। এই অবজেক্টে ডিভাইসে একটি AR/VR দৃশ্যের একটি একক ফ্রেম রেন্ডার করার জন্য প্রয়োজনীয় তথ্য রয়েছে। এটি কিছুটা বিভ্রান্তিকর কারণ requestAnimationFrame() কল করে একটি উপস্থাপনা ফ্রেম পুনরুদ্ধার করা হয়েছে। এটি window.requestAnimationFrame() এর সাথে সামঞ্জস্যপূর্ণ করে তোলে।

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

xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
    xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
    // The time argument is for future use and not implemented at this time.
    // Process the frame.
    xrFrame.session.requestAnimationFrame(onFrame);
    }
});

ভঙ্গি

স্ক্রিনে কিছু আঁকার আগে, আপনাকে ডিসপ্লে ডিভাইসটি কোথায় নির্দেশ করছে তা জানতে হবে এবং আপনার পর্দায় অ্যাক্সেস প্রয়োজন। সাধারণভাবে, এআর/ভিআর-এ একটি জিনিসের অবস্থান এবং অভিযোজনকে ভঙ্গি বলা হয়। দর্শক এবং ইনপুট ডিভাইস উভয়েরই একটি ভঙ্গি আছে। (আমি পরে ইনপুট ডিভাইসগুলি কভার করি।) উভয় ভিউয়ার এবং ইনপুট ডিভাইস ভঙ্গি একটি 4 বাই 4 ম্যাট্রিক্স হিসাবে সংজ্ঞায়িত করা হয় কলাম প্রধান ক্রমে একটি Float32Array এ সংরক্ষিত। আপনি বর্তমান অ্যানিমেশন ফ্রেম অবজেক্টে XRFrame.getDevicePose() কল করে দর্শকের ভঙ্গি পাবেন। আপনি একটি পোজ ফিরে পেয়েছেন কিনা তা দেখতে সর্বদা পরীক্ষা করুন। কিছু ভুল হলে আপনি পর্দায় আঁকতে চান না।

let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
    // Draw something to the screen.
}

ভিউ

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

for (let view of xrFrame.views) {
    // Draw something to the screen.
}

এটি WebXR এবং অন্যান্য নিমজ্জিত সিস্টেমের মধ্যে একটি গুরুত্বপূর্ণ পার্থক্য। যদিও এটি একটি দৃশ্যের মাধ্যমে পুনরাবৃত্তি করা অর্থহীন বলে মনে হতে পারে, এটি করার ফলে আপনি বিভিন্ন ডিভাইসের জন্য একটি একক রেন্ডারিং পাথ পেতে পারেন।

পুরো লুপ রেন্ডার

আমি এই সব একসাথে রাখলে, আমি নীচের কোডটি পাই। আমি ইনপুট ডিভাইসগুলির জন্য একটি স্থানধারক রেখেছি, যা আমি পরবর্তী বিভাগে কভার করব।

xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
    xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
    // The time argument is for future use and not implemented at this time.
    let pose = xrFrame.getDevicePose(xrFrameOfRef);
    if (pose) {
        for (let view of xrFrame.views) {
        // Draw something to the screen.
        }
    }
    // Input device code will go here.
    frame.session.requestAnimationFrame(onFrame);
    }
}

এক্সআর সেশন শেষ করুন

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

xrDevice.requestSession(sessionOptions)
.then(xrSession => {
    // Create a WebGL layer and initialize the render loop.
    xrSession.addEventListener('end', onSessionEnd);
});

// Restore the page to normal after immersive access has been released.
function onSessionEnd() {
    xrSession = null;

    // Ending the session stops executing callbacks passed to the XRSession's
    // requestAnimationFrame(). To continue rendering, use the window's
    // requestAnimationFrame() function.
    window.requestAnimationFrame(onDrawFrame);
}

মিথস্ক্রিয়া কিভাবে কাজ করে?

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

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

ইনপুট ডিভাইস এবং পয়েন্টার রশ্মি

ব্যবহারকারীদের কাছে, পয়েন্টার রশ্মি নিয়ন্ত্রক এবং তারা যা কিছু নির্দেশ করছে তার মধ্যে একটি ক্ষীণ রেখা। কিন্তু আপনার অ্যাপটি আঁকতে হবে। এর অর্থ হল ইনপুট ডিভাইসের ভঙ্গি পাওয়া এবং এর অবস্থান থেকে AR/VR স্পেসে একটি অবজেক্টে একটি লাইন আঁকা। এই প্রক্রিয়া মোটামুটি এই মত দেখায়:

let inputSources = xrSession.getInputSources();
for (let xrInputSource of inputSources) {
    let inputPose = frame.getInputPose(inputSource, xrFrameOfRef);
    if (!inputPose) {
    continue;
    }
    if (inputPose.gripMatrix) {
    // Render a virtual version of the input device
    //   at the correct position and orientation.
    }
    if (inputPose.pointerMatrix) {
    // Draw a ray from the gripMatrix to the pointerMatrix.
    }
}

এটি ইমারসিভ ওয়েব কমিউনিটি গ্রুপ থেকে ইনপুট ট্র্যাকিং নমুনার একটি স্ট্রাইপ ডাউন সংস্করণ। ফ্রেম রেন্ডারিংয়ের মতো, পয়েন্টার রে এবং ডিভাইস আঁকা আপনার উপর নির্ভর করে। পূর্বে উল্লেখ করা হয়েছে, এই কোডটি অবশ্যই রেন্ডার লুপের অংশ হিসাবে চালাতে হবে।

ভার্চুয়াল স্পেসে আইটেম নির্বাচন করা হচ্ছে

এআর/ভিআর-এ কেবলমাত্র জিনিসগুলির দিকে ইঙ্গিত করা বেশ অকেজো। দরকারী কিছু করতে, ব্যবহারকারীদের জিনিস নির্বাচন করার ক্ষমতা প্রয়োজন। WebXR ডিভাইস API ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ার জন্য তিনটি ইভেন্ট প্রদান করে: select , selectStart , নির্বাচন করুন এবং selectEnd । তাদের এমন একটি ছদ্মবেশ রয়েছে যা আমি আশা করিনি: তারা শুধুমাত্র আপনাকে বলে যে একটি ইনপুট ডিভাইসে ক্লিক করা হয়েছে৷ পরিবেশে কোন আইটেমটি ক্লিক করা হয়েছে তা তারা আপনাকে বলে না। ইভেন্ট হ্যান্ডলারগুলি XRSession অবজেক্টে যোগ করা হয় এবং এটি উপলব্ধ হওয়ার সাথে সাথে যোগ করা উচিত।

xrDevice.requestSession(sessionOptions)
.then(xrSession => {
    // Create a WebGL layer and initialize the render loop.
    xrSession.addEventListener('selectstart', onSelectStart);
    xrSession.addEventListener('selectend', onSelectEnd);
    xrSession.addEventListener('select', onSelect);
});

এই কোডটি ইনপুট নির্বাচনের উদাহরণের উপর ভিত্তি করে তৈরি করা হয়েছে, যদি আপনি আরও প্রসঙ্গ চান।

কি ক্লিক করা হয়েছে তা বের করতে আপনি একটি ভঙ্গি ব্যবহার করুন। (আপনি কি অবাক হয়েছেন? আমি তা মনে করিনি।) এর বিশদ বিবরণ আপনার অ্যাপ বা আপনি যে ফ্রেমওয়ার্ক ব্যবহার করছেন তার জন্য নির্দিষ্ট, এবং তাই এই নিবন্ধের সুযোগের বাইরে। কটনটেলের পদ্ধতিটি ইনপুট নির্বাচনের উদাহরণে রয়েছে।

function onSelect(ev) {
    let inputPose = ev.frame.getInputPose(ev.inputSource, xrFrameOfRef);
    if (!inputPose) {
    return;
    }
    if (inputPose.pointerMatrix) {
    // Figure out what was clicked and respond.
    }
}

উপসংহার: সামনের দিকে তাকিয়ে

আমি আগেই বলেছি, ক্রোম 69-এ অগমেন্টেড রিয়েলিটি প্রত্যাশিত (ক্যানারি জুন 2018-এ কিছু সময়)। তবুও, আমরা এখন পর্যন্ত যা পেয়েছি তা চেষ্টা করার জন্য আমি আপনাকে উত্সাহিত করি। এটি আরও ভাল করার জন্য আমাদের মতামত প্রয়োজন। WebXR হিট টেস্টের জন্য ChromeStatus.com দেখে এর অগ্রগতি অনুসরণ করুন। এছাড়াও আপনি WebXR অ্যাঙ্কর অনুসরণ করতে পারেন যা পোজ ট্র্যাকিং উন্নত করবে।