BabylonJS একটি শক্তিশালী 3D ইঞ্জিন যা ওয়েব ভিত্তিক Virtual Reality (VR) এবং Augmented Reality (AR) প্রজেক্ট তৈরি করতে সহায়তা করে। এটি ওয়েব গেম এবং ইন্টারঅ্যাক্টিভ 3D অভিজ্ঞতা তৈরি করার জন্য বিশেষভাবে ডিজাইন করা হয়েছে, এবং এতে VR ও AR সমর্থন রয়েছে। এই টিউটোরিয়ালে আমরা জানব কিভাবে BabylonJS দিয়ে VR এবং AR প্রজেক্ট তৈরি করা যায়।
১. Virtual Reality (VR) প্রজেক্ট তৈরি
Virtual Reality (VR) হল এমন একটি প্রযুক্তি যেখানে ব্যবহারকারী একটি ভার্চুয়াল পরিবেশে সম্পূর্ণ নিমজ্জিত থাকে। BabylonJS সহজেই VR প্রজেক্ট তৈরি করার জন্য WebXR API ব্যবহার করে। এই API ওয়েব ব্রাউজারে VR অভিজ্ঞতা প্রদান করতে সাহায্য করে।
VR প্রজেক্টের জন্য প্রাথমিক প্রস্তুতি
- WebXR: VR এবং AR-এর জন্য আধুনিক ব্রাউজার সমর্থন করে WebXR API। এটি ওয়েব পেজগুলোকে VR এবং AR ডিভাইসে ইন্টারঅ্যাক্টিভ 3D অভিজ্ঞতা সরবরাহ করতে সক্ষম করে।
- BabylonJS VR কম্পোনেন্ট: BabylonJS নিজেই VR সমর্থন করে এবং আপনি এর মাধ্যমে ওয়েব ব্রাউজার থেকে VR এক্সপিরিয়েন্স তৈরি করতে পারেন।
উদাহরণ: VR প্রজেক্ট তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS VR Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/babylon.gui.min.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// একটি সিম্পল স্ফিয়ার তৈরি করা
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
// VR প্রস্তুতির জন্য WebXR controller যোগ করা
var xrHelper = scene.createDefaultXRExperienceAsync({
floorMeshes: [sphere]
});
// Render Loop
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- BABYLON.ArcRotateCamera: এটি একটি ক্যামেরা যা 3D দৃশ্যে অবজেক্ট ঘুরিয়ে দেখানোর জন্য ব্যবহৃত হয়।
- scene.createDefaultXRExperienceAsync: এটি WebXR API ব্যবহার করে VR অভিজ্ঞতা তৈরি করার জন্য ব্যবহৃত হয়।
- floorMeshes: এখানে সিম্পল স্ফিয়ার একটি "floor" হিসেবে ব্যবহৃত হচ্ছে, যা VR অভিজ্ঞতার জন্য ভূমি হিসেবে কাজ করবে।
২. Augmented Reality (AR) প্রজেক্ট তৈরি
Augmented Reality (AR) হল একটি প্রযুক্তি যা বাস্তব জগতের উপর ভার্চুয়াল অবজেক্ট overlay করতে সক্ষম। BabylonJS এর মাধ্যমে AR প্রজেক্ট তৈরি করতে WebXR এবং AR Foundation ব্যবহার করা হয়। এই প্রযুক্তি আপনাকে ডিভাইসের ক্যামেরার মাধ্যমে বাস্তব দুনিয়ার সঙ্গে ভার্চুয়াল অবজেক্ট মিশিয়ে একটি নতুন অভিজ্ঞতা তৈরি করতে সাহায্য করে।
AR প্রজেক্টের জন্য প্রাথমিক প্রস্তুতি
- WebXR AR: AR অভিজ্ঞতার জন্য BabylonJS WebXR API ব্যবহার করে AR কন্ট্রোলার এবং ক্যামেরা এক্সেস করতে পারে।
- AR রেন্ডারিং: AR অভিজ্ঞতার জন্য আপনাকে বিশেষভাবে ক্যামেরা এবং প্লেইসিং এলিমেন্টগুলো কনফিগার করতে হবে যাতে ভার্চুয়াল অবজেক্ট বাস্তব জগতে সঠিকভাবে স্থাপন করা যায়।
উদাহরণ: AR প্রজেক্ট তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS AR Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/babylon.gui.min.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.attachControl(canvas, true);
// আলোর উৎস
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// AR অভিজ্ঞতার জন্য WebXR AR controller তৈরি করা
var xrHelper = scene.createDefaultXRExperienceAsync({
uiOptions: {
sessionMode: "immersive-ar"
},
floorMeshes: []
});
// AR অভিজ্ঞতার জন্য একটি সিম্পল অবজেক্ট তৈরি
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 1}, scene);
// Render Loop
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- scene.createDefaultXRExperienceAsync: এই ফাংশনটি AR সেশন শুরু করার জন্য ব্যবহৃত হয়, যেখানে
sessionModeকে "immersive-ar" হিসেবে সেট করা হয়েছে। এটি নির্দেশ করে যে এটি একটি AR অভিজ্ঞতা হবে। - floorMeshes: AR সেশনে কোন ফ্লোর বা সমতল অঞ্চল সেট করা হলে, সেখানে ভার্চুয়াল অবজেক্টগুলো প্লেস করা হবে।
৩. WebXR API এর সাহায্যে VR এবং AR সেশন নিয়ন্ত্রণ
WebXR API এর মাধ্যমে VR এবং AR অভিজ্ঞতাকে পরিচালনা করা সম্ভব। BabylonJS এই API সমর্থন করে এবং VR এবং AR সেশন সেট আপ করার জন্য সহজে ব্যবহারযোগ্য ইন্টারফেস প্রদান করে।
VR এবং AR সেশন শুরু করা
// VR সেশন শুরু করা
xrHelper.baseExperience.enterXRAsync('immersive-vr', 'local-floor');
// AR সেশন শুরু করা
xrHelper.baseExperience.enterXRAsync('immersive-ar', 'local-floor');
এই কোডের মাধ্যমে আপনি সহজেই VR এবং AR সেশন শুরু করতে পারেন।
৪. VR এবং AR জন্য কন্ট্রোলার ব্যবহৃত করা
আপনার VR বা AR প্রজেক্টে কন্ট্রোলার ব্যবহার করা যেতে পারে যা ব্যবহারকারীর ইন্টারঅ্যাকশনকে ট্র্যাক করবে। BabylonJS এর সাহায্যে আপনি VR এবং AR কন্ট্রোলারগুলোর মধ্যে ম্যানিপুলেশন, পয়েন্টিং, এবং গ্র্যাবিং এর মতো কার্যকলাপ সম্পাদন করতে পারেন।
উদাহরণ: কন্ট্রোলার ইন্টিগ্রেশন
// VR কন্ট্রোলার কনফিগারেশন
xrHelper.input.onControllerMeshLoadedObservable.add(function (controllerMesh) {
controllerMesh.scaling.scaleInPlace(0.1);
});
সারাংশ
BabylonJS ব্যবহার করে আপনি সহজেই VR এবং AR অভিজ্ঞতা তৈরি করতে পারেন। WebXR API ব্যবহারের মাধ্যমে আপনি immersive VR এবং immersive AR সেশন তৈরি করতে পারবেন এবং সেই অনুযায়ী ক্যামেরা, কন্ট্রোলার, এবং ইন্টারঅ্যাকশনের জন্য প্রয়োজনীয় কনফিগারেশন করতে পারবেন। VR এবং AR গেমস বা অ্যাপ্লিকেশন তৈরি করতে BabylonJS একটি দুর্দান্ত টুল হিসেবে কাজ করে।
Read more
