Shadow Generation হলো একটি গুরুত্বপূর্ণ গ্রাফিক্স টেকনিক, যা দৃশ্যে অবজেক্টের ছায়া তৈরি করে। এটি দৃশ্যের গভীরতা এবং বাস্তবসম্মততা বাড়াতে সাহায্য করে। BabylonJS এ Shadow Generator ব্যবহার করে আপনি আপনার 3D দৃশ্যে ছায়া তৈরি এবং কাস্টমাইজ করতে পারেন। এটি সাধারণত একটি light source থেকে একটি বা একাধিক অবজেক্টের উপর ছায়া প্রদান করে।
Shadow Generator কি?
Shadow Generator হল একটি বিশেষ ক্লাস বা টুল যা অবজেক্ট থেকে ছায়া তৈরি করে এবং সেগুলো দৃশ্যের বিভিন্ন জায়গায় প্রজেক্ট করে। এটি সেই সমস্ত এলাকা চিহ্নিত করে যেখানে আলো পৌঁছাতে পারে না এবং সেখানকার গা dark ় অঞ্চলগুলোকে ছায়ায় পরিণত করে।
BabylonJS এ ছায়া তৈরি করতে ShadowGenerator ব্যবহার করা হয়, যা একটি light (যেমন PointLight, DirectionalLight, অথবা SpotLight) থেকে নির্গত হয়। এই ছায়াগুলি আপনার দৃশ্যে আরও বাস্তবসম্মত প্রভাব তৈরি করে, যেমন একেবারে সঠিক অবস্থানে ছায়া ফেলা।
Shadow Generator এর প্রধান উপাদান
- Light: ছায়া তৈরির জন্য একটি লাইট উৎস থাকতে হবে। এই লাইটটি হতে পারে DirectionalLight, SpotLight, বা PointLight।
- Target: ছায়া যে অবজেক্টে পড়বে, সেটি target হিসেবে নির্ধারণ করতে হয়।
- ShadowMap: এটি হলো একটি স্পেসিফিক ম্যাপ যা ছায়াগুলি রাখার জন্য ব্যবহৃত হয়।
- Resolution: ছায়ার গুণগত মান এবং স্পষ্টতা নির্ধারণ করে।
- 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>
কোডের ব্যাখ্যা:
- Light: এখানে
BABYLON.DirectionalLightব্যবহার করা হয়েছে, যা একটি নির্দিষ্ট দিক থেকে আলো ফেলে। এটি একটি সাধারণ আলো উৎস, যা ছায়া কাস্ট করার জন্য ব্যবহার করা হয়। - Shadow Generator:
BABYLON.ShadowGeneratorক্লাস ব্যবহার করা হয়েছে। এটি সেই আলো থেকে ছায়া তৈরি করবে। আমরা এটি 1024 রেজোলিউশন সহ ইনিশিয়ালাইজ করেছি। - Ground:
groundমেশ তৈরি করা হয়েছে এবং এর জন্য শ্যাডো গ্রহণ করার (receiveShadows) সেটিং করা হয়েছে। - Box: একটি বক্স মেশ তৈরি করা হয়েছে, যার জন্য শ্যাডো কাস্ট করার (castShadows) সেটিং করা হয়েছে।
- addShadowCaster:
shadowGenerator.addShadowCaster(box)ব্যবহার করে বক্সকে shadow generator এর কাছে নিবন্ধিত করা হয়েছে, যাতে এটি ছায়া তৈরি করে।
Shadow Generator এর প্রধান সুবিধাসমূহ
- বাস্তবসম্মত দৃশ্য: ছায়া যুক্ত করা আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত করে তোলে। এটি অবজেক্টের আকৃতি এবং গতি স্পষ্টভাবে দেখাতে সাহায্য করে।
- ভিন্ন আলোর উৎসের ব্যবহার: BabylonJS এ আপনি বিভিন্ন ধরনের আলো যেমন PointLight, SpotLight, DirectionalLight ইত্যাদি ব্যবহার করে বিভিন্ন ধরনের ছায়া তৈরি করতে পারেন।
- গুণগত মান নিয়ন্ত্রণ: Shadow Generator এর মাধ্যমে আপনি ছায়ার গুণগত মান, রেজোলিউশন, বায়াস ইত্যাদি কাস্টমাইজ করতে পারেন, যা দৃশ্যের বাস্তবসম্মততা বৃদ্ধি করে।
- প্রপার্টি কাস্টমাইজেশন: বিভিন্ন টেক্সচার, শ্যাডো স্যাম্পলিং, লাইট সোর্স এর মান ইত্যাদি কাস্টমাইজ করে আপনি আরও উন্নত ছায়া প্রভাব তৈরি করতে পারেন।
সারাংশ
Shadow Generator ব্যাবিলনজেএস এ একটি শক্তিশালী টুল, যা 3D দৃশ্যে অবজেক্টের জন্য ছায়া তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন লাইট উৎস থেকে ছায়া তৈরি করে এবং সেই ছায়াগুলিকে শ্যাডো ম্যাপিংয়ের মাধ্যমে প্রজেক্ট করে। Shadow Generator ব্যবহার করে আপনি আপনার দৃশ্যের ছায়া কাস্টমাইজ করতে পারেন, যেমন ছায়ার গুণগত মান, রেজোলিউশন এবং বায়াস ইত্যাদি। এটি আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত ও জীবন্ত করে তোলে।
Read more
