BabylonJS-এ Materials ব্যবহৃত হয় 3D অবজেক্টে রঙ, টেক্সচার এবং অন্যান্য বৈশিষ্ট্য প্রয়োগ করার জন্য। তবে কখনো কখনো আপনাকে বিশেষ ধরনের Custom Shaders (নিজস্ব শেডার) অথবা Multi-Material (বহু উপকরণের ব্যবহার) প্রয়োজন হতে পারে, যা অনেক বেশি কাস্টমাইজেশন এবং রিয়েলিস্টিক ইফেক্ট তৈরি করতে সাহায্য করে। এই টিউটোরিয়ালে আমরা দুটি উন্নত Material কৌশল— Custom Shaders এবং Multi-Material—এর বিষয়ে বিস্তারিত আলোচনা করব।
১. Custom Shaders
Custom Shaders আপনাকে নিজস্ব শেডার কোড লিখে 3D দৃশ্যে বিশেষ ধরনের গ্রাফিক্স তৈরি করার সুযোগ দেয়। এটি মূলত vertex এবং fragment shaders নিয়ে কাজ করে। Vertex shader অবজেক্টের পজিশন এবং ভিউ এরিয়া হিসাব করে, এবং Fragment shader সেই পিক্সেলগুলোর রঙ নির্ধারণ করে।
Custom Shader তৈরি করা
BabylonJS-এ ShaderMaterial ক্লাস ব্যবহার করে আপনি নিজস্ব শেডার তৈরি করতে পারেন। এটি আপনাকে GLSL (OpenGL Shading Language) কোড লিখতে অনুমতি দেয়।
উদাহরণ: Basic Custom Shader
এখানে একটি বেসিক custom shader তৈরি করা হচ্ছে, যেখানে একটি সিম্পল বক্সের উপরে শেডার ব্যবহার করা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Shader 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);
// Vertex এবং Fragment শেডারের কোড
var vertexShader = `
attribute vec3 position;
attribute vec3 normal;
uniform mat4 worldViewProjection;
void main(void) {
gl_Position = worldViewProjection * vec4(position, 1.0);
}
`;
var fragmentShader = `
precision highp float;
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
}
`;
// Custom ShaderMaterial তৈরি করা
var customShader = new BABYLON.ShaderMaterial("customShader", scene, { vertex: "customVertex", fragment: "customFragment" }, {
attributes: ["position", "normal"],
uniforms: ["worldViewProjection"]
});
// বক্স তৈরি করা এবং custom shader প্রয়োগ করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.material = customShader;
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- Vertex Shader:
vertexShaderকোডে অবজেক্টের পজিশন ও ভিউ ক্যালকুলেট করা হয়। - Fragment Shader:
fragmentShaderকোডে রঙ নির্ধারণ করা হয়—এখানে শুধু লাল রঙ দেয়া হয়েছে। - ShaderMaterial:
BABYLON.ShaderMaterialব্যবহার করে custom shader material তৈরি করা হয়েছে। এখানেworldViewProjectionএবংposition,normalঅ্যাট্রিবিউটগুলো ব্যবহৃত হয়েছে।
এই ধরনের শেডার দিয়ে আপনি আপনার 3D অবজেক্টে অ্যালগোরিদমিক লাইটিং, বিশেষ ইফেক্ট, টেক্সচার এবং আরও অনেক কাস্টম ইফেক্ট অ্যাপ্লাই করতে পারবেন।
২. Multi-Material
Multi-Material একাধিক মেটেরিয়াল ব্যবহার করার পদ্ধতি, যার মাধ্যমে একটিমাত্র মেশে বিভিন্ন মেটেরিয়াল প্রয়োগ করা যায়। এটি ব্যবহৃত হয় যখন একটি অবজেক্টের বিভিন্ন অংশে আলাদা আলাদা মেটেরিয়াল প্রয়োগ করতে হয়।
Multi-Material এর পদ্ধতি
BabylonJS-এ MultiMaterial ব্যবহারের জন্য, একটি MultiMaterial অবজেক্ট তৈরি করে, এবং তার মধ্যে একাধিক মেটেরিয়াল যোগ করতে হয়। তারপর মেশটির নির্দিষ্ট অংশে (faces) আলাদা আলাদা মেটেরিয়াল অ্যাসাইন করা হয়।
উদাহরণ: Multi-Material ব্যবহার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-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 redMaterial = new BABYLON.StandardMaterial("redMaterial", scene);
redMaterial.diffuseColor = new BABYLON.Color3(1, 0, 0); // Red
// দ্বিতীয় মেটেরিয়াল: নীল
var blueMaterial = new BABYLON.StandardMaterial("blueMaterial", scene);
blueMaterial.diffuseColor = new BABYLON.Color3(0, 0, 1); // Blue
// MultiMaterial তৈরি করা
var multiMaterial = new BABYLON.MultiMaterial("multi", scene);
multiMaterial.subMaterials.push(redMaterial); // প্রথম উপকরণ
multiMaterial.subMaterials.push(blueMaterial); // দ্বিতীয় উপকরণ
// বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
// বক্সের একটি অংশে লাল মেটেরিয়াল এবং অন্য অংশে নীল মেটেরিয়াল প্রয়োগ
box.material = multiMaterial;
// মেশের বিভিন্ন ফেসে আলাদা মেটেরিয়াল অ্যাসাইন করা
box.subMeshes = [];
box.subMeshes.push(new BABYLON.SubMesh(0, 0, 6, 0, 6, box));
box.subMeshes.push(new BABYLON.SubMesh(1, 6, 6, 6, 6, box));
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- RedMaterial এবং BlueMaterial: দুটি আলাদা মেটেরিয়াল তৈরি করা হয়েছে—একটি লাল এবং অন্যটি নীল।
- MultiMaterial:
BABYLON.MultiMaterialব্যবহার করে একাধিক মেটেরিয়াল তৈরি করা হয়েছে, যেখানে দুটি মেটেরিয়াল যোগ করা হয়েছে। - SubMesh: মেশের নির্দিষ্ট অংশে আলাদা আলাদা মেটেরিয়াল অ্যাসাইন করার জন্য
SubMeshব্যবহার করা হয়েছে।
এই কৌশলটির মাধ্যমে আপনি একটি অবজেক্টে বিভিন্ন রঙ বা টেক্সচার প্রয়োগ করতে পারেন, যা আপনার 3D দৃশ্যকে আরো জটিল এবং বাস্তবসম্মত করে তুলবে।
সারাংশ
- Custom Shaders: ShaderMaterial ব্যবহার করে নিজস্ব শেডার তৈরি করা যায়, যা vertex এবং fragment shaders এর মাধ্যমে কাস্টম গ্রাফিক্স ইফেক্ট তৈরি করে। আপনি এভাবে অ্যালগোরিদমিক লাইটিং, রিয়েলিস্টিক রেন্ডারিং বা বিশেষ ইফেক্ট প্রয়োগ করতে পারেন।
- Multi-Material: একাধিক মেটেরিয়াল একসাথে ব্যবহৃত হয় একটি মেশে, যা বিভিন্ন অংশে আলাদা আলাদা রঙ বা টেক্সচার প্রয়োগ করতে সাহায্য করে।
MultiMaterialএবংSubMeshব্যবহার করে আপনি এই কাজটি করতে পারেন।
এই কৌশলগুলো আপন
াকে বিভিন্ন ধরনের কাস্টম গ্রাফিক্স এবং রিয়েলিস্টিক ইফেক্ট তৈরিতে সাহায্য করবে, যা বিশেষত 3D গেমস এবং সিমুলেশন প্রজেক্টে অত্যন্ত কার্যকর।
Read more
