Chrome 67-এ, আমরা অগমেন্টেড রিয়েলিটি (AR) এবং ভার্চুয়াল রিয়েলিটি (VR) উভয়ের জন্য WebXR ডিভাইস API ঘোষণা করেছি , যদিও শুধুমাত্র VR বৈশিষ্ট্যগুলি সক্ষম করা হয়েছিল৷ VR হল একটি অভিজ্ঞতা যা একটি কম্পিউটিং ডিভাইসে যা আছে তার উপর ভিত্তি করে। অন্যদিকে AR আপনাকে বাস্তব জগতে ভার্চুয়াল অবজেক্ট রেন্ডার করতে দেয়। সেই বস্তুগুলির স্থান নির্ধারণ এবং ট্র্যাকিংয়ের অনুমতি দেওয়ার জন্য, আমরা এইমাত্র Chrome ক্যানারিতে WebXR হিট টেস্ট API যোগ করেছি, একটি নতুন পদ্ধতি যা নিমজ্জনশীল ওয়েব কোড বস্তুকে বাস্তব জগতে রাখতে সাহায্য করে৷
আমি এটা কোথায় পেতে পারি?
এই APIটি অবিলম্বে ভবিষ্যতের জন্য ক্যানারিতে থাকার উদ্দেশ্যে করা হয়েছে৷ আমরা একটি দীর্ঘ পরীক্ষার সময় চাই কারণ এটি একটি খুব নতুন API প্রস্তাব এবং আমরা নিশ্চিত করতে চাই যে এটি বিকাশকারীদের জন্য শক্তিশালী এবং সঠিক।
ক্রোম ক্যানারি ছাড়াও, আপনারও প্রয়োজন হবে:
- একটি সামঞ্জস্যপূর্ণ স্মার্টফোন অ্যান্ড্রয়েড O বা তার পরে চলমান।
- ARCore ইনস্টল করতে।
- দুটি Chrome পতাকা (chrome://flags): WebXRDevice API (#webxr) এবং WebXR হিট টেস্ট (#webxr-hit-test)
এগুলো দিয়ে, আপনি ডেমোতে ডুব দিতে পারেন বা আমাদের কোডল্যাব ব্যবহার করে দেখতে পারেন।
- চাকমুল
- ইমারসিভ ওয়েব নমুনা
- কোডল্যাব
এটা শুধু ওয়েব
এই বছর Google IO-তে, আমরা Chrome-এর প্রাথমিক বিল্ডের সাথে অগমেন্টেড রিয়েলিটি প্রদর্শন করেছি। আমি সেই তিন দিনের মধ্যে ডেভেলপার এবং নন-ডেভেলপারদের কাছে বারবার কিছু বলেছি যেটা আমি যদি আমার নিমজ্জিত ওয়েব নিবন্ধে রাখতে জানতাম: "এটা শুধু ওয়েব।"
"আমার কি ক্রোম এক্সটেনশন ইনস্টল করতে হবে?" "কোন এক্সটেনশন নেই। এটা শুধু ওয়েব।"
"আমার কি একটি বিশেষ ব্রাউজার দরকার?" "এটা শুধু ওয়েব।"
"আমার কি অ্যাপ ইনস্টল করতে হবে?" "কোন বিশেষ অ্যাপ নেই। এটা শুধু ওয়েব।"
এটি আপনার কাছে স্পষ্ট হতে পারে যেহেতু আপনি ওয়েবে নিবেদিত একটি ওয়েবসাইটে এটি পড়ছেন৷ আপনি যদি এই নতুন API এর সাথে বিক্ষোভ তৈরি করেন তবে এই প্রশ্নের জন্য প্রস্তুত হন। আপনি এটা অনেক পাবেন.
IO এর কথা বলছি, আপনি যদি সাধারণভাবে নিমজ্জিত ওয়েব সম্পর্কে আরও জানতে চান, এটি কোথায়, এটি কোথায় যাচ্ছে এই ভিডিওটি দেখুন।
এটা কি জন্য দরকারী?
অগমেন্টেড রিয়েলিটি অনেকগুলি বিদ্যমান ওয়েব পৃষ্ঠাগুলির জন্য একটি মূল্যবান সংযোজন হবে৷ উদাহরণস্বরূপ, এটি লোকেদের শিক্ষার সাইটগুলিতে শিখতে সাহায্য করতে পারে এবং সম্ভাব্য ক্রেতাদের কেনাকাটা করার সময় তাদের বাড়ির বস্তুগুলি কল্পনা করতে দেয়৷
আমাদের ডেমো এই চিত্রিত. তারা ব্যবহারকারীদের একটি বস্তুর একটি জীবন-আকার উপস্থাপনা স্থাপন করার অনুমতি দেয় যেন বাস্তবে। একবার স্থাপন করা হলে, চিত্রটি নির্বাচিত পৃষ্ঠে থাকে, প্রকৃত আইটেমটি সেই পৃষ্ঠে থাকলে এটির আকারটি প্রদর্শিত হয় এবং ব্যবহারকারীকে এটির কাছাকাছি বা তার থেকে দূরে সরে যেতে দেয়৷ এটি দর্শকদের একটি দ্বিমাত্রিক চিত্রের তুলনায় বস্তুর গভীরতর বোঝার সুযোগ দেয়।
আপনি যদি নিশ্চিত না হন যে আমি কি বলতে চাইছি, আপনি যখন ডেমো ব্যবহার করবেন তখন এটি পরিষ্কার হয়ে যাবে। আপনার যদি এমন কোনো ডিভাইস না থাকে যা ডেমো চালাতে পারে , তাহলে এই নিবন্ধের শীর্ষে থাকা ভিডিও লিঙ্কটি দেখুন।
একটি জিনিস যা ডেমো এবং ভিডিও দেখায় না তা হল কিভাবে AR একটি বাস্তব বস্তুর আকার বোঝাতে পারে। এখানে ভিডিওটি একটি শিক্ষামূলক ডেমো দেখায় যা আমরা Chacmool নামে তৈরি করেছি। একটি সহচর নিবন্ধ এই ডেমোটি বিস্তারিতভাবে বর্ণনা করে। এই আলোচনার জন্য গুরুত্বপূর্ণ বিষয় হল যে আপনি যখন চাকমুল মূর্তিটিকে অগমেন্টেড রিয়েলিটিতে স্থাপন করেন, আপনি এটির আকার দেখতে পাচ্ছেন যেন এটি আসলে আপনার সাথে ঘরে রয়েছে।
Chacmool উদাহরণ শিক্ষামূলক কিন্তু এটি ঠিক সহজে বাণিজ্যিক হতে পারে। একটি আসবাব কেনাকাটার সাইট কল্পনা করুন যা আপনাকে আপনার বসার ঘরে একটি পালঙ্ক রাখতে দেয়। AR অ্যাপ্লিকেশনটি আপনাকে বলে যে পালঙ্কটি আপনার জায়গার সাথে খাপ খায় কিনা এবং এটি আপনার অন্যান্য আসবাবের পাশে কেমন দেখাবে।
রে কাস্ট, হিট টেস্ট এবং রেটিকল
অগমেন্টেড রিয়েলিটি বাস্তবায়নের সময় সমাধান করার জন্য একটি মূল সমস্যা হল কিভাবে বস্তুগুলিকে বাস্তব-বিশ্বের দৃশ্যে স্থাপন করা যায়। এটি করার পদ্ধতিকে রে ঢালাই বলা হয়। রে ঢালাই মানে পয়েন্টার রশ্মি এবং বাস্তব জগতে একটি পৃষ্ঠের মধ্যে ছেদ গণনা করা। সেই ছেদটিকে হিট বলা হয় এবং হিট হয়েছে কিনা তা নির্ধারণ করা একটি হিট পরীক্ষা ।
Chrome ক্যানারিতে নতুন কোড নমুনা চেষ্টা করার জন্য এটি একটি ভাল সময়। কিছু করার আগে, আপনি সঠিক পতাকাগুলি সক্ষম করেছেন কিনা তা দুবার চেক করুন৷ এখন নমুনা লোড করুন এবং "স্টার্ট AR" এ ক্লিক করুন।
কয়েকটি বিষয় লক্ষ্য করুন। প্রথমত, স্পিড মিটার যা আপনি অন্যান্য নিমজ্জিত নমুনাগুলি থেকে চিনতে পারেন তা 60 এর পরিবর্তে 30 ফ্রেম প্রতি সেকেন্ড দেখায়৷ এটি সেই হার যে ওয়েব পৃষ্ঠাটি ক্যামেরা থেকে ছবিগুলি গ্রহণ করে৷
AR হিট টেস্ট ডেমো
আপনার লক্ষ্য করা উচিত অন্য জিনিস সূর্যমুখী ইমেজ. আপনি নড়াচড়া করার সাথে সাথে এটি চলে যায় এবং মেঝে এবং টেবিলের শীর্ষের মতো পৃষ্ঠগুলিতে স্ন্যাপ করে। আপনি যদি স্ক্রীনে ট্যাপ করেন, একটি সূর্যমুখী একটি পৃষ্ঠে স্থাপন করা হবে এবং একটি নতুন সূর্যমুখী আপনার ডিভাইসের সাথে সরে যাবে।
যে চিত্রটি আপনার ডিভাইসের সাথে সরে যায় এবং যেটি সারফেসে লক করার চেষ্টা করে তাকে রেটিকল বলা হয়। একটি জালিকা একটি অস্থায়ী চিত্র যা একটি বস্তুকে বর্ধিত বাস্তবতায় স্থাপন করতে সহায়তা করে। এই ডেমোতে, রেটিকলটি স্থাপন করা ছবির একটি অনুলিপি। কিন্তু এটা হওয়ার দরকার নেই। চ্যাকমুল ডেমোতে, উদাহরণস্বরূপ, এটি একটি আয়তক্ষেত্রাকার বাক্স যা স্থাপন করা বস্তুর ভিত্তির মতো মোটামুটি একই আকারের।
কোড নিচে
Chacmool ডেমো একটি প্রোডাকশন অ্যাপে AR দেখতে কেমন হতে পারে তা দেখায়। সৌভাগ্যবশত, WebXR স্যাম্পল রেপোতে অনেক সহজ ডেমো আছে। আমার নমুনা কোড সেই সংগ্রহস্থলে AR হিট টেস্ট ডেমো থেকে আসে। FYI, কী ঘটছে তা বুঝতে আপনাকে সাহায্য করার জন্য আমি কোড উদাহরণগুলি সরল করতে চাই।
একটি AR সেশনে প্রবেশ করার এবং একটি রেন্ডার লুপ চালানোর মূল বিষয়গুলি AR-এর জন্য একই রকম যেমন সেগুলি VR-এর জন্য। আপনি যদি অপরিচিত হন তবে আপনি আমার আগের নিবন্ধটি পড়তে পারেন। আরও সুনির্দিষ্টভাবে বলতে গেলে, একটি AR সেশনে প্রবেশ করা এবং চালানো প্রায় হুবহু একটি VR ম্যাজিক উইন্ডো সেশনে প্রবেশ করার মতো। একটি ম্যাজিক উইন্ডোর মতো, সেশনের ধরনটি অবশ্যই নন-ইমারসিভ হতে হবে এবং রেফারেন্স টাইপের ফ্রেম অবশ্যই 'eye-level' হতে হবে।
নতুন API
এখন আমি দেখাবো কিভাবে নতুন API ব্যবহার করতে হয়। মনে রাখবেন যে AR-তে, রেটিকল একটি আইটেম স্থাপন করার আগে একটি পৃষ্ঠ খুঁজে বের করার চেষ্টা করে। এটি একটি হিট টেস্ট দিয়ে করা হয়। একটি হিট পরীক্ষা করতে, XRSession.requestHitTest() এ কল করুন। এটি এই মত দেখায়:
xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
//
});
এই পদ্ধতির তিনটি আর্গুমেন্ট একটি রে ঢালাই প্রতিনিধিত্ব করে। রশ্মি ঢালাই রশ্মির দুটি বিন্দু ( origin এবং direction ) দ্বারা সংজ্ঞায়িত করা হয় এবং যেখানে সেই বিন্দুগুলি ( frameOfReference ) থেকে গণনা করা হয়। উৎপত্তি এবং দিক উভয়ই 3D ভেক্টর। আপনি যে মানটি জমা দেন না কেন, সেগুলিকে 1 এর দৈর্ঘ্যে স্বাভাবিক (রূপান্তরিত) করা হবে।
জালিকা সরানো
আপনি আপনার ডিভাইসটি সরানোর সাথে সাথে রেটিকলকে এটির সাথে সরাতে হবে কারণ এটি এমন একটি অবস্থান খুঁজে বের করার চেষ্টা করে যেখানে একটি বস্তু স্থাপন করা যেতে পারে। এর মানে হল যে জালিকাটি অবশ্যই প্রতিটি ফ্রেমে পুনরায় আঁকতে হবে।
requestAnimationFrame() কলব্যাক দিয়ে শুরু করুন। VR এর মতো, আপনার একটি সেশন এবং একটি ভঙ্গি প্রয়োজন।
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Do the hit test and draw the reticle.
}
}
একবার আপনার সেশন এবং ভঙ্গি হয়ে গেলে, রশ্মি কোথায় ঢালাই করছে তা নির্ধারণ করুন। নমুনা কোড gl-matrix গণিত লাইব্রেরি ব্যবহার করে। কিন্তু gl-matrix একটি প্রয়োজনীয়তা নয়। গুরুত্বপূর্ণ বিষয় হল আপনি এটি দিয়ে কী গণনা করছেন এবং এটি ডিভাইসের অবস্থানের উপর ভিত্তি করে তা জানা। XRPose.poseModalMatrix থেকে ডিভাইসের অবস্থান পুনরুদ্ধার করুন। আপনার রশ্মি হাতে নিয়ে, requestHitTest() কল করুন।
function onXRFrame(t, frame) {
let xrSession = frame.session;
// The frame of reference, which was set elsewhere, is 'eye-level'.
// See onSessionStarted() ins the sample code for details.
let xrPose = frame.getDevicePose(xrFrameOfRef);
if (xrPose && xrPose.poseModelMatrix) {
// Calculate the origin and direction for the raycast.
xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
.then((results) => {
if (results.length) {
// Draw for each view.
}
});
}
session.requestAnimationFrame(onXRFrame);
}
যদিও হিট পরীক্ষার নমুনায় স্পষ্ট নয়, তবুও দৃশ্যটি আঁকতে আপনাকে দৃশ্যগুলি লুপ করতে হবে। WebGL API ব্যবহার করে অঙ্কন করা হয়। আপনি যদি সত্যিই উচ্চাকাঙ্ক্ষী হন তবে আপনি এটি করতে পারেন। যদিও, আমরা একটি ফ্রেমওয়ার্ক ব্যবহার করার পরামর্শ দিই। নিমজ্জিত ওয়েব নমুনাগুলি শুধুমাত্র Cottontail নামক ডেমোগুলির জন্য তৈরি একটি ব্যবহার করে এবং Three.js মে মাস থেকে WebXR সমর্থন করেছে৷
একটি বস্তু স্থাপন
ব্যবহারকারী যখন স্ক্রীন ট্যাপ করেন তখন একটি বস্তু AR-তে রাখা হয়। তার জন্য আপনি select ইভেন্ট ব্যবহার করুন. এই ধাপে গুরুত্বপূর্ণ বিষয় হল এটি কোথায় রাখতে হবে তা জানা। যেহেতু চলমান রেটিকল আপনাকে হিট পরীক্ষার একটি ধ্রুবক উত্স দেয়, তাই একটি বস্তু স্থাপন করার সবচেয়ে সহজ উপায় হল শেষ হিট পরীক্ষায় রেটিকলের অবস্থানে এটি আঁকা। আপনার যদি প্রয়োজন হয়, বলুন যে আপনার কাছে রেটিকল না দেখানোর একটি বৈধ কারণ আছে, আপনি নমুনায় দেখানো ইভেন্টে requestHitTest() কল করতে পারেন।
উপসংহার
এটিতে একটি হ্যান্ডেল পাওয়ার সর্বোত্তম উপায় হল নমুনা কোডের মাধ্যমে ধাপে ধাপে যাওয়া বা কোডল্যাব চেষ্টা করা। আমি আশা করি আমি আপনাকে যথেষ্ট ব্যাকগ্রাউন্ড দিয়েছি যাতে উভয়ের অর্থ বোঝা যায়।
আমরা ইমারসিভ ওয়েব API তৈরি করিনি, দীর্ঘ শট দিয়ে নয়। আমরা অগ্রগতির সাথে সাথে এখানে নতুন নিবন্ধ প্রকাশ করব।