Particle Movement এবং Behaviors

Three.js এবং পার্টিকেল সিস্টেম

Three.js একটি শক্তিশালী JavaScript লাইব্রেরি যা 3D গ্রাফিক্স এবং ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়। এটি WebGL-এর উপর ভিত্তি করে কাজ করে এবং জাভাস্ক্রিপ্টের মাধ্যমে ব্রাউজারে 3D কনটেন্ট প্রদর্শনের সুযোগ দেয়। Particle Systems হল 3D গ্রাফিক্সে এমন একটি কৌশল যা একাধিক ছোট অবজেক্ট (পার্টিকেল) ব্যবহার করে একটি বিশেষ ইফেক্ট তৈরি করতে সাহায্য করে, যেমন ধোঁয়া, আগুন, বৃষ্টি, স্নোফল ইত্যাদি।

এই গাইডে আমরা Three.js ব্যবহার করে পার্টিকেল মুভমেন্ট এবং এর বিহেভিয়ার সেটআপ করার পদ্ধতি আলোচনা করব।

পার্টিকেল সিস্টেম কী?

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

পার্টিকেল সিস্টেম ব্যবহৃত হয় বিভিন্ন ধরনের সিমুলেশন তৈরি করার জন্য, যেমন:

• আগুন
• ধোঁয়া
• বৃষ্টি
• স্নোফল
• বিস্ফোরণ

Three.js এ পার্টিকেল সিস্টেম তৈরি করা

Three.js-এ পার্টিকেল সিস্টেম তৈরি করতে Points, Geometry, এবং Material ব্যবহার করা হয়। একটি সাধারণ পার্টিকেল সিস্টেমে Particles বিভিন্ন ভিজ্যুয়াল আচরণ অনুযায়ী গতি পরিবর্তন করতে পারে।

১. Basic Particle Setup:

একটি পার্টিকেল সিস্টেম তৈরি করতে আমরা প্রথমে একটি Geometry তৈরি করি, যেখানে প্রতিটি পার্টিকেলের জন্য একটি পজিশন থাকে। তারপর Material সেট করে পার্টিকেলটির ভিজ্যুয়াল প্রোপার্টি যেমন রঙ, আকার, এবং পদ্ধতি নির্ধারণ করি। শেষে, আমরা Points অবজেক্ট ব্যবহার করে এটি একটি গ্রুপে একত্রিত করি।

// Scene, Camera, Renderer Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Particle Geometry and Material
const particles = 10000;
const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
for (let i = 0; i < particles; i++) {
  // Random positions for each particle
  positions.push(Math.random() * 2000 - 1000);
  positions.push(Math.random() * 2000 - 1000);
  positions.push(Math.random() * 2000 - 1000);

  // Random color for each particle
  colors.push(Math.random());
  colors.push(Math.random());
  colors.push(Math.random());
}

// Add positions and colors to geometry
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

// Material for particles
const material = new THREE.PointsMaterial({ size: 1, vertexColors: true });

// Particle System
const particleSystem = new THREE.Points(geometry, material);
scene.add(particleSystem);

// Camera position
camera.position.z = 500;

// Animation loop
function animate() {
  requestAnimationFrame(animate);

  // Rotate particles
  particleSystem.rotation.x += 0.001;
  particleSystem.rotation.y += 0.001;

  // Render the scene
  renderer.render(scene, camera);
}

animate();

এখানে, Three.js এর BufferGeometry ব্যবহার করে পার্টিকেলগুলির পজিশন এবং রঙ নির্ধারণ করা হয়েছে, এবং PointsMaterial ব্যবহার করে পার্টিকেলগুলির আকার এবং রঙ নিয়ন্ত্রণ করা হয়েছে। Animation Loop এর মধ্যে পার্টিকেল সিস্টেমটিকে ঘোরানো হয়েছে।

২. পার্টিকেল মুভমেন্ট এবং বিহেভিয়ার (Behavior)

পার্টিকেল সিস্টেমে পার্টিকেলগুলোর movement এবং behavior পরিবর্তন করা যেতে পারে। আপনি চাইলে পার্টিকেলগুলোর গতির সাথে কিছু ইফেক্ট যুক্ত করতে পারেন, যেমন:

• গতি পরিবর্তন
• বাহ্যিক শক্তি প্রভাব (যেমন গ্রাভিটি)
• র্যান্ডম ডিরেকশন

এখানে, আমরা পার্টিকেলগুলোর গতিতে কিছু পরিবর্তন আনব:

// Particle Movement with Random Velocity
const particleVelocity = [];
for (let i = 0; i < particles; i++) {
  particleVelocity.push(Math.random() * 2 - 1); // Random velocity for X
  particleVelocity.push(Math.random() * 2 - 1); // Random velocity for Y
  particleVelocity.push(Math.random() * 2 - 1); // Random velocity for Z
}

// Update Particle Position Based on Velocity
function animate() {
  requestAnimationFrame(animate);

  // Move particles based on velocity
  for (let i = 0; i < particles; i++) {
    positions[i * 3] += particleVelocity[i * 3];
    positions[i * 3 + 1] += particleVelocity[i * 3 + 1];
    positions[i * 3 + 2] += particleVelocity[i * 3 + 2];

    // Apply gravity effect to Y (downward)
    particleVelocity[i * 3 + 1] -= 0.01; // Simulate gravity

    // Update position buffer
    geometry.attributes.position.needsUpdate = true;
  }

  particleSystem.rotation.x += 0.001;
  particleSystem.rotation.y += 0.001;

  // Render the scene
  renderer.render(scene, camera);
}

animate();

এখানে, প্রতিটি পার্টিকেলকে একটি velocity দেওয়া হয়েছে, যা এর গতি এবং দিক নির্ধারণ করে। আমরা একটি সিম্পল gravity প্রভাবও যুক্ত করেছি, যেখানে Y-অক্ষের উপর গতি কমিয়ে আসছে, এটি পার্টিকেলগুলোকে নিচের দিকে টেনে নিয়ে আসে।

৩. পার্টিকেল সিস্টেমে Behaviors প্রয়োগ

পার্টিকেল সিস্টেমের behavior নির্ধারণের জন্য আপনি আরও জটিল কৌশল প্রয়োগ করতে পারেন। কিছু সাধারণ পার্টিকেল behaviors হচ্ছে:

• Attraction/Repulsion: পার্টিকেলগুলো একে অপরের দিকে বা একে অপর থেকে সরে যেতে পারে।
• Flocking Behavior: পার্টিকেলগুলো একে অপরের কাছাকাছি চলে আসে বা একটি নির্দিষ্ট দিকের দিকে চলে যেতে পারে।
• Swarming Effect: পার্টিকেলগুলো একে অপরের সাথে সমন্বিতভাবে চলতে পারে।

Flocking Behavior উদাহরণ:

// Function for flocking behavior
function applyFlocking(particleIndex) {
  const particle = new THREE.Vector3(positions[particleIndex * 3], positions[particleIndex * 3 + 1], positions[particleIndex * 3 + 2]);
  const target = new THREE.Vector3(0, 0, 0); // The center of the scene
  
  // Move towards the target
  const direction = target.sub(particle).normalize();
  const speed = 0.1;
  particleVelocity[particleIndex * 3] += direction.x * speed;
  particleVelocity[particleIndex * 3 + 1] += direction.y * speed;
  particleVelocity[particleIndex * 3 + 2] += direction.z * speed;
}

এখানে, applyFlocking ফাংশনটি পার্টিকেলগুলোকে দৃশ্যের কেন্দ্রে টেনে আনার জন্য একটি লক্ষ্যস্থল তৈরি করেছে।

সারাংশ

Three.js ব্যবহার করে পার্টিকেল সিস্টেম তৈরি করা এবং বিভিন্ন movement ও behavior প্রয়োগ করা খুবই শক্তিশালী এবং দারুণ ভিজ্যুয়াল ইফেক্ট তৈরি করতে সহায়ক। আপনি পার্টিকেল সিস্টেমে velocity, gravity, flocking behavior ইত্যাদি ফিচার যুক্ত করে আকর্ষণীয় এবং বাস্তবসম্মত ইফেক্ট তৈরি করতে পারেন। Three.js এর পার্টিকেল সিস্টেম অত্যন্ত কাস্টমাইজযোগ্য এবং এটি আপনার প্রোজেক্টে নতুন মাত্রা যোগ করতে পারে।