ফিজিক্স ইঞ্জিন কি?
ফিজিক্স ইঞ্জিন (Physics Engine) একটি সফটওয়্যার লাইব্রেরি বা কোড যা ভার্চুয়াল বিশ্বে বস্তুগুলির চলাফেরা এবং ইন্টারঅ্যাকশন প্রক্রিয়া মডেলিং করে। এটি গতি, বল, গ্র্যাভিটি (gravity), কলিশন (collision) ইত্যাদি উপাদান সিমুলেট করতে ব্যবহৃত হয়। ওয়েবজিএল-এর সাথে ফিজিক্স ইঞ্জিন ইন্টিগ্রেট করার মাধ্যমে 3D গেমস, সিমুলেশন, এবং ভিজ্যুয়ালাইজেশন আরও ইন্টারঅ্যাকটিভ এবং বাস্তবসম্মত (realistic) হতে পারে।
প্রধানত দুটি ফিজিক্স ইঞ্জিন যা ওয়েবজিএল-এ ইন্টিগ্রেট করা হয়, তা হল:
- Cannon.js
- Ammo.js
এগুলো ওয়েবজিএল-এর সঙ্গে ইন্টিগ্রেট করা যায়, যার মাধ্যমে আপনি 3D অবজেক্টের ফিজিক্স সিমুলেশন পরিচালনা করতে পারবেন।
Cannon.js ইন্টিগ্রেশন
Cannon.js একটি ওপেন সোর্স জাভাস্ক্রিপ্ট ফিজিক্স ইঞ্জিন যা WebGL এবং Three.js এর সঙ্গে সহজে ইন্টিগ্রেট করা যায়। এটি প্রধানত rigid body dynamics এবং অন্যান্য ফিজিক্যাল প্রপার্টি সিমুলেট করে।
১. Cannon.js ইন্টিগ্রেশন প্রক্রিয়া
প্রথমে Cannon.js লাইব্রেরিটি আপনার প্রকল্পে যুক্ত করতে হবে:
<script src="https://cdn.jsdelivr.net/npm/cannon-es@0.18.0"></script>
এরপর একটি বেসিক Cannon.js সিমুলেশন তৈরি করা যেতে পারে, যেখানে 3D অবজেক্টগুলি সিমুলেট করা হবে।
// 1. WebGL কনটেক্সট এবং Three.js সিমুলেশন তৈরি করা
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Cannon.js বিশ্ব তৈরি করা
var world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // গ্র্যাভিটি
// 3. Cannon.js বডি তৈরি করা
var sphereShape = new CANNON.Sphere(1); // বল আকৃতির বডি
var sphereBody = new CANNON.Body({
mass: 1,
position: new CANNON.Vec3(0, 5, 0) // স্টার্ট পজিশন
});
sphereBody.addShape(sphereShape);
world.addBody(sphereBody);
// 4. Three.js-এ বডি ভিজ্যুয়াল তৈরি করা
var geometry = new THREE.SphereGeometry(1);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var sphereMesh = new THREE.Mesh(geometry, material);
scene.add(sphereMesh);
// 5. অ্যানিমেশন লুপ তৈরি করা
function animate() {
requestAnimationFrame(animate);
// Cannon.js-এ ফিজিক্স আপডেট
world.step(1/60);
// Three.js-এ Cannon.js বডির অবস্থান আপডেট করা
sphereMesh.position.copy(sphereBody.position);
sphereMesh.quaternion.copy(sphereBody.quaternion);
// রেন্ডারিং
renderer.render(scene, camera);
}
animate();
এখানে, আমরা একটি বল (sphere) তৈরি করেছি যা Cannon.js দ্বারা ফিজিক্স প্রক্রিয়ায় সিমুলেট হচ্ছে এবং সেই বলটি Three.js দিয়ে রেন্ডার করা হচ্ছে। world.step() ফাংশন প্রতি ফ্রেমে Cannon.js-এর ফিজিক্স সিমুলেশন আপডেট করে।
Ammo.js ইন্টিগ্রেশন
Ammo.js একটি জাভাস্ক্রিপ্ট ফিজিক্স ইঞ্জিন যা Bullet Physics ইঞ্জিনের একটি পোর্ট। এটি 3D গেমস এবং সিমুলেশন তৈরি করার জন্য উচ্চ-কার্যকর ফিজিক্স সিমুলেশন প্রদান করে।
১. Ammo.js ইন্টিগ্রেশন প্রক্রিয়া
Ammo.js লাইব্রেরিটি আপনার প্রকল্পে যুক্ত করতে হবে:
<script src="https://cdn.jsdelivr.net/npm/ammo.js@0.0.9/ammo.js"></script>
এরপর Ammo.js ব্যবহার করে একটি বেসিক ফিজিক্স সিমুলেশন তৈরি করা যেতে পারে:
// 1. WebGL কনটেক্সট এবং Three.js সিমুলেশন তৈরি করা
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Ammo.js ফিজিক্স সিস্টেম তৈরি করা
Ammo().then(function(AmmoLib) {
var world = new AmmoLib.btDiscreteDynamicsWorld(
new AmmoLib.btDefaultCollisionConfiguration(),
new AmmoLib.btCollisionDispatcher(),
new AmmoLib.btDbvtBroadphase(),
new AmmoLib.btSequentialImpulseConstraintSolver()
);
// 3. Ammo.js বডি তৈরি করা
var mass = 1;
var radius = 1;
var startPosition = new AmmoLib.btVector3(0, 5, 0);
var shape = new AmmoLib.btSphereShape(radius);
var motionState = new AmmoLib.btDefaultMotionState(new AmmoLib.btTransform());
var localInertia = new AmmoLib.btVector3(0, 0, 0);
shape.calculateLocalInertia(mass, localInertia);
var rbInfo = new AmmoLib.btRigidBodyConstructionInfo(mass, motionState, shape, localInertia);
var body = new AmmoLib.btRigidBody(rbInfo);
world.addRigidBody(body);
// 4. Three.js-এ ভিজ্যুয়াল তৈরি করা
var geometry = new THREE.SphereGeometry(1);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 5. অ্যানিমেশন লুপ তৈরি করা
function animate() {
requestAnimationFrame(animate);
// Ammo.js-এ ফিজিক্স আপডেট
world.stepSimulation(1/60, 10);
// Three.js-এ Ammo.js বডির অবস্থান আপডেট করা
var motionState = body.getMotionState();
if (motionState) {
var transform = new AmmoLib.btTransform();
motionState.getWorldTransform(transform);
var origin = transform.getOrigin();
sphere.position.set(origin.x(), origin.y(), origin.z());
}
// রেন্ডারিং
renderer.render(scene, camera);
}
animate();
});
এখানে, Ammo.js ব্যবহার করে একটি বল তৈরি করা হয়েছে এবং Three.js-এর মাধ্যমে সেই বলটিকে রেন্ডার করা হচ্ছে। Ammo.js এর world.stepSimulation() ফাংশন ফিজিক্স সিমুলেশন আপডেট করে এবং সেই অনুযায়ী 3D অবজেক্টের অবস্থান আপডেট করা হয়।
সারাংশ
Cannon.js এবং Ammo.js হল দুটি জনপ্রিয় ফিজিক্স ইঞ্জিন যা ওয়েবজিএল-এর সাথে ইন্টিগ্রেট করে 3D গেমস এবং সিমুলেশন তৈরি করতে ব্যবহৃত হয়। Cannon.js একটি সহজ, কিন্তু শক্তিশালী ফিজিক্স ইঞ্জিন যা ওয়েবজিএল এবং Three.js-এর সাথে ভালভাবে কাজ করে, যখন Ammo.js আরও উন্নত ফিচার এবং উন্নত ফিজিক্স সিমুলেশন প্রদান করে। উভয়ই 3D অবজেক্টগুলির রিগিড বডি (rigid body), বল (force), এবং গ্র্যাভিটি (gravity) সিমুলেট করতে ব্যবহৃত হয়, যা ওয়েবজিএল প্রজেক্টগুলিকে আরও ইন্টারঅ্যাকটিভ এবং বাস্তবসম্মত করে তোলে।
Read more
