Shadow এবং Reflection Techniques গাইড ও নোট

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

এই গাইডে, আমরা শ্যাডো এবং রিফ্লেকশন প্রযুক্তি ব্যবহারের পদ্ধতি এবং এগুলোর কার্যকারিতা সম্পর্কে আলোচনা করব।

১. শ্যাডো (Shadows) কি?

শ্যাডো হল আলোর অভাবে বা প্রতিফলনের কারণে একটি অবজেক্টের দ্বারা ছায়া তৈরি হওয়া। এটি একটি দৃশ্যের গভীরতা এবং বাস্তবসম্মততা বাড়ায়, কারণ বাস্তব জীবনে আমরা সবসময় শ্যাডো দেখতে পাই। BabylonJS-এ শ্যাডো তৈরি করার জন্য ShadowGenerator ব্যবহার করা হয়, যা একটি light source থেকে আলোর বিকিরণ এবং শ্যাডো ক্যাস্টিং অবজেক্টের পজিশন নির্ধারণ করে।

শ্যাডো তৈরি করার জন্য প্রাথমিক সেটআপ:

// ১. একটি লাইট তৈরি করুন
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;

// ২. একটি ক্যামেরা তৈরি করুন
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// ৩. একটি মডেল তৈরি করুন (যেমন একটি বক্স)
var box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
box.position.y = 1;  // মডেলটিকে কিছুটা উপরে তুলুন

// ৪. শ্যাডো জেনারেটর তৈরি করুন
var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.addShadowCaster(box);  // বক্সটি শ্যাডো কাস্ট করবে

// ৫. মাটির ম্যাটেরিয়াল তৈরি করুন যাতে শ্যাডো দৃশ্যমান হয়
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
ground.receiveShadows = true;  // মাটি শ্যাডো গ্রহণ করবে

এখানে:

• HemisphericLight ব্যবহার করে সাধারণ আলোর উত্স তৈরি করা হয়েছে।
• ShadowGenerator ব্যবহার করে শ্যাডো তৈরি করা হয়েছে, এবং addShadowCaster দিয়ে বক্সের জন্য শ্যাডো কাস্ট করার নির্দেশ দেওয়া হয়েছে।
• মাটি (Ground) তৈরি করা হয়েছে যাতে শ্যাডো গ্রহন করতে পারে।

২. শ্যাডো প্রকার এবং উন্নত কৌশল

শ্যাডো প্রকার:

1. Hard Shadows: যেখানে আলোর উত্স থেকে শ্যাডো স্পষ্টভাবে দৃশ্যমান।
2. Soft Shadows: যেখানে শ্যাডো কিছুটা ব্লার হয়ে থাকে, যা আরও বাস্তবসম্মত দেখায়।

শ্যাডোর গুণমান এবং প্রভাব:

shadowGenerator.usePoissonSampling = true;  // Soft shadow
shadowGenerator.bias = 0.0001;  // Shadows' bias adjustment

• usePoissonSampling: এটি শ্যাডোকে আরো নরম এবং বাস্তবসম্মত করে তোলে।
• bias: শ্যাডোতে কোন অস্পষ্টতা কমানোর জন্য ব্যবহৃত হয়।

স্যাম্পলিং এবং কাস্টিং ডিটেইলস:

shadowGenerator.getShadowMap().refreshRate = BABYLON.RenderTargetTexture.REFRESHRATE_RENDER_ONEVERYFRAME;

এটি নিশ্চিত করে যে শ্যাডো নিয়মিত আপডেট হবে।

৩. রিফ্লেকশন (Reflections) কি?

রিফ্লেকশন হল যখন একটি অবজেক্ট তার পরিবেশে প্রতিফলিত হয়, যেমন কাচ, জল, বা অন্যান্য মিরর পৃষ্ঠ। BabylonJS-এ রিফ্লেকশন সিমুলেট করতে আপনি ReflectionProbe এবং Mirror ম্যাটেরিয়াল ব্যবহার করতে পারেন। এটি গেম বা 3D সিমুলেশনে বাস্তবসম্মত পরিবেশ তৈরি করতে অত্যন্ত গুরুত্বপূর্ণ।

রিফ্লেকশন তৈরি করার জন্য প্রাথমিক সেটআপ:

// ১. ক্যামেরা এবং লাইট সেটআপ
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", new BABYLON.Vector3(0, 1, 0), scene);

// ২. মডেল তৈরি করুন (যেমন একটি প্লেন)
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);
ground.position.y = -1;  // প্লেনটি নিচে রাখুন

// ৩. রিফ্লেকশন প্রোব তৈরি করুন
var reflectionProbe = new BABYLON.ReflectionProbe("reflectionProbe", 1024, scene);
reflectionProbe.renderList.push(ground);  // প্লেনটি রিফ্লেকশন প্রোবের তালিকায় যুক্ত করুন

// ৪. রিফ্লেকটিভ ম্যাটেরিয়াল তৈরি করুন
var material = new BABYLON.StandardMaterial("mirror", scene);
material.reflectionTexture = reflectionProbe.createReflectionTexture();  // রিফ্লেকশন টেক্সচার সেট করুন
material.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;  // স্ফেরিকাল কোঅর্ডিনেটস ব্যবহৃত হবে

// ৫. ম্যাটেরিয়ালটি প্লেনে অ্যাপ্লাই করুন
ground.material = material;

এখানে:

• ReflectionProbe দিয়ে পুরো দৃশ্যের রিফ্লেকশন তৈরি করা হয়েছে।
• createReflectionTexture ব্যবহার করে রিফ্লেকশন টেক্সচার তৈরি করা হয়েছে।
• coordinatesMode ব্যবহার করে রিফ্লেকশন টেক্সচারটি স্ফেরিকাল মোডে সেট করা হয়েছে, যা একটি গোলাকৃতি পরিবেশকে প্রতিফলিত করে।

৪. রিফ্লেকশন টেকনিকস এবং কৌশল

Planar Reflections:

একটি Planar Reflection হলো যে কোনও সমতল পৃষ্ঠে (যেমন জল বা মেঝে) প্রতিফলিত দৃশ্য। BabylonJS-এ এই ধরনের রিফ্লেকশন তৈরি করার জন্য PlanarReflection ম্যাটেরিয়াল ব্যবহার করা হয়।

var planarReflection = new BABYLON.PlanarReflection("planarReflection", scene);
planarReflection.renderList.push(ground);
ground.material.reflectionTexture = planarReflection;

এখানে, PlanarReflection ব্যবহার করে প্লেন (যেমন জল) উপর প্রতিফলন তৈরি করা হয়েছে।

Reflection via Cubemap:

এটি একটি 3D রিফ্লেকশন যেখানে প্রতিটি দিকের রিফ্লেকশন আলাদা করে সেট করা হয়। Cubemap ব্যবহার করে আপনি একটি ঐক্যবদ্ধ দৃশ্য থেকে রিফ্লেকশন তৈরি করতে পারেন।

var cubemapReflection = new BABYLON.CubeTexture("textures/cubemap", scene);
var cubeMaterial = new BABYLON.StandardMaterial("cubeMaterial", scene);
cubeMaterial.reflectionTexture = cubemapReflection;
cube.material = cubeMaterial;

এখানে, CubeTexture ব্যবহার করা হয়েছে একটি স্ফেরিকাল রিফ্লেকশন তৈরি করতে, যা চারপাশের দৃশ্য প্রতিফলিত করে।

৫. উন্নত রিফ্লেকশন কৌশল

Reflection with Refraction:

রিফ্লেকশন এবং Refraction একসাথে ব্যবহার করলে, আপনি একটি ভাঙা কাচ বা পানির পৃষ্ঠের মতো প্রভাব তৈরি করতে পারেন, যেখানে আপনি পানি বা কাচের নিচে আসল দৃশ্যটি দেখতে পাবেন।

material.refractionTexture = new BABYLON.Texture("textures/refraction.jpg", scene);
material.refractionIndex = 0.98;  // পানি বা কাচের রিফ্র্যাকশন ইনডেক্স

এখানে, RefractionTexture ব্যবহার করে রিফ্র্যাকশন প্রভাব তৈরি করা হয়েছে।

সারাংশ

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

ন তৈরি করতে পারেন, যা দৃশ্যকে আরও আকর্ষণীয় এবং জীবন্ত করে তোলে।

Shadow Generation হলো একটি গুরুত্বপূর্ণ গ্রাফিক্স টেকনিক, যা দৃশ্যে অবজেক্টের ছায়া তৈরি করে। এটি দৃশ্যের গভীরতা এবং বাস্তবসম্মততা বাড়াতে সাহায্য করে। BabylonJS এ Shadow Generator ব্যবহার করে আপনি আপনার 3D দৃশ্যে ছায়া তৈরি এবং কাস্টমাইজ করতে পারেন। এটি সাধারণত একটি light source থেকে একটি বা একাধিক অবজেক্টের উপর ছায়া প্রদান করে।

Shadow Generator কি?

Shadow Generator হল একটি বিশেষ ক্লাস বা টুল যা অবজেক্ট থেকে ছায়া তৈরি করে এবং সেগুলো দৃশ্যের বিভিন্ন জায়গায় প্রজেক্ট করে। এটি সেই সমস্ত এলাকা চিহ্নিত করে যেখানে আলো পৌঁছাতে পারে না এবং সেখানকার গা dark ় অঞ্চলগুলোকে ছায়ায় পরিণত করে।

BabylonJS এ ছায়া তৈরি করতে ShadowGenerator ব্যবহার করা হয়, যা একটি light (যেমন PointLight, DirectionalLight, অথবা SpotLight) থেকে নির্গত হয়। এই ছায়াগুলি আপনার দৃশ্যে আরও বাস্তবসম্মত প্রভাব তৈরি করে, যেমন একেবারে সঠিক অবস্থানে ছায়া ফেলা।

Shadow Generator এর প্রধান উপাদান

1. Light: ছায়া তৈরির জন্য একটি লাইট উৎস থাকতে হবে। এই লাইটটি হতে পারে DirectionalLight, SpotLight, বা PointLight।
2. Target: ছায়া যে অবজেক্টে পড়বে, সেটি target হিসেবে নির্ধারণ করতে হয়।
3. ShadowMap: এটি হলো একটি স্পেসিফিক ম্যাপ যা ছায়াগুলি রাখার জন্য ব্যবহৃত হয়।
4. Resolution: ছায়ার গুণগত মান এবং স্পষ্টতা নির্ধারণ করে।
5. Bias: এটি ছায়ার চারপাশে সামান্য শেড তৈরি করে, যাতে ছায়াগুলির মধ্যে কোনো artifact বা অস্বাভাবিকতা না দেখা দেয়।

BabylonJS এ Shadow Generator ব্যবহার

BabylonJS এ Shadow Generator ব্যবহার করার জন্য, প্রথমে আপনাকে একটি লাইট তৈরি করতে হবে এবং সেই লাইটের সাহায্যে ShadowGenerator তৈরি করতে হবে। তারপর, এই ShadowGenerator কে আপনার মেশ বা অবজেক্টের উপর প্রয়োগ করতে হবে, যাতে ছায়া তৈরি হয়। নিচে একটি উদাহরণ দেয়া হল।

একটি Shadow Generator উদাহরণ

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

        // আলোর উৎস তৈরি করা (DirectionalLight)
        var light = new BABYLON.DirectionalLight("light1", new BABYLON.Vector3(1, -1, 0), scene);
        light.position = new BABYLON.Vector3(0, 10, 0);

        // Shadow Generator তৈরি করা
        var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
        shadowGenerator.usePoissonSampling = true;  // শ্যাডোতে আরও ন্যাচারাল প্রভাব আনা

        // গ্রাউন্ড (পৃষ্ঠ) তৈরি করা
        var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene);

        // গ্রাউন্ডের জন্য মেটিরিয়াল এবং শ্যাডো অ্যাসাইন করা
        var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
        ground.material = groundMaterial;
        ground.receiveShadows = true;

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

        // বক্সের জন্য মেটিরিয়াল এবং শ্যাডো অ্যাসাইন করা
        var boxMaterial = new BABYLON.StandardMaterial("boxMaterial", scene);
        box.material = boxMaterial;
        box.castShadows = true;  // বক্সে শ্যাডো কাস্ট করা

        // Shadow Generator এর মাধ্যমে বক্সের জন্য শ্যাডো তৈরি করা
        shadowGenerator.addShadowCaster(box);

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

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

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

1. Light: এখানে BABYLON.DirectionalLight ব্যবহার করা হয়েছে, যা একটি নির্দিষ্ট দিক থেকে আলো ফেলে। এটি একটি সাধারণ আলো উৎস, যা ছায়া কাস্ট করার জন্য ব্যবহার করা হয়।
2. Shadow Generator: BABYLON.ShadowGenerator ক্লাস ব্যবহার করা হয়েছে। এটি সেই আলো থেকে ছায়া তৈরি করবে। আমরা এটি 1024 রেজোলিউশন সহ ইনিশিয়ালাইজ করেছি।
3. Ground: ground মেশ তৈরি করা হয়েছে এবং এর জন্য শ্যাডো গ্রহণ করার (receiveShadows) সেটিং করা হয়েছে।
4. Box: একটি বক্স মেশ তৈরি করা হয়েছে, যার জন্য শ্যাডো কাস্ট করার (castShadows) সেটিং করা হয়েছে।
5. addShadowCaster: shadowGenerator.addShadowCaster(box) ব্যবহার করে বক্সকে shadow generator এর কাছে নিবন্ধিত করা হয়েছে, যাতে এটি ছায়া তৈরি করে।

Shadow Generator এর প্রধান সুবিধাসমূহ

1. বাস্তবসম্মত দৃশ্য: ছায়া যুক্ত করা আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত করে তোলে। এটি অবজেক্টের আকৃতি এবং গতি স্পষ্টভাবে দেখাতে সাহায্য করে।
2. ভিন্ন আলোর উৎসের ব্যবহার: BabylonJS এ আপনি বিভিন্ন ধরনের আলো যেমন PointLight, SpotLight, DirectionalLight ইত্যাদি ব্যবহার করে বিভিন্ন ধরনের ছায়া তৈরি করতে পারেন।
3. গুণগত মান নিয়ন্ত্রণ: Shadow Generator এর মাধ্যমে আপনি ছায়ার গুণগত মান, রেজোলিউশন, বায়াস ইত্যাদি কাস্টমাইজ করতে পারেন, যা দৃশ্যের বাস্তবসম্মততা বৃদ্ধি করে।
4. প্রপার্টি কাস্টমাইজেশন: বিভিন্ন টেক্সচার, শ্যাডো স্যাম্পলিং, লাইট সোর্স এর মান ইত্যাদি কাস্টমাইজ করে আপনি আরও উন্নত ছায়া প্রভাব তৈরি করতে পারেন।

সারাংশ

Shadow Generator ব্যাবিলনজেএস এ একটি শক্তিশালী টুল, যা 3D দৃশ্যে অবজেক্টের জন্য ছায়া তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন লাইট উৎস থেকে ছায়া তৈরি করে এবং সেই ছায়াগুলিকে শ্যাডো ম্যাপিংয়ের মাধ্যমে প্রজেক্ট করে। Shadow Generator ব্যবহার করে আপনি আপনার দৃশ্যের ছায়া কাস্টমাইজ করতে পারেন, যেমন ছায়ার গুণগত মান, রেজোলিউশন এবং বায়াস ইত্যাদি। এটি আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত ও জীবন্ত করে তোলে।

Shadows বা ছায়া তৈরি করা 3D গ্রাফিক্সের একটি গুরুত্বপূর্ণ অংশ, যা একটি দৃশ্যকে আরও বাস্তবসম্মত এবং গভীর দেখায়। BabylonJS-এ Soft Shadows এবং Cascaded Shadow Maps (CSM) ব্যবহার করে আপনি আরও উন্নত এবং প্রাকৃতিক শ্যাডো ইফেক্ট তৈরি করতে পারবেন। চলুন, এই দুটি বৈশিষ্ট্য এবং তাদের ব্যবহার সম্পর্কে বিস্তারিত আলোচনা করা যাক।

১. Soft Shadows

Soft Shadows এমন শ্যাডো যেগুলি সোজা এবং শক্ত নয়, বরং ধীরে ধীরে মৃদু হয়ে যায়। এগুলি বাস্তব জীবনে যেমন দেখা যায়, তেমন প্রাকৃতিক। মূলত, শ্যাডো প্যাকিং ও ব্লারিং ব্যবহার করে এই প্রভাব তৈরি করা হয়।

Soft Shadows তৈরির পদ্ধতি:

BabylonJS-এ Soft Shadows তৈরি করতে ShadowGenerator ব্যবহার করা হয়, যার মাধ্যমে শ্যাডোকে ধীরে ধীরে মৃদু এবং বাস্তবসম্মত করা হয়।

কোড উদাহরণ:

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;

// শ্যাডো জেনারেটর তৈরি করা
var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

// বক্সের শ্যাডো সেট করা
shadowGenerator.addShadowCaster(box);
box.receiveShadows = true;

// শ্যাডোর ধরণ: Soft Shadows
shadowGenerator.usePoissonSampling = true;  // Soft Shadows তৈরি করতে Poisson Sampling ব্যবহার করা

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

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

• Poisson Sampling: shadowGenerator.usePoissonSampling = true; দিয়ে soft shadows তৈরি করা হয়েছে, যা শ্যাডোর প্রান্তগুলোকে আরও মৃদু এবং প্রাকৃতিক করে।
• Shadow Generator: ShadowGenerator ব্যবহার করা হয়েছে যাতে আলো থেকে ছায়া তৈরি করা যায় এবং তা বক্সের ওপর প্রয়োগ করা হয়।

এটি একটি সাধারণ উদাহরণ যেখানে শ্যাডো প্রান্তগুলো নরম এবং বাস্তবসম্মতভাবে প্রভাবিত হবে।

২. Cascaded Shadow Maps (CSM)

Cascaded Shadow Maps (CSM) হল একটি উন্নত প্রযুক্তি যা Shadow Maps ব্যবহার করে বৃহৎ দৃশ্যে বেশি বাস্তবসম্মত এবং স্পষ্ট শ্যাডো তৈরি করতে সাহায্য করে। CSM প্রযুক্তি মূলত বিভিন্ন দূরত্বে বিভিন্ন শ্যাডো রেজোলিউশন ব্যবহার করে, যাতে কাছের অবজেক্টগুলির শ্যাডো স্পষ্ট এবং দূরের অবজেক্টগুলির শ্যাডো আরও সস্তা এবং কম রেজোলিউশন থাকে। এটি বড় দৃশ্যে ব্যবহৃত হয়, যেখানে বেশিরভাগ শ্যাডো একটানা এবং বাস্তবসম্মতভাবে প্রদর্শিত হতে হবে।

CSM ব্যবহারের পদ্ধতি:

BabylonJS-এ CSM ব্যবহারের জন্য CascadedShadowGenerator ব্যবহার করা হয়। এটি আলোর উৎসের কাছে স্পষ্ট এবং দূরে মৃদু শ্যাডো তৈরি করতে সাহায্য করে।

কোড উদাহরণ:

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.DirectionalLight("light1", new BABYLON.Vector3(0, -1, 0), scene);
light.position = new BABYLON.Vector3(0, 10, 0);

// শ্যাডো জেনারেটর তৈরি করা (Cascaded Shadows)
var shadowGenerator = new BABYLON.CascadedShadowGenerator(1024, light);

// ক্যাসকেডেড শ্যাডোর জন্য ৩টি কেস সেট করা
shadowGenerator.lambda = 0.5;  // উচ্চতর মানে ক্যাসকেডের সংখ্যা বাড়বে
shadowGenerator.depthScale = 5000;
shadowGenerator.bias = 0.0001;

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

// বক্সে শ্যাডো প্রয়োগ করা
shadowGenerator.addShadowCaster(box);
box.receiveShadows = true;

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

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

• CascadedShadowGenerator: CascadedShadowGenerator ব্যবহার করা হয়েছে, যা Cascaded Shadow Maps (CSM) প্রযুক্তি ব্যবহার করে আলোর উৎসের কাছের শ্যাডো পরিষ্কার এবং দূরের শ্যাডো মৃদু করে।
• Light: এখানে DirectionalLight ব্যবহার করা হয়েছে যা একদিক থেকে আলো পাঠায় এবং পুরো দৃশ্যের জন্য শ্যাডো তৈরি করে।
• lambda: lambda = 0.5 মানের মাধ্যমে শ্যাডোর রেজোলিউশন নিয়ন্ত্রণ করা হয়, যাতে কাছের এবং দূরের শ্যাডো যথাযথভাবে সম্পাদিত হয়।

এটি CSM প্রযুক্তি ব্যবহারের একটি উদাহরণ, যা বৃহৎ দৃশ্যে বা উঁচু-নিচু অবজেক্টের শ্যাডো তৈরি করতে উপকারী।

সারাংশ

এই গাইডে, আমরা শিখলাম কিভাবে Soft Shadows এবং Cascaded Shadow Maps (CSM) তৈরি করা যায় BabylonJS-এ।

• Soft Shadows: Poisson Sampling প্রযুক্তি ব্যবহার করে শ্যাডো প্রান্ত মৃদু এবং বাস্তবসম্মত করা হয়।
• Cascaded Shadow Maps (CSM): বড় দৃশ্যের জন্য CascadedShadowGenerator ব্যবহার করে শ্যাডোর রেজোলিউশন নিয়ন্ত্রণ করা হয়, যেখানে কাছের শ্যাডো স্পষ্ট এবং দূরের শ্যাডো কম রেজোলিউশন থাকে।

এই প্রযুক্তিগুলি ব্যবহারে, আপনি আপনার 3D দৃশ্যগুলিতে আরো উন্নত এবং বাস্তবসম্মত শ্যাডো ইফেক্টস তৈরি করতে পারবেন।

Mirror Texture বা প্রতিফলন টেক্সচার হল একটি বিশেষ ধরনের টেক্সচার যা একটি দৃশ্যের প্রতিফলন তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত জল, গ্লাস, বা অন্য কোনো প্রতিফলনযোগ্য পৃষ্ঠের জন্য ব্যবহৃত হয়, যেখানে অবজেক্টগুলি প্রতিফলিত হয়। BabylonJS-এ Mirror Texture ব্যবহার করে খুব সহজেই একটি বাস্তবসম্মত প্রতিফলন তৈরি করা যায়।

Mirror Texture কী?

Mirror Texture হল একটি বিশেষ ধরনের টেক্সচার যা 3D দৃশ্যে কোন একটি পৃষ্ঠের উপর আলোর প্রতিফলন বা অবজেক্টের প্রতিফলন প্রদর্শন করতে ব্যবহৃত হয়। এটি মূলত একটি render target texture, যেখানে একটি দৃশ্য রেন্ডার করা হয় এবং সেই দৃশ্যকে একটি পৃষ্ঠে প্রতিফলিত করা হয়। উদাহরণস্বরূপ, আপনি একটি জলাধার তৈরি করতে পারেন যেখানে পানির পৃষ্ঠে আশেপাশের দৃশ্যের প্রতিফলন দেখা যাবে।

Mirror Texture ব্যবহার করে রিফ্লেকশন তৈরি

BabylonJS-এ Mirror Texture ব্যবহার করতে হলে, আপনাকে একটি Mirror Texture তৈরি করতে হবে এবং তারপর সেটিকে একটি মেটেরিয়ালের সাথে অ্যাপ্লাই করতে হবে যা সেই মেটেরিয়ালটি প্রতিফলনযোগ্য।

উদাহরণ: Mirror Texture দিয়ে রিফ্লেকশন তৈরি

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

// Mirror Texture তৈরি করা
var mirrorTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, true);

// মেটেরিয়াল তৈরি করা এবং প্রতিফলন যোগ করা
var material = new BABYLON.StandardMaterial("mirrorMat", scene);
material.reflectionTexture = mirrorTexture; // Mirror Texture অ্যাপ্লাই করা
material.reflectionTexture.level = 1.0; // প্রতিফলনের ক্ষমতা নির্ধারণ করা

// একটি প্লেন তৈরি করা
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {size: 10}, scene);
plane.material = material; // প্লেনে মেটেরিয়াল অ্যাপ্লাই করা
plane.position.y = -2; // প্লেনটির অবস্থান নিচে সেট করা

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 2; // বক্সটির অবস্থান উপরে সেট করা

// ক্যামেরা ফোকাসে বক্স এবং প্লেন উভয়ই থাকবে
camera.target = box.position;

// Mirror Texture রেন্ডার করা
mirrorTexture.renderList.push(box); // বক্সটি মিরর টেক্সচারে অন্তর্ভুক্ত করা

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

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

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

1. MirrorTexture তৈরি করা: BABYLON.MirrorTexture ক্লাস ব্যবহার করে একটি মিরর টেক্সচার তৈরি করা হয়েছে। এখানে 1024 হল টেক্সচারের রেজোলিউশন এবং true মানে হচ্ছে টেক্সচারটি কিউবিক রিফ্লেকশন (cube reflection) সহ তৈরি হবে।
2. মেটেরিয়াল অ্যাপ্লাই করা: StandardMaterial ক্লাস ব্যবহার করে একটি সাধারণ মেটেরিয়াল তৈরি করা হয়েছে এবং সেই মেটেরিয়ালে reflectionTexture প্রপার্টি দিয়ে মিরর টেক্সচারটি অ্যাপ্লাই করা হয়েছে। এটি প্লেনের উপর প্রতিফলন দেখাবে।
3. ফোকাস এবং রেন্ডার তালিকা: mirrorTexture.renderList.push(box) ব্যবহার করে আমরা বক্সটিকে মিরর টেক্সচারের রেন্ডার তালিকায় যোগ করেছি, যাতে বক্সটির প্রতিফলন প্লেনের উপর প্রদর্শিত হয়।

Mirror Texture এর আরো বৈশিষ্ট্য

১. Reflection Level:

Mirror Texture-এ reflection level প্রপার্টি ব্যবহার করে আপনি প্রতিফলনের গা dark ়তা বা উজ্জ্বলতা নিয়ন্ত্রণ করতে পারেন। এর মান 0 থেকে 1 এর মধ্যে হতে পারে।

material.reflectionTexture.level = 0.5; // আংশিক প্রতিফলন

২. Render Quality:

Mirror Texture এর রেন্ডার কোয়ালিটি নিয়ন্ত্রণ করার জন্য renderSize প্রপার্টি ব্যবহার করতে পারেন। এটি বড় মানে উচ্চ মানের প্রতিফলন প্রদান করবে কিন্তু সিস্টেমের ওপর বেশি চাপ পড়বে।

mirrorTexture.renderSize = 2048; // উচ্চ মানের রিফ্লেকশন

৩. Cube Map Reflection:

Mirror Texture দ্বারা কিউব ম্যাপ প্রতিফলনও তৈরি করা যায়, যা আরো উন্নত রিফ্লেকশন তৈরি করতে ব্যবহৃত হয়। এটি ত্রিমাত্রিক (3D) দৃশ্যে একটি পূর্ণাঙ্গ প্রতিফলন প্রদান করে।

var mirrorTexture = new BABYLON.MirrorTexture("mirror", 1024, scene, false);

এখানে false মানে একটি সাধারণ প্লেন থেকে রিফ্লেকশন হবে, কিন্তু যদি true হয়, তাহলে এটি কিউবিক রিফ্লেকশন তৈরি করবে।

সারাংশ

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

Reflection (প্রতিফলন) এবং Refraction (অভ্যন্তরীণ প্রতিসরণ) হলো 3D গ্রাফিক্সের দুটি অত্যন্ত গুরুত্বপূর্ণ প্রক্রিয়া, যা দৃশ্যের বাস্তবতা এবং গভীরতা বাড়াতে সাহায্য করে। BabylonJS-এ এগুলো ব্যবহার করে আপনি আপনার 3D দৃশ্যে বেশ রিয়েলিস্টিক ইফেক্ট সৃষ্টি করতে পারবেন।

• Reflection: এটি একটি অবজেক্টের পৃষ্ঠে অন্য অবজেক্ট বা পরিবেশের প্রতিফলন তৈরি করে।
• Refraction: এটি সান্দ্র বা স্বচ্ছ পৃষ্ঠে আলোর পথ পরিবর্তন ঘটিয়ে দৃষ্টিভঙ্গি পরিবর্তন করে। সাধারণত এটি পানির বা কাচের মতো স্বচ্ছ উপকরণে দেখা যায়।

BabylonJS এ Reflection এবং Refraction সিস্টেমগুলি অত্যন্ত কার্যকরী এবং সহজেই ইমপ্লিমেন্ট করা যায়। এখানে চলুন, আমরা দেখবো কিভাবে আপনি Real-time Reflection এবং Refraction তৈরি করতে পারেন।

Real-time Reflection

Real-time Reflection তৈরি করার জন্য BabylonJS-এ CubeTexture এবং RenderTargetTexture ব্যবহার করা হয়। এগুলোর মাধ্যমে আপনি একটি Reflection Texture তৈরি করতে পারবেন যা সম্পূর্ণ দৃশ্যে রিপ্রডিউস করে এবং এটি রিয়েল টাইমে আপডেট হয়।

Reflection তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Reflection 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);
        light.intensity = 0.7;

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

        // Reflection Plane তৈরি করা
        var reflectionPlane = new BABYLON.Plane(0, -1, 0, 0);
        var reflectionTexture = new BABYLON.RenderTargetTexture("reflection", { width: 512, height: 512 }, scene);
        reflectionTexture.renderList = [box];
        reflectionTexture.renderTargetTexture.hasAlpha = false;

        // সাপোর্ট করার জন্য, ReflectionTexture পরবর্তীতে বক্সের মেটেরিয়াল এ অ্যাপ্লাই করা হবে
        var material = new BABYLON.StandardMaterial("reflectionMaterial", scene);
        material.reflectionTexture = reflectionTexture;
        material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;  // Skybox mode সেট করা

        box.material = material;

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

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

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

• RenderTargetTexture ব্যবহার করে একটি রেন্ডার টার্গেট টেক্সচার তৈরি করা হয় যা প্রতিফলন ধারণ করবে।
• reflectionTexture.renderList-এ box মেশ অ্যাড করা হয়েছে, যার মানে হল যে রেন্ডার টেক্সচারটি শুধুমাত্র এই বক্সের প্রতিফলন ধরবে।
• coordinatesMode = BABYLON.Texture.SKYBOX_MODE: এই কোডটি বলছে যে প্রতিফলনটি স্কাইবক্সের মতো হবে, অর্থাৎ পুরো দৃশ্যের প্রতিফলন হবে।

এটি বাস্তবসম্মত একটি Real-time Reflection তৈরি করবে যা বক্সের পৃষ্ঠে দৃশ্যের প্রতিফলন দেখাবে।

Real-time Refraction

Refraction সাধারণত জল, কাচ বা অন্য স্বচ্ছ উপকরণে দেখা যায় যেখানে আলোর রিফ্র্যাকশন ঘটে এবং ভিজ্যুয়াল পরিবর্তন আসে। BabylonJS-এ Refraction প্রক্রিয়া RefractionTexture ব্যবহার করে সম্পন্ন করা হয়।

Refraction তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-time Refraction 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);
        light.intensity = 0.7;

        // একটি সিলিন্ডার তৈরি করা
        var cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {diameterTop: 3, diameterBottom: 3, height: 5}, scene);
        cylinder.position.y = 2;

        // RefractionTexture তৈরি করা
        var refractionTexture = new BABYLON.RefractionTexture("refraction", 512, scene);
        refractionTexture.renderList = [cylinder];
        refractionTexture.refractionRatio = 0.7;  // Refraction ইনটেনসিটি নিয়ন্ত্রণ করা

        // মেটেরিয়াল সেট করা
        var material = new BABYLON.StandardMaterial("refractionMaterial", scene);
        material.refractionTexture = refractionTexture;

        // সিলিন্ডারের মেটেরিয়ালে Refraction যোগ করা
        cylinder.material = material;

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

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

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

• RefractionTexture: এই টেক্সচারটি Refraction ইফেক্ট অ্যাপ্লাই করার জন্য ব্যবহৃত হয়। এখানে সিলিন্ডারের জন্য একটি রেফ্র্যাকশন টেক্সচার তৈরি করা হয়েছে।
• refractionRatio: এটি আলোর রিফ্র্যাকশনের মাত্রা নিয়ন্ত্রণ করে। যতো বেশি রিফ্র্যাকশন রেশিও, ততো বেশি স্বচ্ছতা এবং আলোর বিকৃতি হবে।
• renderList: এর মাধ্যমে আপনি যে অবজেক্টটি রেফ্র্যাকশন টেক্সচার হিসেবে চান, সেটি নির্ধারণ করতে পারেন।

এটি Real-time Refraction তৈরি করবে, যা সিলিন্ডারের মাধ্যমে আলোর রিফ্র্যাকশন প্রদর্শন করবে।

Reflection এবং Refraction এর পার্থক্য

• Reflection: এটি একটি অবজেক্টের পৃষ্ঠে পরিবেশ বা অন্যান্য অবজেক্টের প্রতিফলন তৈরি করে। এটি সাধারণত আয়না, জল বা কোনো ব্রাইট পৃষ্ঠের উপর দেখা যায়।
• Refraction: এটি আলোর গতি পরিবর্তন করে এবং স্বচ্ছ বা আংশিক স্বচ্ছ পৃষ্ঠের মাধ্যমে আলোর প্রতিফলন ঘটায়। এটি পানির বা কাচের মতো পৃষ্ঠে দেখা যায়, যেখানে দৃশ্যের অপটিক্যাল পরিবর্তন ঘটে।

সারাংশ

• Reflection এবং Refraction হলো দুইটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা 3D গ্রাফিক্সে বাস্তবসম্মত পরিবেশ তৈরি করতে সাহায্য করে। BabylonJS এ এই ইফেক্টগুলো RenderTargetTexture এবং RefractionTexture এর মাধ্যমে তৈরি করা যায়।
• Reflection সাধারণত পৃষ্ঠে অন্য অবজেক্ট বা পরিবেশের প্রতিফলন ঘটায়, এবং Refraction আলোর পথ পরিবর্তন করে স্বচ্ছ পৃষ্ঠের মাধ্যমে দেখায়।
• এই ইফেক্টগুলো ব্যবহার করে আপনি আপনার 3D দৃশ্যে আরও বাস্তবসম্মত এবং আকর্ষণীয় ভিজ্যুয়াল তৈরি করতে পারবেন।