BabylonJS এ Material (মেটেরিয়াল) এমন একটি গুরুত্বপূর্ণ উপাদান যা 3D অবজেক্টের পৃষ্ঠতলের দৃশ্যমানতা নির্ধারণ করে। এটি অবজেক্টের গুণগত দিক যেমন রঙ, আলো প্রতিফলন, উজ্জ্বলতা, টেক্সচার, এবং আরও অনেক কিছু নিয়ন্ত্রণ করে। একে বলতে পারি, এটি অবজেক্টের "চেহারা" বা "ভিজ্যুয়াল অ্যাপিয়ারেন্স"।
Material এর ভূমিকা
3D গ্রাফিক্সে, একটি Material মূলত অবজেক্টের পৃষ্ঠকে আলোর সঙ্গে কিভাবে প্রতিক্রিয়া করবে তা নির্ধারণ করে। এটি গঠন, রঙ, রিফ্লেকশন, শেডিং, টেক্সচার এবং অন্যান্য অনেক বৈশিষ্ট্য পরিচালনা করে।
Material এর কিছু প্রধান বৈশিষ্ট্য হলো:
- Color: মেটেরিয়ালের রঙ।
- Transparency: কতটুকু স্বচ্ছ হবে তা নির্ধারণ করা।
- Texture: মেটেরিয়ালের পৃষ্ঠে ছবি বা টেক্সচার যোগ করা।
- Lighting Interaction: আলোর সঙ্গে কিভাবে মেটেরিয়াল প্রতিক্রিয়া করবে তা নিয়ন্ত্রণ করা।
- Specular Reflection: একটি পরিশীলিত পৃষ্ঠের মতো আলোর প্রতিফলন।
BabylonJS এ Material তৈরি এবং ব্যবহার
BabylonJS এ Material তৈরি করার জন্য আপনি BABYLON.StandardMaterial বা BABYLON.PBRMaterial ব্যবহার করতে পারেন। এখানে দুটি প্রধান ধরনের মেটেরিয়াল ব্যাখ্যা করা হচ্ছে: StandardMaterial এবং PBRMaterial।
১. StandardMaterial ব্যবহার
StandardMaterial হল সাধারণ ধরনের মেটেরিয়াল যা সহজ এবং সরল গঠন প্রদান করে। এটি পৃষ্ঠের রঙ, অ্যালফা ভ্যালু (স্বচ্ছতা), এবং অন্যান্য মৌলিক বৈশিষ্ট্য নিয়ন্ত্রণ করতে সহায়তা করে।
উদাহরণ: Basic Material ব্যবহার করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Material 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);
// StandardMaterial তৈরি করা
var material = new BABYLON.StandardMaterial("boxMaterial", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0); // লাল রঙ
box.material = material;
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে, আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- StandardMaterial তৈরি:
BABYLON.StandardMaterialদিয়ে একটি নতুন মেটেরিয়াল তৈরি করা হয়েছে। - DiffuseColor:
material.diffuseColor = new BABYLON.Color3(1, 0, 0);এই কোডের মাধ্যমে বক্সের রঙ লাল করা হয়েছে।
২. PBRMaterial (Physically Based Rendering) ব্যবহার
PBRMaterial একটি উন্নত মেটেরিয়াল যেটি বাস্তববিশ্বের আলো এবং শেডিংয়ের আচরণ অনুসরণ করে। এটি বাস্তবসম্মত শেডিং, রিফ্লেকশন এবং টেক্সচার ব্যবহার করতে সহায়তা করে। PBR মেটেরিয়াল ব্যবহার করলে আপনি 3D অবজেক্টের পৃষ্ঠতলে অধিক বাস্তবসম্মত আলোর প্রতিক্রিয়া দেখতে পাবেন।
উদাহরণ: PBRMaterial ব্যবহার করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS PBRMaterial 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 sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
// PBRMaterial তৈরি করা
var pbr = new BABYLON.PBRMaterial("pbrMaterial", scene);
pbr.albedoColor = new BABYLON.Color3(0, 0, 1); // নীল রঙ
pbr.metallic = 1.0; // মেটালিক লুক
pbr.roughness = 0.2; // রাফনেস কম, চকচকে পৃষ্ঠ
sphere.material = pbr;
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে, আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- PBRMaterial তৈরি:
BABYLON.PBRMaterialব্যবহার করে একটি উন্নত মেটেরিয়াল তৈরি করা হয়েছে। - AlbedoColor:
pbr.albedoColor = new BABYLON.Color3(0, 0, 1);এই কোডের মাধ্যমে গোলকের রঙ নীল করা হয়েছে। - Metallic:
pbr.metallic = 1.0;এটি মেটালিক লুক দেয়, যেখানে পৃষ্ঠ চকচকে হয়। - Roughness:
pbr.roughness = 0.2;এটি পৃষ্ঠের মসৃণতা নিয়ন্ত্রণ করে, কম রাফনেসে পৃষ্ঠ চকচকে হয়।
Material এর অন্যান্য প্রপার্টি
BabylonJS এর মেটেরিয়ালগুলিতে আরও অনেক প্রপার্টি ব্যবহার করা যায়, যেমন:
- SpecularColor: এটি পৃষ্ঠের প্রতিফলন এবং উজ্জ্বলতা নিয়ন্ত্রণ করে।
- EmissiveColor: এই প্রপার্টি ব্যবহার করে আপনি একটি পৃষ্ঠের আলো উৎস তৈরি করতে পারেন, অর্থাৎ এটি নিজেই আলোকিত হবে।
- Alpha: স্বচ্ছতা নিয়ন্ত্রণ করতে ব্যবহার করা হয়।
0মানে পুরোপুরি স্বচ্ছ এবং1মানে পূর্ণ অস্বচ্ছ। - ReflectionTexture: পৃষ্ঠে প্রতিফলন যোগ করার জন্য টেক্সচার ব্যবহার করা হয়।
সারাংশ
BabylonJS এ Material ব্যবহার করে আপনি 3D অবজেক্টের পৃষ্ঠের চেহারা নিয়ন্ত্রণ করতে পারেন। দুটি প্রধান ধরনের মেটেরিয়াল রয়েছে: StandardMaterial এবং PBRMaterial। StandardMaterial সহজ এবং সাধারণ, যেখানে PBRMaterial বাস্তবসম্মত শেডিং এবং আলোর প্রতিক্রিয়া দেয়। আপনি বিভিন্ন ধরনের প্রপার্টি যেমন রঙ, আলোকিত পৃষ্ঠ, স্বচ্ছতা, টেক্সচার ইত্যাদি ব্যবহার করে মেটেরিয়ালকে কাস্টমাইজ করতে পারেন।
Read more
