Textures এবং Materials গাইড ও নোট

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

এটি মূলত একটি দৃশ্যে অবজেক্টের চেহারা ও অনুভূতি কেমন হবে, তার নিয়ন্ত্রণে গুরুত্বপূর্ণ ভূমিকা রাখে। এই গাইডে, আমরা BabylonJS-এ টেক্সচারস এবং ম্যাটেরিয়ালস ব্যবহার করার প্রক্রিয়া দেখব।

১. ম্যাটেরিয়াল (Materials) কি?

ম্যাটেরিয়াল হল একটি অবজেক্টের শেডিং এবং তার উপরের বৈশিষ্ট্যগুলির কন্ট্রোলার। এটি একটি 3D অবজেক্টের আলোর প্রতিফলন, গ্লসিনেস (glossiness), স্বচ্ছতা (transparency), এবং রঙ ইত্যাদি নির্ধারণ করে। আপনি যে ম্যাটেরিয়ালটি ব্যবহার করবেন তা একটি অবজেক্টের আউটপুট এবং দৃশ্যের চেহারা পরিবর্তন করতে সাহায্য করবে।

ম্যাটেরিয়াল প্রকার:

1. StandardMaterial: সাধারণ ম্যাটেরিয়াল যা নির্দিষ্ট রঙ এবং আলোর প্রতি প্রতিক্রিয়া প্রক্রিয়া নিয়ন্ত্রণ করে।
2. PBRMaterial: বাস্তবসম্মত শেডিং এবং আলোর প্রতিক্রিয়া উপস্থাপন করতে ব্যবহৃত হয়। এই ধরনের ম্যাটেরিয়াল সাধারণত গেম এবং সিমুলেশনে বেশি ব্যবহৃত হয়।
3. BackgroundMaterial: প্যানেল বা ব্যাকগ্রাউন্ডে ব্যবহৃত ম্যাটেরিয়াল।
4. MultiMaterial: একাধিক ম্যাটেরিয়াল ব্যবহার করে একটি একক মেশ তৈরি করতে ব্যবহৃত হয়।

StandardMaterial এর ব্যবহার:

var material = new BABYLON.StandardMaterial("material1", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0); // Red color
box.material = material;

এখানে, diffuseColor এর মাধ্যমে বক্সে রঙ পরিবর্তন করা হয়েছে।

২. টেক্সচার (Textures) কি?

টেক্সচার হল 2D ইমেজ বা ছবি যা 3D অবজেক্টের উপর প্রজেক্ট করা হয়। এটি 3D মডেলের বিস্তারিত, গঠন এবং বাস্তবসম্মততা তৈরি করতে সহায়তা করে। উদাহরণস্বরূপ, একটি মাটির টেক্সচার দিয়ে আপনি একটি মাটির বক্স তৈরি করতে পারেন।

টেক্সচার প্রকার:

1. Diffuse Texture: এটি অবজেক্টের মূল রঙ এবং প্যাটার্ন তৈরি করে।
2. Specular Texture: এটি অবজেক্টের প্রতিফলন এবং গ্লোসিনেস নির্ধারণ করে।
3. Normal Map: এটি অবজেক্টের পৃষ্ঠের অস্পষ্টতা বা রুক্ষতা তৈরি করতে ব্যবহৃত হয়।
4. Emissive Texture: এটি অবজেক্টের আলো তৈরি করতে ব্যবহৃত হয়, যা পৃষ্ঠ থেকে আলো নির্গত করে।

টেক্সচার লোড করার উদাহরণ:

var material = new BABYLON.StandardMaterial("material1", scene);
material.diffuseTexture = new BABYLON.Texture("path/to/texture.jpg", scene);
box.material = material;

এখানে, diffuseTexture প্রোপার্টির মাধ্যমে বক্সে টেক্সচার যোগ করা হয়েছে।

৩. ম্যাটেরিয়ালস এবং টেক্সচারস এর ব্যবহার

BabylonJS-এ ম্যাটেরিয়ালস এবং টেক্সচারস একে অপরের সাথে ইন্টিগ্রেটেড থাকে। আপনি যখন একটি ম্যাটেরিয়াল তৈরি করেন, তখন আপনি সেটিতে এক বা একাধিক টেক্সচার যোগ করতে পারেন, যা অবজেক্টের চেহারা আরো বাস্তবসম্মত করবে।

Diffuse, Specular, এবং Normal Maps ব্যবহার:

var material = new BABYLON.StandardMaterial("material1", scene);
material.diffuseTexture = new BABYLON.Texture("textures/diffuse.jpg", scene);
material.specularTexture = new BABYLON.Texture("textures/specular.jpg", scene);
material.bumpTexture = new BABYLON.Texture("textures/normalMap.jpg", scene);
box.material = material;

এখানে তিনটি আলাদা টেক্সচার (diffuseTexture, specularTexture, এবং bumpTexture) একত্রে ব্যবহার করা হয়েছে।

• Diffuse Texture: প্রধান রঙ এবং প্যাটার্নের জন্য।
• Specular Texture: গ্লোসিনেস এবং প্রতিফলন তৈরি করার জন্য।
• Normal Map: পৃষ্ঠের বumpy বা রুক্ষ অবস্থা তৈরি করতে।

৪. PBR (Physically Based Rendering) ম্যাটেরিয়াল

PBR (Physically Based Rendering) ম্যাটেরিয়াল গুলি বাস্তবসম্মত শেডিং, আলোর প্রতিক্রিয়া এবং টেক্সচারগুলোর আচরণ প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত গেম ডেভেলপমেন্ট এবং সিমুলেশনগুলোর জন্য অত্যন্ত গুরুত্বপূর্ণ।

PBR Material ব্যবহার:

var pbrMaterial = new BABYLON.PBRMaterial("pbrMaterial", scene);
pbrMaterial.albedoTexture = new BABYLON.Texture("textures/albedo.jpg", scene);
pbrMaterial.metallicTexture = new BABYLON.Texture("textures/metallic.jpg", scene);
pbrMaterial.roughnessTexture = new BABYLON.Texture("textures/roughness.jpg", scene);
box.material = pbrMaterial;

এখানে PBRMaterial ব্যবহার করা হয়েছে যেখানে:

• Albedo Texture: মূল রঙ এবং প্যাটার্ন।
• Metallic Texture: অবজেক্টের ধাতু (metallic) বৈশিষ্ট্য।
• Roughness Texture: পৃষ্ঠের রুক্ষতা (roughness)।

PBR ম্যাটেরিয়াল বাস্তবসম্মত আলো এবং রঙের প্রতিক্রিয়া তৈরি করতে ব্যবহৃত হয়, যা অধিক সিমুলেশন বা গেমে ব্যবহৃত হয়।

৫. ম্যাটেরিয়াল এবং টেক্সচার নিয়ে উন্নত কৌশল

Emissive Material:

এটি এমন ম্যাটেরিয়াল যা আলো তৈরি করে, এবং অন্ধকার পরিবেশে নিজেই আলো ছড়ায়।

var emissiveMaterial = new BABYLON.StandardMaterial("emissiveMaterial", scene);
emissiveMaterial.emissiveColor = new BABYLON.Color3(1, 1, 0); // Yellow light
sphere.material = emissiveMaterial;

Transparency:

প্রত্যেকটি ম্যাটেরিয়ালটি স্বচ্ছ (transparent) করা যেতে পারে যাতে পেছনের অবজেক্ট দৃশ্যমান হয়।

var transparentMaterial = new BABYLON.StandardMaterial("transparentMaterial", scene);
transparentMaterial.alpha = 0.5; // 50% transparency
box.material = transparentMaterial;

Reflection and Refraction:

আপনি Reflection বা Refraction ম্যাটেরিয়াল ব্যবহার করতে পারেন, যা পানির মতো বা শীতল কাচের মতো প্রতিফলিত বা ভেঙে পড়া (refract) ঘটায়।

সারাংশ

BabylonJS-এ ম্যাটেরিয়ালস এবং টেক্সচারস অবজেক্টের চেহারা এবং বাস্তবসম্মততা তৈরি করতে ব্যবহৃত হয়। ম্যাটেরিয়াল একটি অবজেক্টের শেডিং এবং আউটপুট নিয়ন্ত্রণ করে, যেখানে টেক্সচার এটি পৃষ্ঠে প্রজেক্ট করা হয়। আপনি বিভিন্ন ধরনের টেক্সচার (যেমন, diffuse, normal map, specular) এবং ম্যাটেরিয়াল (যেমন, StandardMaterial, PBRMaterial) ব্যবহার করে 3D দৃশ্যকে আরও বাস্তবসম্মত এবং আকর্ষণীয় করতে পারেন। PBR ম্যাটেরিয়াল উন্নত শেডিং এবং আলো-প্রতিক্রিয়া তৈরি করে, যা সিমুলেশন এবং গেম ডেভেলপমেন্টে বিশেষভাবে গুরুত্বপূর্ণ।

Texture Mapping হলো একটি প্রক্রিয়া যার মাধ্যমে 2D ছবি বা টেক্সচারকে 3D অবজেক্টের উপর প্রজেক্ট করা হয়, যাতে অবজেক্টটি আরও বাস্তবসম্মত দেখায়। এই প্রক্রিয়া 3D মডেলিং ও রেন্ডারিংয়ে গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এটি অবজেক্টগুলোর পৃষ্ঠতলে বিস্তারিত এবং বাস্তবসম্মত দৃশ্য যোগ করে। BabylonJS এ, texture mapping এর মাধ্যমে আপনি আপনার 3D অবজেক্টের পৃষ্ঠে ছবি, রং, প্যাটার্ন এবং অন্যান্য ডিটেইলস যোগ করতে পারেন।

Texture Mapping কি?

Texture Mapping হল 3D গ্রাফিক্সের একটি প্রক্রিয়া যেখানে 2D ইমেজ বা texture কে একটি 3D অবজেক্টের পৃষ্ঠের উপর "ম্যাপ" করা হয়। এটি অবজেক্টকে আরো বাস্তবসম্মত দেখানোর জন্য ব্যবহৃত হয়। এই পদ্ধতিতে অবজেক্টের পৃষ্ঠের বিভিন্ন কোণ বা পয়েন্টে টেক্সচার লেপণ করা হয়, যাতে তা বাস্তব জীবন থেকে কোন অবজেক্টের মতো মনে হয়।

টেক্সচার সাধারণত একটি ছবি বা প্যাটার্ন হয় যা অবজেক্টের পৃষ্ঠে স্থাপন করা হয়। এটি গ্রাফিক্স ডিজাইন, গেম ডেভেলপমেন্ট, এনিমেশন এবং অন্যান্য 3D গ্রাফিক্স অ্যাপ্লিকেশনে ব্যাপকভাবে ব্যবহৃত হয়।

Texture Mapping এর বিভিন্ন ধরনের পদ্ধতি

১. Diffuse Mapping (ডিফিউজ ম্যাপিং)

এটি একটি টেক্সচার মেপিং পদ্ধতি যেখানে টেক্সচার 3D অবজেক্টের পৃষ্ঠে অ্যাপ্লাই করা হয়, যাতে অবজেক্টের পৃষ্ঠের রঙ বা প্যাটার্ন পরিবর্তিত হয়। এটি সাধারণত diffuse map হিসেবে পরিচিত, যা একে একে 3D অবজেক্টের চেহারা বাস্তবসম্মত করে তোলে।

২. Bump Mapping (বাম্প ম্যাপিং)

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

৩. Normal Mapping (নরমাল ম্যাপিং)

এটি বাম্প ম্যাপিংয়ের মতো, কিন্তু এটি আরো উন্নত। এটি অবজেক্টের পৃষ্ঠের নরমাল ভেক্টর পরিবর্তন করে, যার ফলে আলোর সাথে ইন্টারঅ্যাকশন আরও বাস্তবসম্মত হয় এবং পৃষ্ঠের গভীরতা ভালোভাবে ফুটে ওঠে।

৪. Specular Mapping (স্পেকুলার ম্যাপিং)

এটি টেক্সচারের মাধ্যমে একটি অবজেক্টের প্রতিফলন বা ঝলকান (shininess) প্রভাব তৈরি করতে ব্যবহৃত হয়। এতে, টেক্সচারটি পৃষ্ঠের কোথায় বেশি বা কম শাইনিং হবে তা নির্ধারণ করে।

৫. Reflection Mapping (রিফ্লেকশন ম্যাপিং)

এটি টেক্সচার ম্যাপিংয়ের আরেকটি পদ্ধতি, যেখানে একটি দৃশ্য বা পরিবেশের প্রতিফলন (reflection) একটি 3D অবজেক্টে দেখা যায়। এটি সাধারণত মেটাল, জল বা অন্যান্য প্রতিফলিত পৃষ্ঠের জন্য ব্যবহৃত হয়।

BabylonJS এ Texture Mapping

BabylonJS এ টেক্সচার ম্যাপিং খুব সহজ এবং সরল। BabylonJS এর StandardMaterial বা PBRMaterial (Physically Based Rendering) এর মাধ্যমে আপনি 3D অবজেক্টের উপরে টেক্সচার অ্যাপ্লাই করতে পারেন।

একটি বেসিক টেক্সচার অ্যাপ্লিকেশন উদাহরণ

ধরা যাক, আমরা একটি বক্সের ওপর একটি ইমেজ টেক্সচার অ্যাপ্লাই করব। নিচে একটি সহজ উদাহরণ দেয়া হল:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS Texture Mapping 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 box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

        // টেক্সচার তৈরি করা
        var texture = new BABYLON.Texture("https://www.babylonjs.com/assets/texture.jpg", scene);

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

        // মেটিরিয়ালে টেক্সচার অ্যাসাইন করা
        material.diffuseTexture = texture;

        // বক্সে মেটিরিয়াল অ্যাপ্লাই করা
        box.material = material;

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

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

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

1. Canvas: canvas এলিমেন্টে 3D দৃশ্য রেন্ডার করা হবে।
2. Engine এবং Scene: BabylonJS ইঞ্জিন এবং দৃশ্য তৈরি করা হয়েছে।
3. Box Mesh: একটি বক্স মেশ তৈরি করা হয়েছে।
4. Texture: টেক্সচার হিসেবে একটি ইমেজ ব্যবহার করা হয়েছে (এখানে একটি URL দিয়েছি, আপনি আপনার নিজের ইমেজও ব্যবহার করতে পারেন)।
5. Material: StandardMaterial ব্যবহার করা হয়েছে এবং এর diffuseTexture প্রপার্টিতে টেক্সচার অ্যাসাইন করা হয়েছে।
6. Apply Material: অবশেষে, বক্সে সেই মেটিরিয়াল অ্যাপ্লাই করা হয়েছে।

Texture Mapping এর সুবিধাসমূহ

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

সারাংশ

Texture Mapping হল একটি 3D অবজেক্টের পৃষ্ঠে 2D ছবি বা টেক্সচার প্রজেক্ট করার প্রক্রিয়া, যা অবজেক্টটিকে আরো বাস্তবসম্মত এবং জীবন্ত দেখায়। BabylonJS এ টেক্সচার অ্যাপ্লাই করা খুবই সহজ, যেখানে আপনি StandardMaterial বা PBRMaterial এর মাধ্যমে টেক্সচার অ্যাসাইন করে 3D অবজেক্টের চেহারা পরিবর্তন করতে পারেন। বিভিন্ন ধরনের টেক্সচার ম্যাপিং পদ্ধতি যেমন diffuse mapping, bump mapping, normal mapping এবং specular mapping ব্যবহার করে, আপনি 3D দৃশ্যে বিস্তারিত এবং বাস্তবসম্মত রূপান্তর করতে পারেন।

BabylonJS-এ Maps (ম্যাপস) বিভিন্ন ধরনের টেক্সচার বা বৈশিষ্ট্য যোগ করতে ব্যবহৃত হয়, যা 3D অবজেক্টের চেহারা এবং অনুভূতি পরিবর্তন করে। এই ম্যাপসগুলো বিভিন্ন শেডিং, লাইটিং এবং আউটপুট এফেক্টস তৈরি করতে সাহায্য করে। এখানে আমরা Diffuse Map, Bump Map, Opacity Map এবং Reflection Map-এর ব্যবহার দেখব।

১. Diffuse Map

Diffuse Map (ডিফিউজ ম্যাপ) সাধারণত একটি টেক্সচার হিসেবে ব্যবহৃত হয় যা 3D অবজেক্টের রঙ এবং প্যাটার্ন নিয়ন্ত্রণ করে। এটি মূলত একে আকর্ষণীয় এবং বাস্তবসম্মত দেখানোর জন্য ব্যবহৃত হয়।

কোড উদাহরণ:

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
var diffuseTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/textures/wood.jpg", scene);
var material = new BABYLON.StandardMaterial("boxMaterial", scene);
material.diffuseTexture = diffuseTexture;  // Diffuse Map যোগ করা
box.material = material;

এখানে, Diffuse Map হিসেবে একটি কাঠের টেক্সচার যোগ করা হয়েছে, যা বক্সের পৃষ্ঠে দেখাবে।

২. Bump Map

Bump Map (বাম্প ম্যাপ) 3D অবজেক্টের পৃষ্ঠে গভীরতা বা টেক্সচারগত বিশদ বৃদ্ধি করার জন্য ব্যবহৃত হয়। এটি সরাসরি অবজেক্টের জ্যামিতি পরিবর্তন না করেও, পৃষ্ঠের উঁচু-নিচু অনুভূতি তৈরি করে।

কোড উদাহরণ:

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 3}, scene);
var bumpTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/textures/bumpySurface.jpg", scene);
var material = new BABYLON.StandardMaterial("sphereMaterial", scene);
material.bumpTexture = bumpTexture;  // Bump Map যোগ করা
sphere.material = material;

এখানে, Bump Map হিসেবে একটি বাম্পি সারফেস টেক্সচার যোগ করা হয়েছে, যা গোলকের পৃষ্ঠে গভীরতা তৈরি করবে।

৩. Opacity Map

Opacity Map (অপাসিটি ম্যাপ) ব্যবহৃত হয় অবজেক্টের কিছু অংশ স্বচ্ছ (transparent) বা অস্বচ্ছ (opaque) করতে। এটি অবজেক্টের ভিজ্যুয়াল এফেক্টস তৈরি করতে সহায়ক, যেমন কাচ বা জলপূর্ণ অবজেক্টের মতো প্রভাব।

কোড উদাহরণ:

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {size: 5}, scene);
var opacityTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/textures/opacityMap.png", scene);
var material = new BABYLON.StandardMaterial("planeMaterial", scene);
material.opacityTexture = opacityTexture;  // Opacity Map যোগ করা
plane.material = material;

এখানে, Opacity Map হিসেবে একটি PNG ছবি ব্যবহার করা হয়েছে, যেখানে সাদা অংশ হবে সম্পূর্ণ অস্বচ্ছ এবং কালো অংশ হবে স্বচ্ছ।

৪. Reflection Map

Reflection Map (রিফ্লেকশন ম্যাপ) ব্যবহার করে 3D অবজেক্টে প্রতিবিম্ব (reflection) তৈরি করা হয়। এটি বিশেষত পানির পৃষ্ঠ বা মেটালিক অবজেক্টে খুব কার্যকরী, যেখানে আশপাশের পরিবেশের প্রতিবিম্ব দেখতে পাওয়া যায়।

কোড উদাহরণ:

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 3}, scene);
var reflectionTexture = new BABYLON.CubeTexture("https://www.babylonjs.com/assets/reflection/", scene);
var material = new BABYLON.StandardMaterial("sphereMaterial", scene);
material.reflectionTexture = reflectionTexture;  // Reflection Map যোগ করা
material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;  // রিফ্লেকশন মুড সেট করা
sphere.material = material;

এখানে, Reflection Map হিসেবে একটি CubeTexture ব্যবহার করা হয়েছে, যা একটি সিলিন্ডার বা গোলকের ওপর প্রতিবিম্ব যোগ করবে।

সারাংশ

এগুলি ছিল Diffuse, Bump, Opacity, এবং Reflection Maps ব্যবহারের পদ্ধতি। এই ম্যাপগুলো বিভিন্ন বৈশিষ্ট্য যোগ করে 3D অবজেক্টকে আরও বাস্তবসম্মত এবং আকর্ষণীয় করে তোলে। আপনি এই ম্যাপগুলোকে একত্রিত করে আরও উন্নত ভিজ্যুয়াল এবং এনিমেশন তৈরি করতে পারবেন, যা গেম ডেভেলপমেন্ট এবং অন্যান্য 3D অ্যাপ্লিকেশনে খুবই কার্যকর।

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

PBR Material এর বৈশিষ্ট্য

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

1. Diffuse/Albedo: একটি অবজেক্টের রঙ বা মূল টেক্সচার।
2. Specular/Metallic: আলোর প্রতিফলন এবং অবজেক্টের মেটালিক কোঅফিসিয়েন্ট। এটি পৃষ্ঠের গুণাবলী যেমন মেটালিক, প্লাস্টিক বা গ্লাসের মতো পদার্থের বিশেষত্ব নির্ধারণ করে।

প্রধান বৈশিষ্ট্য:

• Base color: অবজেক্টের মৌলিক রঙ
• Metallic: কি পরিমাণ মেটালিক সমগ্র অবজেক্টের মধ্যে থাকবে
• Roughness: পৃষ্ঠের মসৃণতা বা খসখসে ভাব
• Ambient Occlusion: পৃষ্ঠের ছায়া এবং আলো নিয়ে একটি নির্দিষ্ট প্রতিফলন
• Normal map: অবজেক্টের পৃষ্ঠের অদৃশ্য বক্রতা নির্দেশ করে

PBR Material তৈরি করা

BabylonJS-এ PBR মেটেরিয়াল তৈরি করতে PBRMaterial ক্লাস ব্যবহার করা হয়। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে PBR মেটেরিয়াল ব্যবহার করে একটি বক্স তৈরি করা হয়েছে।

উদাহরণ: PBR Material দিয়ে বক্স তৈরি করা

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

// PBR মেটেরিয়াল তৈরি করা
var pbr = new BABYLON.PBRMaterial("pbr", scene);

// PBR মেটেরিয়ালের রঙ এবং অন্যান্য বৈশিষ্ট্য সেট করা
pbr.albedoColor = new BABYLON.Color3(1, 0, 0); // লাল রঙ
pbr.metallic = 0.5; // মেটালিক বৈশিষ্ট্য
pbr.roughness = 0.4; // খসখসে বৈশিষ্ট্য

// বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.material = pbr; // পব্র মেটেরিয়াল বক্সে অ্যাপ্লাই করা

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

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

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

• PBRMaterial: BABYLON.PBRMaterial ক্লাসটি ব্যবহার করে PBR মেটেরিয়াল তৈরি করা হয়েছে।
• albedoColor: এটি অবজেক্টের বেস কালার বা আলবেডো রঙ সেট করতে ব্যবহৃত হয়।
• metallic: মেটালিক মান 0 থেকে 1 পর্যন্ত হতে পারে, যেখানে 0 হল নন-মেটালিক এবং 1 হল পুরোপুরি মেটালিক।
• roughness: এটি অবজেক্টের পৃষ্ঠের খসখসে ভাব নির্দেশ করে। 0 মানে সম্পূর্ণ মসৃণ, 1 মানে খসখসে।

PBR Material এর অন্যান্য বৈশিষ্ট্য

১. Roughness and Metallic

roughness এবং metallic PBR মেটেরিয়ালের মূল উপাদান। এগুলি অবজেক্টের পৃষ্ঠের খসখসে ভাব এবং মেটালিক গুণাবলী নিয়ন্ত্রণ করে।

pbr.roughness = 0.5; // মাঝারি খসখসে
pbr.metallic = 0.9; // অধিক মেটালিক

২. Normal Maps

Normal Maps ব্যবহার করে আপনি পৃষ্ঠের ছোট ছোট বিবরণ বা বক্রতা সৃষ্টি করতে পারেন। এটি অবজেক্টের টেক্সচারকে আরও বাস্তবসম্মত এবং বিস্তারিত করে তোলে।

pbr.bumpTexture = new BABYLON.Texture("path_to_normal_map.jpg", scene);

৩. Ambient Occlusion (AO)

Ambient Occlusion (AO) হল একটি টেক্সচার যা অবজেক্টের ছায়া এবং আলো নিয়ন্ত্রণ করে। এটি দৃশ্যের গভীরতা এবং রিয়েলিজম বাড়ায়।

pbr.ambientTexture = new BABYLON.Texture("path_to_ao_map.jpg", scene);

৪. Emissive Texture

Emissive Texture অবজেক্টের আলোকিত অংশ তৈরি করতে ব্যবহৃত হয়। এটি আপনার 3D অবজেক্টকে আলো প্রদান করতে সহায়তা করে।

pbr.emissiveColor = new BABYLON.Color3(1, 1, 1); // সাদা আলো

PBR Material এর সাথে সম্পূর্ণ উদাহরণ

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

// PBR মেটেরিয়াল তৈরি করা
var pbr = new BABYLON.PBRMaterial("pbr", scene);

// PBR মেটেরিয়ালের বৈশিষ্ট্য সেট করা
pbr.albedoColor = new BABYLON.Color3(0.2, 0.6, 1); // নীল রঙ
pbr.metallic = 0.7; // কিছুটা মেটালিক
pbr.roughness = 0.3; // মসৃণ পৃষ্ঠ
pbr.bumpTexture = new BABYLON.Texture("path_to_normal_map.jpg", scene); // নরমাল ম্যাপ
pbr.ambientTexture = new BABYLON.Texture("path_to_ao_map.jpg", scene); // AO টেক্সচার

// বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.material = pbr; // পব্র মেটেরিয়াল বক্সে অ্যাপ্লাই করা

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

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

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

• এখানে আমরা একটি PBR মেটেরিয়াল তৈরি করেছি যেখানে আলবেডো রঙ, মেটালিক বৈশিষ্ট্য, রoughness, নরমাল ম্যাপ এবং AO টেক্সচার অ্যাপ্লাই করা হয়েছে।
• পৃষ্ঠের বিস্তারিত এবং বাস্তবসম্মতভাবে আলোর প্রতিফলন তৈরি করা হয়েছে।

সারাংশ

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

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 গেমস এবং সিমুলেশন প্রজেক্টে অত্যন্ত কার্যকর।