BabylonJS-এ Physics ইঞ্জিন ব্যবহারের মাধ্যমে 3D দৃশ্যে বাস্তবসম্মত গতিবিধি, সংঘর্ষ এবং গ্রাভিটি ইফেক্ট তৈরি করা যায়। Physics ইঞ্জিনটি খুবই শক্তিশালী, যা আপনাকে বাস্তবসম্মত গেমপ্লে বা ইন্টারেকটিভ সিমুলেশন তৈরি করতে সহায়তা করে। এখানে, আমরা Physics ইঞ্জিন কীভাবে কাজ করে এবং এটি কীভাবে ব্যবহার করা যায়, তা বিস্তারিতভাবে আলোচনা করব।
Physics ইঞ্জিন কী?
Physics ইঞ্জিন একটি সিস্টেম যা 3D অবজেক্টের গতিবিধি (motion), সংঘর্ষ (collision), এবং অন্যান্য বাস্তব পৃথিবীর পদার্থবিজ্ঞান (physics) ঘটনাগুলি সিমুলেট করে। BabylonJS Physics ইঞ্জিন আপনাকে রিগিডবডি (RigidBody), গ্রাভিটি, বাউন্স, ফোর্স ইত্যাদি বৈশিষ্ট্য তৈরি করার সুবিধা দেয়।
Physics ইঞ্জিন সেটআপ
১. Physics ইঞ্জিনের ধরন
BabylonJS-এ Physics ইঞ্জিন হিসেবে দুটি প্রধান লাইব্রেরি ব্যবহৃত হয়:
- Cannon.js: এটি একটি দ্রুত এবং হালকা Physics ইঞ্জিন।
- Oimo.js: আরেকটি Physics ইঞ্জিন, যা কিছু বিশেষ পরিস্থিতিতে ব্যবহার করা হয়।
Cannon.js সাধারণত সবচেয়ে বেশি ব্যবহৃত হয় এবং এটি ভালো পারফরম্যান্স দেয়।
২. Physics ইঞ্জিন সক্রিয় করা
Physics ইঞ্জিন ব্যবহার করতে, BabylonJS-এ সেটি সক্রিয় করতে হবে এবং আপনার দৃশ্যে Physics ইফেক্ট প্রয়োগ করতে হবে। চলুন দেখি একটি সাধারণ উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Physics Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/preview/babylon.physics.min.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS ইঞ্জিন তৈরি করা
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);
// Physics ইঞ্জিন সক্রিয় করা
scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.CannonJSPlugin());
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5; // বক্সের অবস্থান নির্ধারণ
// Physics properties প্রয়োগ করা
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে, আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Physics ইঞ্জিন সক্রিয় করা:
scene.enablePhysics()ফাংশন ব্যবহার করে Physics ইঞ্জিন সক্রিয় করা হয়েছে।- প্রথম আর্গুমেন্ট হিসাবে গতি এবং ভর আকর্ষণ শক্তি (gravity) ব্যবহার করা হয়েছে।
- দ্বিতীয় আর্গুমেন্টে
BABYLON.CannonJSPlugin()ব্যবহার করা হয়েছে, যা Cannon.js ইঞ্জিন ব্যবহার করবে।
- PhysicsImpostor:
box.physicsImpostorএর মাধ্যমে বক্সের Physics ইম্পস্টর তৈরি করা হয়েছে। এখানে,BoxImpostorএর মাধ্যমে বক্সকে Physics সিস্টেমের মধ্যে যুক্ত করা হয়েছে, এবং তার ম্যানিপুলেশন, আন্দোলন এবং সংঘর্ষ সিমুলেট করা হচ্ছে।{mass: 1}প্রোপার্টি দিয়ে বক্সের ভর নির্ধারণ করা হয়েছে।
Physics ইঞ্জিনের প্রধান উপাদান
১. PhysicsImpostor
PhysicsImpostor হল একটি অবজেক্ট, যা কোন 3D অবজেক্টের সঙ্গে Physics সিমুলেশন যুক্ত করে। এটি বিভিন্ন ধরনের থাকতে পারে, যেমন:
BoxImpostor: বক্স আকৃতির অবজেক্ট।SphereImpostor: গোলক আকৃতির অবজেক্ট।GroundImpostor: ভূমি বা সেকেন্ডারি অবজেক্ট, যা অন্য অবজেক্টের সাথে সংঘর্ষ করবে।
PhysicsImpostor ব্যবহারের জন্য কিছু উদাহরণ:
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
sphere.position.y = 5; // Sphere উপরে স্থাপন
sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, {mass: 1}, scene);
২. Gravitational Force (গ্রাভিটি)
Physics সিমুলেশনে গ্রাভিটি ব্যবহৃত হয় যাতে অবজেক্টগুলি পৃথিবীর দিকে পড়তে থাকে। BabylonJS-এ গ্রাভিটি সেট করতে scene.enablePhysics() ফাংশন ব্যবহার করা হয়, যেখানে আপনি গ্রাভিটি ভেক্টর হিসাবে নির্ধারণ করতে পারেন। যেমন:
scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.CannonJSPlugin());
এখানে, BABYLON.Vector3(0, -9.81, 0) হচ্ছে পৃথিবীর গ্রাভিটি, যা নিচের দিকে কাজ করে।
৩. Collision (সংঘর্ষ)
Physics ইঞ্জিনের মাধ্যমে অবজেক্টের মধ্যে সংঘর্ষ সিমুলেট করা হয়। Collision কন্ট্রোল করার জন্য, আপনাকে PhysicsImpostor ব্যবহার করতে হয়, যা Mesh এর সাথে সংঘর্ষ সিমুলেট করে।
উদাহরণ:
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.GroundImpostor, {mass: 0}, scene);
এখানে, ground-এ GroundImpostor ব্যবহার করা হয়েছে, যা স্থির অবস্থায় থাকে এবং অন্য অবজেক্টের সাথে সংঘর্ষ হবে।
৪. Force (ফোর্স)
BabylonJS-এ Physics ইঞ্জিনে অবজেক্টে ফোর্স প্রয়োগ করার জন্য applyForce() মেথড ব্যবহার করা হয়। উদাহরণ:
box.physicsImpostor.applyForce(new BABYLON.Vector3(0, 10, 0), box.getAbsolutePosition());
এখানে, applyForce() ফাংশন দিয়ে বক্সের উপরে একটি শক্তি প্রয়োগ করা হচ্ছে।
সারাংশ
- BabylonJS-এ Physics ইঞ্জিন ব্যবহার করে 3D দৃশ্যে বাস্তবসম্মত গতি, সংঘর্ষ, গ্রাভিটি এবং অন্যান্য ফিজিক্স সিমুলেশন তৈরি করা যায়।
- PhysicsImpostor হলো 3D অবজেক্টের জন্য Physics সিমুলেশন কনফিগার করার উপাদান।
- Cannon.js হলো প্রধান Physics ইঞ্জিন, যা ব্যবহার করে আপনি সহজে Physics সিমুলেশন তৈরি করতে পারেন।
- গ্রাভিটি, ফোর্স এবং সংঘর্ষ-এর মাধ্যমে আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত করা যায়।
এই বৈশিষ্ট্যগুলি ব্যবহার করে আপনি গেম ডেভেলপমেন্ট, ইন্টারেকটিভ সিমুলেশন, এবং অন্যান্য 3D অ্যাপ্লিকেশন আরও উন্নত ও বাস্তবসম্মত করতে পারবেন।
BabylonJS একটি শক্তিশালী 3D গ্রাফিক্স ইঞ্জিন, যা শুধুমাত্র দৃশ্য তৈরি এবং রেন্ডার করেই সীমাবদ্ধ নয়, বরং বাস্তবসম্মত ফিজিক্স (Physics) ইঞ্জিনও সমর্থন করে। ফিজিক্স ইঞ্জিন ব্যবহার করে আপনি 3D অবজেক্টগুলির মধ্যে গতি, বল, ধাক্কা, সংঘর্ষ এবং অন্যান্য ফিজিক্যাল প্রক্রিয়া সিমুলেট করতে পারেন। এতে আপনার 3D অ্যাপ্লিকেশন বা গেমে বাস্তবসম্মত অ্যানিমেশন এবং ইন্টারঅ্যাকশন যোগ করা সহজ হয়।
ফিজিক্স ইঞ্জিন কি?
ফিজিক্স ইঞ্জিন হলো একটি সিস্টেম যা 3D অবজেক্টগুলির মধ্যে গতি, বল, সংঘর্ষ এবং অন্যান্য পদার্থবিজ্ঞানের নীতি সিমুলেট করে। এটি ব্যবহারকারীদের ফিজিক্যাল প্রক্রিয়াগুলির সঠিক মডেল তৈরি করতে সাহায্য করে। উদাহরণস্বরূপ, গা heavy ় বস্তু নিচে পড়া, অবজেক্টগুলির মধ্যে সংঘর্ষ, গতি নির্ধারণ এবং আরও অনেক কিছু।
BabylonJS বিভিন্ন ধরনের ফিজিক্স ইঞ্জিনের সমর্থন প্রদান করে, যেমন:
- Cannon.js - একটি হালকা ও শক্তিশালী ফিজিক্স ইঞ্জিন যা সহজেই BabylonJS এর সাথে ইন্টিগ্রেট করা যায়।
- Oimo.js - একটি অন্য একটি জনপ্রিয় ফিজিক্স ইঞ্জিন যা সহজে ইন্টিগ্রেট করা যায় এবং সাধারণত গেম ডেভেলপমেন্টে ব্যবহৃত হয়।
- Ammo.js - আরও উন্নত এবং ভারী ফিজিক্যাল সিমুলেশন সমর্থন করে, তবে এতে কিছু অতিরিক্ত কনফিগারেশন প্রয়োজন।
ফিজিক্স ইঞ্জিন ব্যবহার শুরু করা
BabylonJS এ ফিজিক্স ইঞ্জিন ব্যবহার করতে, আপনাকে প্রথমে সঠিক ফিজিক্স ইঞ্জিনটি লোড করতে হবে এবং তারপর আপনার Mesh (অথবা 3D অবজেক্ট) এর জন্য ফিজিক্স প্রপার্টি সেট করতে হবে।
১. ফিজিক্স ইঞ্জিন যোগ করা (Cannon.js উদাহরণ)
এখানে আমরা Cannon.js ফিজিক্স ইঞ্জিন ব্যবহার করে একটি সিম্পল 3D দৃশ্যে ফিজিক্স কার্যকারিতা যোগ করব।
স্টেপ ১: Cannon.js লোড করা
প্রথমে Cannon.js লাইব্রেরি CDN থেকে লোড করুন। যদি আপনি npm বা Yarn ব্যবহার করেন তবে এটি প্যাকেজ হিসেবে ইনস্টল করতে হবে।
<script src="https://cdn.babylonjs.com/cannon.js"></script>
স্টেপ ২: BabylonJS ফিজিক্স ইঞ্জিন সক্রিয় করা
BabylonJS এ ফিজিক্স সক্রিয় করার জন্য, scene.enablePhysics() ফাংশনটি ব্যবহার করতে হয়। এর মাধ্যমে আপনি একটি ফিজিক্স ইঞ্জিন যোগ করবেন এবং সেটা কার্যকর করবেন।
// scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// Cannon.js ফিজিক্স ইঞ্জিন যোগ করা
var gravityVector = new BABYLON.Vector3(0, -9.81, 0); // পৃথিবীর মতো গুরত্ব শক্তি
scene.enablePhysics(gravityVector, new BABYLON.CannonJSPlugin());
এখানে gravityVector সেট করা হয়েছে, যা ফিজিক্স সিমুলেশন চালানোর জন্য গুরত্ব শক্তি (gravity) নির্দেশ করে। CannonJSPlugin হলো সেই প্লাগইন যা Cannon.js ইঞ্জিনকে BabylonJS এর সাথে সংযুক্ত করবে।
স্টেপ ৩: ফিজিক্স সহ Mesh তৈরি করা
আপনার তৈরি করা Mesh (যেমন বক্স) এর জন্য ফিজিক্স সক্রিয় করতে, আপনি mesh.physicsImpostor প্রপার্টি ব্যবহার করবেন।
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
// বক্সের জন্য ফিজিক্স প্রপার্টি সেট করা
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1 }, scene);
এখানে PhysicsImpostor এর মাধ্যমে বক্সটির জন্য ফিজিক্স সেট করা হয়েছে। আমরা এটি BoxImpostor হিসেবে তৈরি করেছি এবং এর জন্য mass (ভর) সেট করেছি। বক্সটি যখন দৃশ্যে অন্যান্য অবজেক্টের সাথে ইন্টারঅ্যাক্ট করবে, তখন এটি ফিজিক্যাল সিমুলেশন অনুসারে আচরণ করবে।
স্টেপ ৪: অন্য একটি অবজেক্ট যোগ করা
ধরা যাক, আপনি একটি বক্সের ওপর আরেকটি বক্স রাখতে চান। তখন দ্বিতীয় বক্সটি গুরত্ব শক্তির কারণে প্রথম বক্সের ওপর পড়বে।
// দ্বিতীয় একটি বক্স তৈরি করা
var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 2}, scene);
box2.position.y = 5; // দ্বিতীয় বক্সটিকে Y অক্ষে 5 ইউনিট উপরে রাখুন
// দ্বিতীয় বক্সের জন্য ফিজিক্স প্রপার্টি সেট করা
box2.physicsImpostor = new BABYLON.PhysicsImpostor(box2, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 2 }, scene);
এখানে দ্বিতীয় বক্সটি একটি ভর (mass) সহ তৈরি করা হয়েছে এবং Y অক্ষে উচ্চতা দেয়া হয়েছে, যাতে এটি প্রথম বক্সটির ওপর পড়তে পারে।
স্টেপ ৫: রেন্ডার লুপ এবং আউটপুট
engine.runRenderLoop(function () {
scene.render();
});
ফিজিক্স ইঞ্জিনের অন্যান্য প্রপার্টি
১. Collision (সংঘর্ষ)
আপনি Mesh এর মধ্যে সংঘর্ষ (collision) ইভেন্টগুলি ট্র্যাক করতে পারেন। যদি দুটি অবজেক্ট সংঘর্ষে আসে, তবে আপনি সেই ইভেন্টকে হ্যান্ডেল করতে পারেন।
২. Force (বল)
অবজেক্টে বল প্রয়োগ করা:
box.physicsImpostor.applyForce(new BABYLON.Vector3(0, 10, 0), box.position);
এটি বক্সটির উপরে 10 ইউনিটের বল প্রয়োগ করবে।
৩. Impulse (ধাক্কা)
অবজেক্টে তাত্ক্ষণিক ধাক্কা প্রয়োগ করা:
box.physicsImpostor.applyImpulse(new BABYLON.Vector3(0, 10, 0), box.position);
এটি বক্সটিকে একটি দ্রুত গতিতে ঠেলে দেবে।
সারাংশ
BabylonJS এ ফিজিক্স ইঞ্জিন ব্যবহার করে 3D দৃশ্যের মধ্যে বাস্তবসম্মত পদার্থবিজ্ঞান যুক্ত করা সম্ভব। Cannon.js, Oimo.js, Ammo.js ইত্যাদি ফিজিক্স ইঞ্জিন BabylonJS এর সাথে ইন্টিগ্রেট করা যেতে পারে। ফিজিক্স ইঞ্জিন ব্যবহার করার মাধ্যমে আপনি গতি, বল, সংঘর্ষ এবং অন্যান্য পদার্থবিজ্ঞানের বৈশিষ্ট্য বাস্তবসম্মতভাবে সিমুলেট করতে পারেন। এই ফিচারটি গেম ডেভেলপমেন্ট এবং 3D সিমুলেশন প্রকল্পের জন্য অপরিহার্য।
BabylonJS একটি শক্তিশালী 3D গ্রাফিক্স ইঞ্জিন, কিন্তু শুধুমাত্র ভিজ্যুয়াল রেন্ডারিংয়ের পাশাপাশি এটি 3D ফিজিক্স সিমুলেশনও সমর্থন করে। 3D গেম এবং সিমুলেশন অ্যাপ্লিকেশনগুলিতে ফিজিক্স (Physics) অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এটি বাস্তববাদী গতিবিধি, বল (force), সংঘর্ষ (collision), এবং অন্যান্য পদার্থবিজ্ঞানের মৌলিক প্রক্রিয়া মডেল করে।
BabylonJS তিনটি প্রধান ফিজিক্স ইঞ্জিন ব্যবহার করতে পারে: Cannon.js, Oimo.js, এবং Ammo.js। এগুলি হলো জনপ্রিয় ফিজিক্স ইঞ্জিন যা 3D পরিবেশে ফিজিক্যাল ইন্টারঅ্যাকশনগুলো সিমুলেট করতে ব্যবহৃত হয়। চলুন, এই তিনটি ইঞ্জিনের সম্পর্কে বিস্তারিত জানি।
১. Cannon.js
Cannon.js কি?
Cannon.js একটি 3D ফিজিক্স ইঞ্জিন যা শরীরের গতি এবং বলের মধ্যে সম্পর্ক সিমুলেট করতে ব্যবহৃত হয়। এটি দ্রুত এবং অ্যাকুরেট সিমুলেশন প্রদান করে এবং ছোট থেকে মাঝারি আকারের গেম এবং সিমুলেশনের জন্য উপযুক্ত। Cannon.js বেশিরভাগ সাধারণ ফিজিক্স সিমুলেশন কার্যকলাপ যেমন বল, প্রক্ষেপণ, শক্তি, ভর, এবং সংঘর্ষ সিমুলেশন পরিচালনা করতে সক্ষম।
প্রধান বৈশিষ্ট্য:
- Rigid body dynamics: কঠিন বস্তুগুলোর গতিবিধি সিমুলেট করতে সক্ষম।
- Collision detection: অবজেক্টগুলোর মধ্যে সংঘর্ষ সঠিকভাবে নির্ণয় করা হয়।
- Soft body simulation: কিছু মৌলিক সফট বডি সিমুলেশন সমর্থন করে।
- Efficient performance: ছোট ও মাঝারি গেম সিমুলেশন এবং ফিজিক্সের জন্য দ্রুত।
উদাহরণ: Cannon.js ব্যবহার করে ফিজিক্স যোগ করা
// Scene এবং ইঞ্জিন তৈরি করা
var scene = new BABYLON.Scene(engine);
// Cannon.js ফিজিক্স ইঞ্জিন সেটআপ
var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5;
// ফিজিক্স বডি অ্যাসাইন করা
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
২. Oimo.js
Oimo.js কি?
Oimo.js একটি লাইটওয়েট 3D ফিজিক্স ইঞ্জিন যা সিমুলেশন এবং ক্যালকুলেশন করার জন্য খুবই কার্যকরী। এটি হালকা এবং দ্রুতগতিতে কাজ করে, তবে এর কিছু সীমাবদ্ধতা রয়েছে, বিশেষত সফটবডি সিমুলেশনে। Oimo.js সাধারণত ছোট 3D গেম এবং সিমুলেশন প্রজেক্টে ব্যবহৃত হয় যেখানে উচ্চমাত্রার ফিজিক্স সিমুলেশন প্রয়োজন হয় না।
প্রধান বৈশিষ্ট্য:
- Rigid body dynamics: কঠিন বস্তুগুলোর গতিবিধি সিমুলেট করতে সক্ষম।
- Efficient performance: খুব দ্রুত এবং হালকা ভার্সনে কাজ করে।
- Collision detection: সংঘর্ষ সঠিকভাবে পরিচালনা করে।
উদাহরণ: Oimo.js ব্যবহার করে ফিজিক্স যোগ করা
// Scene এবং ইঞ্জিন তৈরি করা
var scene = new BABYLON.Scene(engine);
// Oimo.js ফিজিক্স ইঞ্জিন সেটআপ
var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.OimoJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5;
// ফিজিক্স বডি অ্যাসাইন করা
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
৩. Ammo.js
Ammo.js কি?
Ammo.js একটি শক্তিশালী এবং উন্নত ফিজিক্স ইঞ্জিন যা Bullet Physics Engine এর JavaScript ভার্সন। এটি উচ্চ-মানের 3D ফিজিক্স সিমুলেশন পরিচালনা করতে সক্ষম এবং বেশিরভাগ প্রফেশনাল 3D গেম এবং সিমুলেশনের জন্য উপযুক্ত। Ammo.js অত্যন্ত শক্তিশালী এবং সফট বডি সিমুলেশন, কঠিন বস্তু, সংঘর্ষ, গতি, এবং বল নির্ণয়ে দক্ষ।
প্রধান বৈশিষ্ট্য:
- Rigid body dynamics: শক্তিশালী rigid body dynamics সিমুলেশন।
- Soft body dynamics: sof body dynamics এর জন্য সমর্থন।
- Collision detection: অত্যন্ত উন্নত এবং নির্ভুল সংঘর্ষ সিস্টেম।
- Efficient performance: উচ্চমানের ফিজিক্স সিমুলেশন এবং উন্নত ক্যালকুলেশন সক্ষমতা।
উদাহরণ: Ammo.js ব্যবহার করে ফিজিক্স যোগ করা
// Scene এবং ইঞ্জিন তৈরি করা
var scene = new BABYLON.Scene(engine);
// Ammo.js ফিজিক্স ইঞ্জিন সেটআপ
var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.AmmoJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5;
// ফিজিক্স বডি অ্যাসাইন করা
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
Physics Engine গুলোর তুলনা
| ফিচার | Cannon.js | Oimo.js | Ammo.js |
|---|---|---|---|
| বিভাগ | শক্তিশালী, সমন্বিত | হালকা, দ্রুত | অত্যন্ত শক্তিশালী, প্রফেশনাল |
| Soft Body Simulation | কিছুটা সমর্থন | না | পূর্ণ সমর্থন |
| Collision Detection | খুব ভালো | ভালো | অত্যন্ত নির্ভুল |
| Performance | মাঝারি | দ্রুত এবং হালকা | শক্তিশালী এবং ধীর |
| নির্ভুলতা | ভাল | মাঝারি | উচ্চমানের |
সারাংশ
BabylonJS-এর সাথে ফিজিক্স ইঞ্জিন ব্যবহারে Cannon.js, Oimo.js, এবং Ammo.js তিনটি জনপ্রিয় অপশন রয়েছে। প্রতিটি ইঞ্জিনের আলাদা আলাদা বৈশিষ্ট্য এবং পারফরম্যান্স রয়েছে, তাই আপনার প্রজেক্টের প্রয়োজন অনুসারে ইঞ্জিনটি নির্বাচন করা উচিত। Cannon.js সহজ এবং মাঝারি গ্রাফিক্স সিমুলেশনের জন্য উপযুক্ত, Oimo.js দ্রুত এবং হালকা ইঞ্জিন, এবং Ammo.js উচ্চমানের ফিজিক্স সিমুলেশনের জন্য সবচেয়ে কার্যকরী।
BabylonJS একটি শক্তিশালী 3D ইঞ্জিন যা বিভিন্ন ধরনের ফিজিক্স সিমুলেশন সমর্থন করে। গ্র্যাভিটি, ভেলোসিটি (গতি), এবং কোলিশন ডিটেকশন (Collision Detection) হল এমন কিছু মূল ফিচার যা আপনার 3D প্রজেক্টে অবজেক্টের গতিশীলতা এবং বাস্তবতার অনুভূতি সৃষ্টি করতে সাহায্য করে। এই ফিচারগুলো ব্যবহার করে আপনি অবজেক্টের চলাচল এবং একে অপরের সাথে সংঘর্ষের (collision) প্রভাব খুব সহজে নিয়ন্ত্রণ করতে পারেন।
গ্র্যাভিটি (Gravity) এবং ভেলোসিটি (Velocity)
গ্র্যাভিটি এবং ভেলোসিটি 3D সিমুলেশনে অবজেক্টের গতি এবং মুভমেন্ট নিয়ন্ত্রণ করে। গ্র্যাভিটি সাধারণত পৃথিবীর মতো একটি শক্তি যা সব সময় নিচে দিকে কাজ করে। ভেলোসিটি অবজেক্টের গতির মাপ, যা দিক এবং গতির হার নির্দেশ করে।
গ্র্যাভিটি সেট করা
BabylonJS এ গ্র্যাভিটি সেট করতে, আপনি Scene অবজেক্টের gravity প্রপার্টি ব্যবহার করতে পারেন। এটি দৃশ্যের মধ্যে একটি সাধারণ গ্র্যাভিটি শক্তি সংজ্ঞায়িত করে।
scene.gravity = new BABYLON.Vector3(0, -0.9, 0); // নিচে দিকে গ্র্যাভিটি
scene.collisionsEnabled = true; // কোলিশন সক্ষম করা
কোড ব্যাখ্যা:
new BABYLON.Vector3(0, -0.9, 0): এই কোডটি গ্র্যাভিটির শক্তি এবং দিক নির্ধারণ করে। এখানে গ্র্যাভিটি নিচের দিকে (Y-অক্ষের নেগেটিভ দিক) কাজ করবে।scene.collisionsEnabled = true: কোলিশন ডিটেকশন সক্ষম করা হয়েছে, যা অবজেক্টের মধ্যে সংঘর্ষ শনাক্ত করবে।
ভেলোসিটি সেট করা
অবজেক্টের ভেলোসিটি (গতি) সেট করতে, আপনি physicsImpostor ব্যবহার করবেন। এখানে একটি সিম্পল উদাহরণ দেওয়া হল:
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
var boxPhysics = box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction: 0.5, restitution: 0.7}, scene);
// ভেলোসিটি সেট করা
boxPhysics.setLinearVelocity(new BABYLON.Vector3(0, 10, 0)); // X, Y, Z অক্ষের গতি
কোড ব্যাখ্যা:
new BABYLON.PhysicsImpostor: অবজেক্টকে ফিজিক্স সিমুলেশনের জন্য প্রস্তুত করতে ব্যবহার হয়।boxPhysics.setLinearVelocity(new BABYLON.Vector3(0, 10, 0)): এখানে Y-অক্ষের জন্য গতি দেওয়া হয়েছে (10 ইউনিট উপরের দিকে)।
কোলিশন ডিটেকশন (Collision Detection)
কোলিশন ডিটেকশন এমন একটি প্রক্রিয়া যেখানে একাধিক 3D অবজেক্টের মধ্যে সংঘর্ষের ঘটনা শনাক্ত করা হয়। BabylonJS এ, আপনি কোলিশন ডিটেকশন সহজেই চালু করতে পারেন। কোলিশন ঘটানোর জন্য দুইটি অবজেক্টের মধ্যে কমপ্লেক্স ফিজিক্স ইন্টারঅ্যাকশন থাকতে হয়।
কোলিশন ডিটেকশন সক্ষম করা
কোলিশন ডিটেকশন চালু করতে, আপনাকে collisionsEnabled এবং checkCollisions ব্যবহার করতে হবে।
// গ্র্যাভিটি এবং কোলিশন সক্রিয় করা
scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
scene.collisionsEnabled = true;
// বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.checkCollisions = true; // কোলিশন চেকিং চালু করা
// গ্রাউন্ড তৈরি করা
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
ground.checkCollisions = true; // কোলিশন চেকিং চালু করা
কোড ব্যাখ্যা:
box.checkCollisions = true;: এই প্রপার্টি সেট করা হলে, বক্সটি কোলিশন ডিটেকশন করবে।ground.checkCollisions = true;: একইভাবে, গ্রাউন্ডেও কোলিশন ডিটেকশন চালু করা হয়েছে।
কোলিশন ইভেন্টের জন্য হ্যান্ডলার সেট করা
কোলিশন ডিটেকশন করার পর, আপনি onCollide ইভেন্ট ব্যবহার করে কোলিশন শনাক্ত করতে পারেন এবং কোলিশন ঘটানোর পর কী ঘটবে তা নির্ধারণ করতে পারেন।
box.onCollide = function (mesh) {
console.log("বক্সটি " + mesh.name + " এর সাথে কোলিশন করেছে!");
// কোলিশন পরবর্তী কোনো কাজ করুন
};
কোড ব্যাখ্যা:
box.onCollide: এই হ্যান্ডলারটি বক্সের কোলিশন ঘটলে ট্রিগার হবে এবং আপনি ইভেন্টটি শনাক্ত করতে পারবেন।
গ্র্যাভিটি, ভেলোসিটি এবং কোলিশন ডিটেকশন সহ একটি সিম্পল 3D দৃশ্য
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Gravity, Velocity and Collision</title>
<script src="https://cdn.babylonjs.com/babylon.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);
light.intensity = 0.7;
// গ্র্যাভিটি এবং কোলিশন সক্রিয় করা
scene.gravity = new BABYLON.Vector3(0, -9.81, 0);
scene.collisionsEnabled = true;
// বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5; // বক্সকে উপরে রাখুন
box.checkCollisions = true;
// গ্রাউন্ড তৈরি করা
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
ground.checkCollisions = true;
// Physics Impostor যুক্ত করা
var boxPhysics = box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1, friction: 0.5, restitution: 0.7}, scene);
boxPhysics.setLinearVelocity(new BABYLON.Vector3(0, -5, 0)); // নিচে গতি দেওয়া
// কোলিশন ইভেন্ট
box.onCollide = function (mesh) {
console.log("বক্সটি " + mesh.name + " এর সাথে কোলিশন করেছে!");
};
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
সারাংশ
BabylonJS এ গ্র্যাভিটি, ভেলোসিটি এবং কোলিশন ডিটেকশন ব্যবহারের মাধ্যমে আপনি 3D অবজেক্টের চলাচল এবং তাদের মধ্যে সংঘর্ষের ইন্টারঅ্যাকশন সিমুলেট করতে পারেন। গ্র্যাভিটি অবজেক্টকে পৃথিবীর মতো প্রভাবিত করে, ভেলোসিটি তাদের গতি নিয়ন্ত্রণ করে এবং কোলিশন ডিটেকশন অবজেক্টগুলোর মধ্যে সংঘর্ষ শনাক্ত করে। এই সবগুলো একসাথে ব্যবহার করলে 3D সিমুলেশন আরো বাস্তবসম্মত এবং ইন্টারেকটিভ হয়।
BabylonJS তে Physics ব্যবহার করে 3D অবজেক্টের মধ্যে বাস্তবসম্মত গতিবিধি এবং ইন্টারঅ্যাকশন তৈরি করা যায়। যেমন, বাউন্সিং (bouncing) বা স্লাইডিং (sliding) ইফেক্ট প্রয়োগ করতে পারবেন, যা 3D গেম এবং সিমুলেশনগুলির জন্য অত্যন্ত গুরুত্বপূর্ণ। Physics ইঞ্জিন ব্যবহার করলে, আপনি অবজেক্টগুলিকে আরো বাস্তবসম্মতভাবে মুভ করাতে পারেন এবং বিভিন্ন ধরনের শারীরিক সংঘর্ষ বা প্রতিক্রিয়া দেখতে পারবেন।
BabylonJS তে Physics যোগ করতে আমরা সাধারণত Cannon.js বা Oimo.js মতো ফিজিক্স ইঞ্জিন ব্যবহার করি।
Physics-ভিত্তিক Interaction সেটআপ
১. Physics ইঞ্জিন সেটআপ
প্রথমে Physics ইঞ্জিন সক্রিয় করতে হবে এবং Physics World তৈরি করতে হবে, যাতে আমরা ফিজিক্স সম্পর্কিত ইন্টারঅ্যাকশন (যেমন বাউন্সিং, স্লাইডিং) করতে পারি।
২. Physics ইঞ্জিন ব্যবহার করার জন্য Cannon.js ইনস্টল করা
আমরা Cannon.js ফিজিক্স ইঞ্জিন ব্যবহার করব, যা BabylonJS এর সাথে খুব ভালো কাজ করে।
স্টেপ ১: Cannon.js যুক্ত করা
CDN থেকে Cannon.js লোড করতে নিম্নলিখিত কোডটি HTML ফাইলে যুক্ত করুন:
<script src="https://cdn.babylonjs.com/cannon.js"></script>
৩. বাউন্সিং (Bouncing) ইফেক্ট
বাউন্সিং একটি সাধারণ শারীরিক প্রক্রিয়া যেখানে একটি অবজেক্ট যখন অন্য কোনো পৃষ্ঠের সাথে সংঘর্ষ করে, তখন সেটি ফিরে আসে বা "বাউন্স" করে। এই ইফেক্ট সিমুলেট করতে Physics ইঞ্জিনে restitution প্রোপার্টি ব্যবহার করা হয়।
বাউন্সিং ইফেক্ট ইমপ্লিমেন্ট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Physics - Bouncing Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/cannon.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);
// Physics ইঞ্জিন সেটআপ
var gravityVector = new BABYLON.Vector3(0, -9.81, 0); // গ্র্যাভিটি
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// ক্যামেরা
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 box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5;
// বক্সের জন্য Physics প্রপার্টি
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, restitution: 0.7 }, scene);
// গ্রাউন্ড তৈরি
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 20, height: 20}, scene);
// গ্রাউন্ডের জন্য Physics প্রপার্টি
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.GroundImpostor, { restitution: 0.7 }, scene);
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- PhysicsImpostor:
box.physicsImpostorএবংground.physicsImpostorব্যবহার করে ফিজিক্স প্রপার্টি যোগ করা হয়েছে।restitutionপ্রোপার্টি বাউন্সিং এর জন্য ব্যবহৃত হয়। 0.7 মানে হল যে, বক্সটি 70% শক্তি ফিরে পাবে এবং 30% শক্তি হারাবে। - GroundImpostor: গ্রাউন্ডের জন্য Physics impostor হিসাবে
GroundImpostorব্যবহার করা হয়েছে।
৪. স্লাইডিং (Sliding) ইফেক্ট
স্লাইডিং ইফেক্টে, একটি অবজেক্ট তার পৃষ্ঠের ওপর স্লাইড (এবং গড়ানো) করে। এই ইফেক্ট সিমুলেট করার জন্য friction প্রোপার্টি ব্যবহার করা হয়। একটি কম friction মান অবজেক্টকে দ্রুত স্লাইড করতে সহায়ক হয়, এবং উচ্চ friction মান অবজেক্টের গতিকে দমন করে।
স্লাইডিং ইফেক্ট ইমপ্লিমেন্ট করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Physics - Sliding Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/cannon.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);
// Physics ইঞ্জিন সেটআপ
var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);
// ক্যামেরা
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 box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 5;
// বক্সের জন্য Physics প্রপার্টি
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, friction: 0.1 }, scene);
// গ্রাউন্ড তৈরি
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 20, height: 20}, scene);
// গ্রাউন্ডের জন্য Physics প্রপার্টি
ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.GroundImpostor, { friction: 0.05 }, scene);
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- friction: বক্স এবং গ্রাউন্ডের জন্য friction প্রপার্টি নির্ধারণ করা হয়েছে।
friction: 0.1মানে কম ঘর্ষণ, ফলে বক্সটি স্লাইড করবে। গ্রাউন্ডের জন্য ঘর্ষণ কম করা হয়েছে (0.05) যাতে বক্সটি দ্রুত স্লাইড করে।
সারাংশ
- Bouncing: বাউন্সিং ইফেক্টের জন্য
restitutionপ্রোপার্টি ব্যবহার করা হয়, যা একটি অবজেক্টের প্রতিক্রিয়া নির্ধারণ করে, যখন তা অন্য অবজেক্টের সাথে সংঘর্ষ করে। - Sliding: স্লাইডিং ইফেক্টের জন্য
frictionপ্রোপার্টি ব্যবহার করা হয়, যা অবজেক্টের চলার গতির উপর প্রভাব ফেলে। কম ফ্রিকশনের মানে বেশি স্লাইডিং।
BabylonJS এ Physics ইঞ্জিন যোগ করে, আপনি 3D দৃশ্যে বাউন্সিং এবং স্লাইডিং এর মতো বাস্তবসম্মত ইন্টারঅ্যাকশন
তৈরি করতে পারেন।
Read more
