Particles এবং Special Effects গাইড ও নোট

BabylonJS-এ পারটিকল সিস্টেম এবং স্পেশাল এফেক্টস অত্যন্ত শক্তিশালী টুলস যা 3D দৃশ্যে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ দৃশ্য তৈরি করতে সাহায্য করে। পারটিকল সিস্টেম ব্যবহার করে আপনি আগুন, ধোঁয়া, বৃষ্টি, বা অন্যান্য বিশেষ প্রাকৃতিক উপাদান সৃষ্টির জন্য বাস্তবসম্মত অ্যানিমেশন তৈরি করতে পারেন। এই ধরনের প্রভাবগুলি দৃশ্যের বাস্তবসম্মততা এবং ডাইনামিক চরিত্র যোগ করে।

এই গাইডে, আমরা BabylonJS-এ পারটিকল সিস্টেম এবং স্পেশাল এফেক্টস তৈরি এবং ব্যবহারের প্রক্রিয়া দেখব।

১. পারটিকল সিস্টেম (Particle Systems)

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

পারটিকল সিস্টেম সেটআপ

var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

// পারটিকল এমিটার সেট করা
particleSystem.emitter = new BABYLON.Vector3(0, 1, 0); // এমিটার অবস্থান

// পারটিকল এর ধরন এবং রঙ
particleSystem.particleTexture = new BABYLON.Texture("textures/flare.png", scene); // পারটিকলের টেক্সচার
particleSystem.startColor = new BABYLON.Color4(1, 1, 0, 1); // শুরু রঙ (Yellow)
particleSystem.endColor = new BABYLON.Color4(1, 0, 0, 1); // শেষ রঙ (Red)

// পারটিকলের জীবনকাল, স্পিড এবং আকার
particleSystem.minLifeTime = 0.3;
particleSystem.maxLifeTime = 1;
particleSystem.minSize = 0.1;
particleSystem.maxSize = 1;
particleSystem.emitRate = 1000; // প্রতি সেকেন্ডে কতটা পারটিকল সৃষ্টি হবে

// পারটিকল সিস্টেম শুরু করা
particleSystem.start();

এখানে:

• emitter: এটি সেই জায়গা যেখানে থেকে পারটিকলগুলি নির্গত হবে।
• particleTexture: পারটিকলের টেক্সচার নির্ধারণ করে (এখানে একটি ফ্লেয়ার টেক্সচার ব্যবহার করা হয়েছে)।
• startColor এবং endColor: পারটিকলের রঙের গ্র্যাডিয়েন্ট।
• minLifeTime এবং maxLifeTime: পারটিকলের জীবনকাল।
• emitRate: প্রতি সেকেন্ডে কতটা পারটিকল নির্গত হবে।

২. স্পেশাল এফেক্টস (Special Effects)

BabylonJS-এ আপনি পারটিকল সিস্টেমের মাধ্যমে একাধিক স্পেশাল এফেক্টস তৈরি করতে পারেন, যেমন আগুন, ধোঁয়া, বিস্ফোরণ, অথবা ঝড়ের প্রভাব।

আগুন (Fire) এবং ধোঁয়া (Smoke) এর জন্য পারটিকল সিস্টেম

আগুন এবং ধোঁয়া তৈরি করতে পারটিকল সিস্টেমের উপরে কিছু বিশেষ পরিবর্তন করা যায়।

আগুনের প্রভাব:

var fireParticleSystem = new BABYLON.ParticleSystem("fire", 2000, scene);
fireParticleSystem.particleTexture = new BABYLON.Texture("textures/fire.png", scene);
fireParticleSystem.emitter = new BABYLON.Vector3(0, 1, 0);
fireParticleSystem.minLifeTime = 0.5;
fireParticleSystem.maxLifeTime = 1.5;
fireParticleSystem.emitRate = 500;
fireParticleSystem.startColor = new BABYLON.Color4(1, 0, 0, 1); // Red
fireParticleSystem.endColor = new BABYLON.Color4(0, 0, 0, 0); // Black (transparent)
fireParticleSystem.start();

এখানে, fire টেক্সচার এবং red থেকে black রঙ গ্র্যাডিয়েন্ট ব্যবহার করা হয়েছে আগুনের প্রভাব তৈরি করতে।

ধোঁয়ার প্রভাব:

var smokeParticleSystem = new BABYLON.ParticleSystem("smoke", 1000, scene);
smokeParticleSystem.particleTexture = new BABYLON.Texture("textures/smoke.png", scene);
smokeParticleSystem.emitter = new BABYLON.Vector3(0, 1, 0);
smokeParticleSystem.minLifeTime = 0.7;
smokeParticleSystem.maxLifeTime = 2;
smokeParticleSystem.emitRate = 300;
smokeParticleSystem.startColor = new BABYLON.Color4(0.5, 0.5, 0.5, 1); // Grey
smokeParticleSystem.endColor = new BABYLON.Color4(0, 0, 0, 0); // Transparent
smokeParticleSystem.start();

এখানে smoke টেক্সচার এবং ধোঁয়ার জন্য গ্রে থেকে ট্রান্সপ্যারেন্ট রঙ গ্র্যাডিয়েন্ট ব্যবহার করা হয়েছে।

৩. স্পেশাল এফেক্টস: বৃষ্টি (Rain) এবং স্নো (Snow)

বৃষ্টি এবং স্নো তৈরি করতে, আপনি পারটিকল সিস্টেমের মাধ্যমে ছোট ছোট পারটিকল তৈরি করতে পারেন যা উপরের দিকে নামবে।

বৃষ্টি (Rain) এর জন্য পারটিকল সিস্টেম:

var rainParticleSystem = new BABYLON.ParticleSystem("rain", 5000, scene);
rainParticleSystem.particleTexture = new BABYLON.Texture("textures/rain.png", scene);
rainParticleSystem.emitter = new BABYLON.Vector3(0, 10, 0);
rainParticleSystem.minLifeTime = 0.5;
rainParticleSystem.maxLifeTime = 2;
rainParticleSystem.emitRate = 1000;
rainParticleSystem.minSize = 0.1;
rainParticleSystem.maxSize = 0.2;
rainParticleSystem.direction1 = new BABYLON.Vector3(-1, -5, -1); // বৃষ্টি নিচে আসবে
rainParticleSystem.direction2 = new BABYLON.Vector3(1, -5, 1); // বৃষ্টি নামবে
rainParticleSystem.start();

স্নো (Snow) এর জন্য পারটিকল সিস্টেম:

var snowParticleSystem = new BABYLON.ParticleSystem("snow", 2000, scene);
snowParticleSystem.particleTexture = new BABYLON.Texture("textures/snowflake.png", scene);
snowParticleSystem.emitter = new BABYLON.Vector3(0, 10, 0);
snowParticleSystem.minLifeTime = 1.5;
snowParticleSystem.maxLifeTime = 3;
snowParticleSystem.emitRate = 500;
snowParticleSystem.minSize = 0.1;
snowParticleSystem.maxSize = 0.5;
snowParticleSystem.direction1 = new BABYLON.Vector3(-1, -1, 0);
snowParticleSystem.direction2 = new BABYLON.Vector3(1, -1, 0);
snowParticleSystem.start();

৪. পারটিকল সিস্টেম এবং স্পেশাল এফেক্টস-এর উন্নত কৌশল

Force Fields:

পারটিকল সিস্টেমের মধ্যে Force Fields যোগ করে আপনি গতি, দিক এবং পরিবেশগত প্রভাব (যেমন, বাতাস, পানির প্রবাহ) তৈরি করতে পারেন। এটি আপনাকে আরও বাস্তবসম্মত এবং ডাইনামিক এফেক্টস তৈরি করতে সহায়তা করে।

var windForce = new BABYLON.Vector3(0, 0, -1);
particleSystem.direction1 = windForce;
particleSystem.direction2 = windForce;

Collision Detection:

পারটিকল সিস্টেমের পারটিকলগুলোর জন্য Collision Detection সেটআপ করা যায়, যাতে এগুলি একটি নির্দিষ্ট অবজেক্ট বা মেঝে স্পর্শ করলে থেমে যায় বা বOUNCE করে।

particleSystem.isBillboardBased = true;
particleSystem.bounce = 0.5; // পারটিকল কিছু সময়ের জন্য ফিরে আসবে
particleSystem.collisionsEnabled = true;

Color Over Life:

পারটিকলের রঙ লাইফটাইম এর সাথে পরিবর্তন করতে পারেন, যা একাধিক পর্যায়ে রঙের পরিবর্তন ঘটায়।

var colorGradient = new BABYLON.ColorGradient();
colorGradient.addColor(0, new BABYLON.Color4(1, 0, 0, 1)); // Red at the start
colorGradient.addColor(1, new BABYLON.Color4(0,

0, 1, 1)); // Blue at the end particleSystem.colorGradients = [colorGradient];

---

## সারাংশ

BabylonJS-এ **পারটিকল সিস্টেম** এবং **স্পেশাল এফেক্টস** আপনাকে অত্যন্ত বাস্তবসম্মত দৃশ্য এবং ডাইনামিক পরিবেশ তৈরি করতে সাহায্য করে। আপনি পারটিকল সিস্টেমের মাধ্যমে আগুন, ধোঁয়া, বৃষ্টি, স্নো, বিস্ফোরণ এবং অন্যান্য প্রাকৃতিক প্রভাব তৈরি করতে পারেন। এই সিস্টেমের মাধ্যমে আপনি টেক্সচার, রঙ, লাইফটাইম, এবং গতি ইত্যাদি নিয়ন্ত্রণ করে বিভিন্ন বাস্তবসম্মত দৃশ্য সৃষ্টি করতে সক্ষম হন।

Particle System হলো একটি গ্রাফিক্স পদ্ধতি যা ব্যবহৃত হয় বিভিন্ন প্রাকৃতিক দৃশ্য বা ফিজিক্যাল ইফেক্ট সিমুলেট করার জন্য, যেমন ধোঁয়া, আগুন, বৃষ্টি, তুষারপাত বা অন্যান্য প্রাকৃতিক উপাদান। এই সিস্টেমটি শত শত বা হাজার হাজার ছোট ছোট particles তৈরি করে, যা একটি নির্দিষ্ট গতিতে এবং উপায়ে চলতে থাকে। BabylonJS এ Particle System একটি শক্তিশালী টুল, যা গেম ডেভেলপমেন্ট, এনিমেশন এবং অন্যান্য গ্রাফিক্স প্রোজেক্টে বাস্তবসম্মত ইফেক্ট তৈরি করতে ব্যবহৃত হয়।

Particle System কি?

Particle System হলো একটি সিস্টেম যেখানে একাধিক ছোট ছোট particles একটি নির্দিষ্ট অঞ্চলে সৃষ্টি হয় এবং পরে বিভিন্ন গতিতে চলতে থাকে। প্রতিটি particle এক একটি ছোট অবজেক্ট হিসেবে কাজ করে এবং এটি নিজের গতির সাথে নির্দিষ্ট দিশায় চলে, সময়ের সাথে তার অবস্থান, আকার বা গুণাবলী পরিবর্তিত হয়। এই পদ্ধতি সাধারণত ফিজিক্যাল ইফেক্ট যেমন আগুন, ধোঁয়া, বৃষ্টি, তুষারপাত, এবং অন্যান্য প্রাকৃতিক ইফেক্ট তৈরি করতে ব্যবহৃত হয়।

BabylonJS এ Particle System ব্যবহারের মাধ্যমে আপনি সহজেই এমন ইফেক্ট তৈরি করতে পারেন যা আপনার দৃশ্যকে আরো জীবন্ত এবং বাস্তবসম্মত করে তোলে।

Particle System এর প্রধান উপাদান

1. Emitter (এমিটার): এটি হলো সেই উৎস, যেখানে থেকে পার্টিকেলগুলো সৃষ্টি হয়। সাধারণত এটি একটি পয়েন্ট, পৃষ্ঠ, অথবা একটি 3D অবজেক্ট হতে পারে।
2. Particles (পার্টিকল): ছোট ছোট অবজেক্টগুলি, যা এমিটার থেকে বের হয়ে যায় এবং সেগুলোর গতিপথ, আকার এবং অন্যান্য গুণাবলী পরিবর্তিত হয়।
3. Lifetime (লাইফটাইম): পার্টিকলের জীবনকাল। এটি কতটুকু সময় ধরে চলবে তা নির্ধারণ করে। যখন একটি পার্টিকলের জীবন শেষ হয়, তখন সেটি দৃশ্য থেকে মুছে যায়।
4. Speed (গতি): পার্টিকলের চলার গতি। এটি পার্টিকলের গতির মান নির্ধারণ করে।
5. Direction (দিশা): পার্টিকল কোন দিকে যাবে, এটি সেই দিশা নির্ধারণ করে।
6. Size and Color (আকার এবং রঙ): পার্টিকলের আকার এবং রঙ, যা সময়ের সাথে পরিবর্তিত হতে পারে। এটি পার্টিকলের সৌন্দর্য এবং বাস্তবসম্মততা বৃদ্ধি করতে সাহায্য করে।

BabylonJS এ Particle System এর ব্যবহার

BabylonJS এ Particle System তৈরি করা খুবই সহজ। এটি সাধারণত BABYLON.ParticleSystem ক্লাসের মাধ্যমে তৈরি করা হয়। নিচে একটি উদাহরণ দেয়া হলো যেখানে একটি সিম্পল পার্টিকেল সিস্টেম তৈরি করা হয়েছে।

একটি সিম্পল পার্টিকেল সিস্টেম উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS Particle System Example</title>
    <script src="https://cdn.babylonjs.com/babylon.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);

        // Scene তৈরি করা
        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 particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

        // এমিটার হিসেবে একটি বক্স ব্যবহার করা
        particleSystem.emitter = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);

        // পার্টিকলের লাইফটাইম (যতটুকু সময় পার্টিকল থাকবে)
        particleSystem.startPosition = new BABYLON.Vector3(0, 1, 0);

        // টেক্সচার অ্যাসাইন করা (পার্টিকলের জন্য একটি ছবি ব্যবহার করা)
        particleSystem.particleTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/flare.png", scene);

        // পার্টিকল সিস্টেমের কিছু সেটিংস
        particleSystem.minSize = 0.1;
        particleSystem.maxSize = 0.3;
        particleSystem.minLifeTime = 0.5;
        particleSystem.maxLifeTime = 1.5;
        particleSystem.emitRate = 1000;

        // ফোর্স তৈরি করা (ধোঁয়া বা আগুনের প্রভাব জন্য)
        particleSystem.gravity = new BABYLON.Vector3(0, -0.5, 0);

        // পার্টিকেল সিস্টেম শুরু করা
        particleSystem.start();

        // রেন্ডার লুপ চালানো
        engine.runRenderLoop(function () {
            scene.render();
        });

        // ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোডের ব্যাখ্যা:

1. Canvas: canvas এলিমেন্টে 3D দৃশ্য রেন্ডার করা হবে।
2. Engine এবং Scene: BabylonJS এর ইঞ্জিন এবং দৃশ্য তৈরি করা হয়েছে।
3. ParticleSystem: BABYLON.ParticleSystem ক্লাস ব্যবহার করে একটি পার্টিকেল সিস্টেম তৈরি করা হয়েছে। এটি ২০০০টি পার্টিকল তৈরি করবে।
4. Emitter: এখানে একটি বক্সকে এমিটার হিসেবে ব্যবহার করা হয়েছে, যার মাধ্যমে পার্টিকলগুলো বের হবে।
5. ParticleTexture: পার্টিকলের টেক্সচার হিসেবে একটি ফ্লেয়ার ইমেজ ব্যবহার করা হয়েছে (এটি ধোঁয়া বা আগুনের জন্য উপযুক্ত হতে পারে)।
6. Size and Lifetime: পার্টিকলের আকার এবং জীবনকাল কনফিগার করা হয়েছে।
7. Gravity: পার্টিকলের উপর গ্যাপিটি ফোর্স প্রয়োগ করা হয়েছে, যাতে তারা নিচে পড়তে থাকে।
8. Start: particleSystem.start() দিয়ে পার্টিকেল সিস্টেম শুরু করা হয়েছে।

Particle System এর সুবিধাসমূহ

1. বাস্তবসম্মত প্রাকৃতিক ইফেক্ট: পার্টিকেল সিস্টেম ব্যবহার করে আপনি আগুন, ধোঁয়া, বৃষ্টি, তুষারপাত ইত্যাদি বাস্তবসম্মতভাবে তৈরি করতে পারেন।
2. ইন্টারঅ্যাকটিভ ইফেক্ট: পার্টিকেল সিস্টেম আপনার দৃশ্যে ইন্টারঅ্যাকটিভ ইফেক্ট যোগ করতে সাহায্য করে, যেমন গেমে আগুনের বা ধোঁয়ার গতিপথ পরিবর্তন।
3. উচ্চ পারফরম্যান্স: BabylonJS এর পার্টিকেল সিস্টেম অত্যন্ত অপটিমাইজড, যা উচ্চ পারফরম্যান্সে কাজ করে, বিশেষ করে যদি আপনার সিস্টেমে হাজার হাজার পার্টিকল থাকে।
4. কাস্টমাইজেশন: আপনি বিভিন্ন প্যারামিটার যেমন স্পিড, সাইজ, রঙ, টেক্সচার, গ্র্যাভিটি ইত্যাদি কাস্টমাইজ করতে পারেন।

সারাংশ

Particle System হল একটি 3D গ্রাফিক্স সিস্টেম যা ছোট ছোট পার্টিকলের সাহায্যে বাস্তবসম্মত প্রাকৃতিক ইফেক্ট তৈরি করে। BabylonJS এর মাধ্যমে আপনি সহজেই একটি পার্টিকেল সিস্টেম তৈরি করতে পারেন এবং এর বিভিন্ন প্যারামিটার কাস্টমাইজ করে বিভিন্ন ধরনের ইফেক্ট যেমন ধোঁয়া, আগুন, বৃষ্টি ইত্যাদি তৈরি করতে পারেন। BABYLON.ParticleSystem ক্লাস ব্যবহার করে আপনি এমিটার, পার্টিকলের গতি, আকার, টেক্সচার, গ্র্যাভিটি ইত্যাদি নিয়ন্ত্রণ করতে পারবেন।

BabylonJS-এ Fire, Smoke, এবং Water এর মতো বাস্তবসম্মত প্রাকৃতিক প্রভাব তৈরি করা সম্ভব। এই প্রভাবগুলি সাধারণত পদ্ধতিগত সিমুলেশন এবং পার্টিকেল সিস্টেম ব্যবহার করে তৈরি করা হয়। আমরা এই প্রভাবগুলি তৈরি করতে পারি নানা ধরনের প্রপস এবং টেক্সচার ব্যবহার করে। এখানে, আমরা Fire, Smoke, এবং Water এর জন্য প্রয়োজনীয় টিউটোরিয়াল দেখব।

১. Fire Effect (আগুনের প্রভাব)

Fire Effect তৈরি করতে, BabylonJS-এর পার্টিকেল সিস্টেম ব্যবহার করা হয়। এখানে একটি সাধারণ আগুনের প্রভাব তৈরি করা হবে।

কোড উদাহরণ:

var fireTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/Fire.png", scene);  // আগুনের টেক্সচার
var fireEmitter = new BABYLON.GPUParticleSystem("fireEmitter", {capacity: 5000}, scene);

// পার্টিকেল সিস্টেমের প্রোপার্টি সেট করা
fireEmitter.particleTexture = fireTexture;
fireEmitter.emitter = new BABYLON.Vector3(0, 0, 0);  // আগুনের উৎস
fireEmitter.minEmitBox = new BABYLON.Vector3(-1, 0, -1);
fireEmitter.maxEmitBox = new BABYLON.Vector3(1, 0, 1);
fireEmitter.emitRate = 1000;  // প্রতি সেকেন্ডে 1000 পার্টিকেল নির্গমন
fireEmitter.start();

কোডের ব্যাখ্যা:

• GPUParticleSystem: পার্টিকেল সিস্টেম ব্যবহৃত হয়েছে যা GPU-এর মাধ্যমে দ্রুত পারফরম্যান্স প্রদান করে।
• Particle Texture: আগুনের টেক্সচার হিসেবে একটি PNG ইমেজ ব্যবহার করা হয়েছে।
• Emitter: আগুনের উৎস হিসেবে Vector3 পজিশন দেওয়া হয়েছে।
• Emit Rate: প্রতি সেকেন্ডে কতটি পার্টিকেল নির্গত হবে তা নির্ধারণ করা হয়েছে।

এই কোডে একটি সাধারণ আগুনের প্রভাব তৈরি করা হয়েছে।

২. Smoke Effect (ধোঁয়া প্রভাব)

Smoke Effect তৈরি করতে, ParticleSystem ব্যবহার করা হয় যাতে ধোঁয়ার মতো প্রভাব তৈরি হয়। এর জন্য একটা ধোঁয়ার টেক্সচার এবং নির্দিষ্ট গতি প্রয়োজন।

কোড উদাহরণ:

var smokeTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/smoke.png", scene);  // ধোঁয়ার টেক্সচার
var smokeEmitter = new BABYLON.GPUParticleSystem("smokeEmitter", {capacity: 5000}, scene);

// পার্টিকেল সিস্টেমের প্রোপার্টি সেট করা
smokeEmitter.particleTexture = smokeTexture;
smokeEmitter.emitter = new BABYLON.Vector3(0, 0, 0);  // ধোঁয়ার উৎস
smokeEmitter.minEmitBox = new BABYLON.Vector3(-1, 0, -1);
smokeEmitter.maxEmitBox = new BABYLON.Vector3(1, 0, 1);
smokeEmitter.emitRate = 500;  // প্রতি সেকেন্ডে 500 পার্টিকেল নির্গমন
smokeEmitter.start();

কোডের ব্যাখ্যা:

• Smoke Texture: ধোঁয়ার টেক্সচার হিসেবে একটি PNG ছবি ব্যবহার করা হয়েছে।
• Emit Rate: প্রতি সেকেন্ডে কতটি পার্টিকেল নির্গত হবে তা নির্ধারণ করা হয়েছে। ধোঁয়ার ক্ষেত্রে কম rate রাখা হয়।
• Emitter: ধোঁয়ার উৎস হিসেবে Vector3 পজিশন দেওয়া হয়েছে।

এই কোডে ধোঁয়ার প্রভাব তৈরি করা হয়েছে, যা বাস্তবসম্মত ধোঁয়া সৃষ্টি করবে।

৩. Water Effect (জল প্রভাব)

Water Effect তৈরি করার জন্য, সাধারণত ShaderMaterial ব্যবহার করা হয়। এই ধরনের প্রভাব তৈরি করতে শেডার কোডের সাহায্য নিতে হয়, যা জলের তরঙ্গ এবং তার প্রতিফলন সিমুলেট করতে পারে।

কোড উদাহরণ:

var waterMaterial = new BABYLON.WaterMaterial("water", scene);

// জল উপাদানের বৈশিষ্ট্য সেট করা
waterMaterial.bumpTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/waterbump.png", scene);
waterMaterial.windForce = 3.0;  // বাতাসের শক্তি
waterMaterial.waveHeight = 0.5;  // তরঙ্গের উচ্চতা
waterMaterial.waterColor = new BABYLON.Color3(0, 0, 1);  // জলরঙ
waterMaterial.colorBlendFactor = 0.4;

// পানির পৃষ্ঠ তৈরি করা
var waterPlane = BABYLON.MeshBuilder.CreatePlane("waterPlane", {size: 100}, scene);
waterPlane.position.y = 0;  // পানির স্তরের উচ্চতা
waterPlane.rotation.x = Math.PI / 2;  // 90 ডিগ্রি ঘোরানো
waterPlane.material = waterMaterial;

কোডের ব্যাখ্যা:

• WaterMaterial: WaterMaterial ব্যবহার করে পানির প্রভাব তৈরি করা হয়েছে। এটি জলের রিফ্লেকশন, তরঙ্গ এবং পানির রঙ নিয়ন্ত্রণ করতে সাহায্য করে।
• Bump Texture: পানির বাম্প টেক্সচার দেওয়া হয়েছে যা পানির পৃষ্ঠের তরঙ্গের প্রভাব সৃষ্টি করবে।
• WindForce: বাতাসের শক্তি এবং WaveHeight দ্বারা তরঙ্গের উচ্চতা নিয়ন্ত্রণ করা হয়েছে।

এই কোডে একটি পানির পৃষ্ঠ তৈরি করা হয়েছে, যার ওপর তরঙ্গ সৃষ্টি হবে এবং বাস্তবসম্মত জল প্রভাব দেখা যাবে।

সারাংশ

এই গাইডে, আমরা দেখেছি কিভাবে Fire, Smoke, এবং Water এর মতো প্রাকৃতিক প্রভাব তৈরি করা যায় BabylonJS ব্যবহার করে। Particle Systems এবং ShaderMaterials এর মাধ্যমে আমরা অত্যন্ত বাস্তবসম্মত প্রভাব তৈরি করতে পারি, যা গেম ডেভেলপমেন্ট এবং 3D অ্যাপ্লিকেশনগুলোতে বিশেষভাবে কার্যকরী।

1. Fire Effect: আগুনের মতো উজ্জ্বল এবং গতিশীল প্রভাব তৈরি করতে পার্টিকেল সিস্টেম ব্যবহার করা হয়েছে।
2. Smoke Effect: ধোঁয়ার মতো সুক্ষ্ম, ধীরে ছড়ানো প্রভাব তৈরি করা হয়েছে।
3. Water Effect: পানির তরঙ্গ, প্রতিফলন এবং রঙের প্রভাব শেডার ব্যবহার করে তৈরি করা হয়েছে।

এই প্রভাবগুলো ব্যবহার করে আপনি আপনার 3D দৃশ্যগুলিকে আরও জীবন্ত এবং বাস্তবসম্মত করে তুলতে পারবেন।

পার্টিকেল সিস্টেম (Particle System) হল এমন একটি উপাদান যা আপনাকে বিভিন্ন প্রাকৃতিক ঘটনা যেমন আগুন, ধোঁয়া, বৃষ্টি, কিংবা রেনবো তৈরি করতে সহায়তা করে। BabylonJS-এ পার্টিকেল সিস্টেমের মাধ্যমে আপনি সহজেই লাইফসাইকেল এবং এনিমেশন সহ পার্টিকেলগুলির আচরণ নিয়ন্ত্রণ করতে পারেন। এখানে আমরা পার্টিকেল সিস্টেমে টেক্সচার যোগ করা এবং এনিমেশন পরিচালনা সম্পর্কে আলোচনা করব।

পার্টিকেল সিস্টেমে টেক্সচার যোগ করা

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

উদাহরণ: পার্টিকেল সিস্টেমে টেক্সচার ব্যবহার

// 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);

// পার্টিকেল সিস্টেম তৈরি করা
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

// পার্টিকেল সিস্টেমের টেক্সচার সেট করা
particleSystem.particleTexture = new BABYLON.Texture("path_to_particle_texture.png", scene);

// পার্টিকেল সিস্টেমের প্রপার্টি সেট করা
particleSystem.emitter = BABYLON.Vector3.Zero(); // উদগীরণ পয়েন্ট
particleSystem.start(); // পার্টিকেল সিস্টেম শুরু করা

// দৃশ্যে এনিমেশন শুরু করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• particleTexture: পার্টিকেল সিস্টেমের প্রতিটি পার্টিকেলের জন্য একটি টেক্সচার নির্ধারণ করা হয়েছে। এটি একটি ইমেজ ফাইল (যেমন PNG বা JPG) হতে পারে।
• emitter: এখানে Vector3.Zero() ব্যবহার করা হয়েছে, মানে পার্টিকেলগুলি নির্দিষ্ট এক পয়েন্ট থেকে উদগীরিত হবে (এখানে Vector3.Zero() মানে (0, 0, 0) পয়েন্ট)।
• start(): পার্টিকেল সিস্টেমের এনিমেশন শুরু করার জন্য এই ফাংশনটি কল করা হয়েছে।

পার্টিকেল সিস্টেমে এনিমেশন

পার্টিকেল সিস্টেমের মাধ্যমে আপনি পার্টিকেলের গতিবিধি, আকার এবং অন্যান্য বৈশিষ্ট্য নিয়ন্ত্রণ করতে পারবেন। আপনি এনিমেশন ব্যবহার করে পার্টিকেলগুলোর আচরণ আরও গতিশীল এবং বাস্তবসম্মত করে তুলতে পারেন, যেমন তাদের গতি, আকার, রঙ বা টেক্সচার পরিবর্তন করতে।

উদাহরণ: পার্টিকেল সিস্টেমে এনিমেশন যোগ করা

// 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);

// পার্টিকেল সিস্টেম তৈরি করা
var particleSystem = new BABYLON.ParticleSystem("particles", 2000, scene);

// পার্টিকেল সিস্টেমের টেক্সচার সেট করা
particleSystem.particleTexture = new BABYLON.Texture("path_to_particle_texture.png", scene);

// পার্টিকেল সিস্টেমের প্রপার্টি সেট করা
particleSystem.emitter = BABYLON.Vector3.Zero();
particleSystem.minEmitPower = 0.5; // কম শক্তি
particleSystem.maxEmitPower = 1.5; // বেশি শক্তি
particleSystem.emitRate = 500; // প্রতি সেকেন্ডে 500 পার্টিকেল

// এনিমেশন সেট করা
var animation = new BABYLON.Animation("scaleAnimation", "scale.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

// এনিমেশনের কীগুলি সেট করা
var keys = [];
keys.push({ frame: 0, value: 1 }); // প্রথমে পার্টিকেল আকার 1
keys.push({ frame: 50, value: 2 }); // 50 ফ্রেম পর আকার 2
keys.push({ frame: 100, value: 1 }); // আবার 1 হয়ে যাবে

animation.setKeys(keys);

// পার্টিকেলে এনিমেশন অ্যাপ্লাই করা
particleSystem.animations.push(animation);

// পার্টিকেল সিস্টেম শুরু করা
particleSystem.start();

// দৃশ্যে এনিমেশন শুরু করা
engine.runRenderLoop(function () {
    scene.render();
});

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

কোডের ব্যাখ্যা:

• animation: এখানে scale.x এনিমেশন তৈরি করা হয়েছে, যার মাধ্যমে পার্টিকেলের আকার পরিবর্তিত হবে।
• keys.push(): এনিমেশনের জন্য কীগুলি নির্ধারণ করা হয়েছে। প্রথমে আকার 1, পরে 50 ফ্রেম পর আকার 2, এবং আবার 100 ফ্রেম পর আকার 1 হবে।
• animations.push(): তৈরি করা এনিমেশনটি পার্টিকেল সিস্টেমে অ্যাপ্লাই করা হয়েছে।

পার্টিকেল সিস্টেমে আরও কিছু এনিমেশন বৈশিষ্ট্য

১. স্পিড এনিমেশন

পার্টিকেলগুলির গতি পরিবর্তন করতে আপনি speed বা velocity এনিমেশন ব্যবহার করতে পারেন।

particleSystem.startDirection = BABYLON.Vector3.Forward(); // স্টার্ট ডিরেকশন
particleSystem.minLifeTime = 1; // মিনিমাম লাইফটাইম
particleSystem.maxLifeTime = 2; // ম্যাক্সিমাম লাইফটাইম

২. রঙের এনিমেশন

পার্টিকেলগুলির রঙ পরিবর্তন করার জন্য আপনি color প্রপার্টি ব্যবহার করতে পারেন।

particleSystem.color1 = new BABYLON.Color4(1, 0, 0, 1); // প্রথম রঙ (লাল)
particleSystem.color2 = new BABYLON.Color4(0, 1, 0, 1); // দ্বিতীয় রঙ (সবুজ)
particleSystem.colorDead = new BABYLON.Color4(0, 0, 0, 1); // মৃত রঙ (কালো)

সারাংশ

BabylonJS-এ পার্টিকেল সিস্টেম ব্যবহার করে আপনি সহজেই বাস্তবসম্মত 3D দৃশ্য তৈরি করতে পারেন, যেখানে পার্টিকেলগুলির টেক্সচার এবং এনিমেশন দিয়ে আপনি আরও জটিল এবং আকর্ষণীয় দৃশ্য তৈরি করতে পারেন। টেক্সচার দিয়ে পার্টিকেলের চেহারা কাস্টমাইজ করা যায় এবং এনিমেশন ব্যবহার করে তাদের গতিবিধি, আকার, রঙ বা স্পিড পরিবর্তন করা যায়। এর মাধ্যমে আপনি আগুন, ধোঁয়া, বৃষ্টি, বা অন্য যেকোনো প্রাকৃতিক দৃশ্য তৈরি করতে পারবেন।

BabylonJS-এ বিশেষ গ্রাফিক্স এবং ভিজ্যুয়াল ইফেক্ট তৈরি করতে Glow, Lens Flare, এবং Post-processing ইফেক্টগুলো ব্যবহৃত হয়। এই ইফেক্টগুলো 3D দৃশ্যকে আরও আকর্ষণীয় এবং বাস্তবসম্মত করে তোলে। চলুন, এগুলোর সম্পর্কে বিস্তারিত জানি এবং দেখি কিভাবে এগুলো বাস্তবায়ন করা যায়।

১. Glow Effects

Glow Effects ব্যবহার করে আপনি একটি অবজেক্টের চারপাশে আলোকিত (glowing) একটি আভা তৈরি করতে পারেন। এটি বিশেষত গেমস এবং 3D অ্যাপ্লিকেশনগুলোতে গুরুত্বপূর্ণ, যেখানে কোনো অবজেক্ট বা এলিমেন্টকে প্রধান ফোকাস করতে হয়।

Glow Effects তৈরি করা

BabylonJS-এ GlowLayer ব্যবহার করে আপনি সহজেই glow effect অ্যাপ্লাই করতে পারেন।

উদাহরণ: Basic Glow Effect

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glow Effect Example</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);

        // বক্স তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        box.position.y = 1;

        // GlowLayer তৈরি করা
        var glowLayer = new BABYLON.GlowLayer("glow", scene);
        glowLayer.addIncludedOnlyMesh(box); // শুধুমাত্র বক্সটি glow করবে

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

• এখানে GlowLayer ব্যবহার করা হয়েছে যা একটি বা একাধিক অবজেক্টকে গ্লো (আলোকিত) করবে।
• glowLayer.addIncludedOnlyMesh(box); এর মাধ্যমে box অবজেক্টটিকে glow effect অ্যাপ্লাই করা হয়েছে।

এটি ব্যবহারে বক্সটি আলোকিত হয়ে দৃশ্যের প্রধান ফোকাসে থাকবে।

২. Lens Flare Effects

Lens Flare ইফেক্ট বাস্তবসম্মত লাইটিং তৈরিতে ব্যবহৃত হয়, বিশেষ করে যখন ক্যামেরার সামনে উজ্জ্বল আলো থাকে। এটি ক্যামেরার লেন্সে সৃষ্ট আলোর প্রতিফলন হিসেবে দৃশ্যমান হয় এবং একটি বিশেষ ধরনের আলোকপ্রাপ্তি (light scattering) তৈরি করে।

Lens Flare তৈরি করা

BabylonJS-এ LensFlareSystem ব্যবহার করে আপনি Lens Flare ইফেক্ট তৈরি করতে পারেন।

উদাহরণ: Basic Lens Flare

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lens Flare Effect Example</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);

        // Lens Flare System তৈরি করা
        var lensFlareSystem = new BABYLON.LensFlareSystem("lensFlareSystem", light, scene);
        
        // Lens Flare তৈরি করা
        var lensFlare = lensFlareSystem.addLensFlare(1, 0.5, BABYLON.Color3.White(), 0.5);
        
        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

• LensFlareSystem ব্যবহার করে একটি লেন্স ফ্লেয়ার সিস্টেম তৈরি করা হয়েছে, যা একটি উজ্জ্বল HemisphericLight এর কাছে স্থাপন করা হয়েছে।
• lensFlareSystem.addLensFlare(1, 0.5, BABYLON.Color3.White(), 0.5); এর মাধ্যমে একটি লেন্স ফ্লেয়ার তৈরি করা হয়েছে। এখানে আপনি ফ্লেয়ারের আকার, আলোর রঙ এবং পজিশন কাস্টমাইজ করতে পারেন।

এটি ব্যবহারের মাধ্যমে আপনার দৃশ্যে উজ্জ্বল আলোর মাধ্যমে একটি বাস্তবসম্মত লেন্স ফ্লেয়ার ইফেক্ট সৃষ্টি হবে।

৩. Post-Processing Effects

Post-processing হলো একটি ধরনের গ্রাফিক্স টেকনিক যা রেন্ডার করার পর দৃশ্যে বিভিন্ন ধরনের ইফেক্ট যোগ করে। এটি ভিন্ন ভিন্ন ভিজ্যুয়াল টোন বা ইফেক্ট যেমন ব্লার, গ্লোস, সেপিয়া টোন, এবং আরও অনেক কিছু তৈরি করতে ব্যবহৃত হয়।

Post-Processing তৈরি করা

BabylonJS-এ PostProcess এবং PostProcessRenderPipeline ব্যবহার করে আপনি নানা ধরনের post-processing ইফেক্ট যোগ করতে পারেন।

উদাহরণ: Bloom Effect (Post-Processing)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Post-Processing Effect Example</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);

        // বক্স তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

        // Bloom Post-process তৈরি করা
        var bloomPostProcess = new BABYLON.BloomEffectPostProcess("bloom", 1.0, camera);

        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

• BloomEffectPostProcess ব্যবহার করে বক্সের চারপাশে একটি bloom (জ্বলন্ত আভা) ইফেক্ট যোগ করা হয়েছে।
• এই ইফেক্টটি দৃশ্যে আলোকে আরো উজ্জ্বল এবং দৃষ্টিনন্দন করে তোলে।

এছাড়া আপনি অন্যান্য post-processing ইফেক্ট যেমন blur, motion blur, depth of field ইত্যাদি ব্যবহার করতে পারেন।

সারাংশ

• Glow Effects: GlowLayer ব্যবহার করে একটি অবজেক্টের চারপাশে আলোকিত আভা তৈরি করা হয়, যা দৃশ্যের প্রধান ফোকাস তৈরি করে।
• Lens Flare: LensFlareSystem ব্যবহার করে ক্যামেরার সামনে আলো প্রতিফলিত হয়ে একটি লেন্স ফ্লেয়ার ইফেক্ট তৈরি করা হয়, যা রিয়েলিস্টিক আলোর প্রতিফলন প্রদান করে।
• Post-Processing Effects: PostProcess এবং PostProcessRenderPipeline ব্যবহার করে বিভিন্ন ধরনের ভিজ্যুয়াল ইফেক্ট যেমন ব্লুম, গ্লোস, ব্লার ইত্যাদি যোগ করা যায়, যা দৃশ্যের মান উন্নত করে।

এই ইফেক্টগুলো আপনাকে 3D দৃশ্যে ভিজ্যুয়াল বৈচিত্র্য এবং বাস্তবতা আনতে সাহায্য করবে, যা গেম এবং অন্যান্য ইন্টার

েক্টিভ অ্যাপ্লিকেশনগুলোর জন্য খুবই গুরুত্বপূর্ণ।