Mesh এবং Material গাইড ও নোট

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

Mesh (মেশ) কী?

১. Mesh এর সংজ্ঞা

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

২. Mesh তৈরি করা

BabylonJS-এ একটি Mesh তৈরি করতে MeshBuilder ব্যবহার করা হয়, যা একটি সহজ এবং সুবিধাজনক উপায়। উদাহরণস্বরূপ, একটি বক্স তৈরি করতে:

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

এখানে:

• CreateBox: একটি বক্স তৈরি করার জন্য ব্যবহৃত ফাংশন।
• "box": Mesh এর নাম।
• {size: 2}: বক্সের আকার (২ ইউনিট সাইজ)।
• scene: যেখানে বক্সটি রেন্ডার হবে।

এছাড়া, অন্যান্য বিভিন্ন ধরনের Mesh তৈরি করার জন্য MeshBuilder এর বিভিন্ন ফাংশনও আছে, যেমন CreateSphere, CreateCylinder, CreatePlane ইত্যাদি।

Material (ম্যাটেরিয়াল) কী?

১. Material এর সংজ্ঞা

Material হল 3D অবজেক্টের পৃষ্ঠের উপাদান, যা তার রঙ, টেক্সচার, প্রতিফলন, আলোকিততা ইত্যাদি নির্ধারণ করে। সহজভাবে, এটি Mesh এর "দৃশ্যমানতা" বা "স্টাইলিং" নিয়ন্ত্রণ করে। Material এর সাহায্যে, আপনি Mesh এর পৃষ্ঠতলে বিভিন্ন বৈশিষ্ট্য প্রয়োগ করতে পারেন, যেমন রঙ, শেড, টেক্সচার ইত্যাদি।

২. Material তৈরি করা

BabylonJS-এ StandardMaterial ব্যবহার করে একটি সাধারণ Material তৈরি করা হয়। উদাহরণস্বরূপ, একটি বক্সের জন্য একটি Material তৈরি করে সেটি প্রয়োগ করা:

var material = new BABYLON.StandardMaterial("material1", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0); // রঙ লাল
box.material = material; // Material প্রয়োগ

এখানে:

• BABYLON.StandardMaterial: এটি একটি সাধারণ Material, যা সাধারণত Diffuse (প্রধান রঙ), Specular (প্রতিফলন) এবং অন্যান্য বৈশিষ্ট্য প্রদান করে।
• material.diffuseColor: এটি Material এর প্রধান রঙ নির্ধারণ করে। এখানে লাল (Red) রঙ দেওয়া হয়েছে।
• box.material = material: বক্সে তৈরি করা Material প্রয়োগ করা হয়েছে।

Mesh এবং Material একসাথে ব্যবহার করা

১. 3D অবজেক্টের জন্য Material প্রয়োগ করা

আমরা একটি 3D গোলক তৈরি করে সেটিতে Material প্রয়োগ করতে পারি:

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphereMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0); // সবুজ রঙ
sphere.material = sphereMaterial; // Material প্রয়োগ

এখানে একটি গোলক তৈরি করা হয়েছে এবং এটি একটি সবুজ রঙের Material দ্বারা সজ্জিত করা হয়েছে।

২. টেক্সচার সহ Material ব্যবহার করা

এছাড়া, আপনি StandardMaterial-এ টেক্সচারও যুক্ত করতে পারেন। নিচে একটি টেক্সচার সহ Material প্রয়োগের উদাহরণ দেওয়া হলো:

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
var boxMaterial = new BABYLON.StandardMaterial("boxMaterial", scene);
boxMaterial.diffuseTexture = new BABYLON.Texture("https://www.babylonjs.com/assets/wood.jpg", scene);
box.material = boxMaterial; // টেক্সচার সহ Material প্রয়োগ

এখানে:

• boxMaterial.diffuseTexture: এটি Material-এর পৃষ্ঠে একটি টেক্সচার প্রয়োগ করে। এখানে একটি "wood.jpg" ইমেজ টেক্সচার ব্যবহার করা হয়েছে।

Advanced Material (এডভান্সড ম্যাটেরিয়াল)

১. PBR Material

BabylonJS-এ একটি উন্নত ধরনের Material হল PBR (Physically-Based Rendering) Material। এটি বাস্তবসম্মত আলো এবং পরিবেশের প্রতিফলন তৈরি করতে ব্যবহৃত হয়। PBR Material ব্যবহার করার উদাহরণ:

var pbrMaterial = new BABYLON.PBRMaterial("pbrMaterial", scene);
pbrMaterial.albedoColor = new BABYLON.Color3(1, 0, 0); // লাল রঙ
pbrMaterial.metallic = 0.5; // ধাতবতা
pbrMaterial.roughness = 0.5; // খসখসে
box.material = pbrMaterial; // PBR Material প্রয়োগ

এখানে, albedoColor, metallic, এবং roughness গুণাবলী ব্যবহার করে আপনি বাস্তবসম্মত 3D অবজেক্ট তৈরি করতে পারেন।

সারাংশ

• Mesh হল 3D অবজেক্টের কাঠামো, যা MeshBuilder ব্যবহার করে তৈরি করা হয়।
• Material হল Mesh এর পৃষ্ঠের উপাদান, যা রঙ, টেক্সচার, প্রতিফলন ইত্যাদি নিয়ন্ত্রণ করে। StandardMaterial এবং PBRMaterial দুটি প্রধান Material ধরণ।
• Mesh এবং Material একসাথে ব্যবহার করে আপনি BabylonJS-এ আকর্ষণীয় এবং বাস্তবসম্মত 3D দৃশ্য তৈরি করতে পারেন।

এভাবে আপনি সহজেই Mesh এবং Material ব্যবহার করে আপনার 3D প্রকল্পকে উন্নত এবং আকর্ষণীয় করতে পারবেন।

BabylonJS এ Mesh হল 3D অবজেক্টের একটি মৌলিক উপাদান, যা দৃশ্যে দৃশ্যমান যেকোনো বস্তুকে উপস্থাপন করে। Mesh একটি শেপ বা অবজেক্টের জ্যামিতি এবং ভিজ্যুয়াল রিপ্রেজেন্টেশন নিয়ন্ত্রণ করে, যেমন একটি বক্স, গোলক বা পিরামিড।

Mesh কি?

Mesh হল 3D গ্রাফিক্সে ব্যবহৃত একটি অবজেক্ট যা জ্যামিতি, বেসিক শেপ, টেক্সচার, এবং অন্যান্য ভিজ্যুয়াল প্রপার্টি ধারণ করে। এর মাধ্যমে আমরা 3D মডেল তৈরি করি এবং দৃশ্যে প্রদর্শন করি।

Mesh এর প্রধান উপাদান:

1. Geometry (জ্যামিতি): Mesh এর আকৃতি বা ফর্ম। যেমন বক্স, গোলক, পিরামিড।
2. Material (ম্যাটেরিয়াল): Mesh এর পৃষ্ঠের রঙ, টেক্সচার, বা অন্যান্য ভিজ্যুয়াল বৈশিষ্ট্য।
3. Position, Rotation, এবং Scaling: Mesh এর অবস্থান, ঘূর্ণন এবং আকার নিয়ন্ত্রণ করার উপায়।
4. Physics: Mesh এর জন্য ফিজিক্স সিমুলেশন যেমন বল, গতিশীলতা, ইত্যাদি ব্যবহার করা যেতে পারে।

Mesh তৈরি করা

BabylonJS এ বিভিন্ন ধরনের Mesh তৈরি করার জন্য BABYLON.MeshBuilder ব্যবহার করা হয়। এখানে কিছু সাধারণ Mesh তৈরি করার উদাহরণ দেওয়া হলো।

১. একটি বক্স (Box) তৈরি করা

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

এই কোডটি একটি বক্স তৈরি করবে, যার সাইজ ২ ইউনিট। MeshBuilder.CreateBox ব্যবহার করে সহজেই বক্স তৈরি করা যায়।

২. একটি গোলক (Sphere) তৈরি করা

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 3}, scene);

এটি একটি গোলক তৈরি করবে, যার ব্যাসার্ধ ৩ ইউনিট। MeshBuilder.CreateSphere দিয়ে গোলক তৈরি করা হয়।

৩. একটি পিরামিড (Pyramid) তৈরি করা

var pyramid = BABYLON.MeshBuilder.CreatePolyhedron("pyramid", {type: 2, size: 3}, scene);

এটি একটি পিরামিড তৈরি করবে, যার আকার ৩ ইউনিট। MeshBuilder.CreatePolyhedron দিয়ে বিভিন্ন ধরনের পলিহেড্রন (যেমন পিরামিড) তৈরি করা যায়।

Mesh এর প্রপার্টি ও কাস্টমাইজেশন

১. পজিশন (Position)

Mesh এর অবস্থান পরিবর্তন করতে, আপনি position প্রপার্টি ব্যবহার করতে পারেন:

box.position = new BABYLON.Vector3(0, 5, 0);  // বক্সটিকে Y অক্ষে 5 ইউনিট উপরে স্থানান্তরিত করলো

২. রোটেশন (Rotation)

Mesh এর ঘূর্ণন পরিবর্তন করতে, rotation প্রপার্টি ব্যবহার করুন:

sphere.rotation = new BABYLON.Vector3(Math.PI / 4, 0, 0);  // গোলকটিকে X অক্ষে 45 ডিগ্রী ঘুরানো হল

৩. স্কেল (Scaling)

Mesh এর আকার পরিবর্তন করতে scaling প্রপার্টি ব্যবহার করা হয়:

pyramid.scaling = new BABYLON.Vector3(2, 2, 2);  // পিরামিডটির আকার দ্বিগুণ করা হল

Mesh এর সাথে Material এবং টেক্সচার যোগ করা

Mesh এর উপরের প্রপার্টিগুলোর পাশাপাশি আপনি Material এবং টেক্সচারও যোগ করতে পারেন, যা Mesh এর দেখাতে সাহায্য করে।

Material তৈরি করা

var material = new BABYLON.StandardMaterial("material1", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);  // রেড কালার
box.material = material;  // বক্সে Material অ্যাপ্লাই করা হলো

এখানে, আমরা একটি StandardMaterial তৈরি করেছি এবং বক্সটির উপর রেড কালার সেট করেছি।

টেক্সচার যোগ করা

material.diffuseTexture = new BABYLON.Texture("path_to_texture.jpg", scene);

এটি একটি টেক্সচার যোগ করবে, যা আপনার Mesh-এ প্রয়োগ হবে।

সারাংশ

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

BabylonJS এ Mesh (মেশ) হল 3D অবজেক্ট যা আপনার দৃশ্যে দৃশ্যমান হয় এবং বিভিন্ন ধরনের প্রিমিটিভ শেপের মাধ্যমে তৈরি করা হয়। এই প্রিমিটিভগুলো হল সাধারণ 3D অবজেক্ট যা BabylonJS এর MeshBuilder ক্লাসের মাধ্যমে সহজে তৈরি করা যায়। সাধারণ প্রিমিটিভ শেপগুলোর মধ্যে Box, Sphere, Plane, Cylinder, Torus এবং আরও অনেক কিছু অন্তর্ভুক্ত রয়েছে।

এই প্রিমিটিভ শেপগুলোর মাধ্যমে আপনি 3D দৃশ্যে বিভিন্ন ধরনের অবজেক্ট তৈরি করতে পারেন, যা আপনার গেম বা অ্যাপ্লিকেশনের ডিজাইনে ব্যবহার করা হয়।

১. Box (বক্স)

Box একটি চারকোণী 3D অবজেক্ট, যা সাধারণত কিউব বা রেকটেঙ্গুলার শেপ হিসেবে ব্যবহৃত হয়।

উদাহরণ:

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

বক্সের প্যারামিটার:

• size: বক্সের সাইডের দৈর্ঘ্য (যত বড় হবে, তত বড় বক্স হবে)।

২. Sphere (গোলক)

Sphere একটি গোলাকার 3D অবজেক্ট। এটি একটি সিমেট্রিক শেপ, যা গেম বা সিমুলেশন অ্যাপ্লিকেশনগুলিতে সাধারণত ব্যবহার হয়।

উদাহরণ:

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);

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

• diameter: গোলকের ব্যাসার্ধ (যত বড় ব্যাসার্ধ হবে, গোলক তত বড় হবে)।

৩. Plane (প্লেন)

Plane একটি 2D পৃষ্ঠবিশিষ্ট 3D অবজেক্ট। এটি সাধারণত মাটির স্তর, স্ক্রিন বা অন্য কোনও সমতল পৃষ্ঠের জন্য ব্যবহৃত হয়।

উদাহরণ:

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {size: 5}, scene);

প্লেনের প্যারামিটার:

• size: প্লেনের সাইজ (প্লেনের প্রস্থ এবং দৈর্ঘ্য)।

৪. Cylinder (সিলিন্ডার)

Cylinder একটি সিলিন্ড্রিকাল শেপ যা দুটি বেস এবং একটি পৃষ্ঠের মধ্যে ফাঁকা স্থান তৈরি করে। এটি সাধারণত লম্বা বা সিলিন্ড্রিকাল অবজেক্টের জন্য ব্যবহৃত হয়।

উদাহরণ:

var cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {diameter: 2, height: 5}, scene);

সিলিন্ডারের প্যারামিটার:

• diameter: সিলিন্ডারের ব্যাসার্ধ।
• height: সিলিন্ডারের উচ্চতা।

৫. Torus (টোরাস)

Torus একটি রিং শেপ যা সাধারনত ঘূর্ণন বা গতি সম্পর্কিত বিষয়গুলোর জন্য ব্যবহৃত হয়। এটি একটি সেকশনাল সিলিন্ডারের মত দেখতে, তবে এটি একটি রিংয়ের আকার ধারণ করে।

উদাহরণ:

var torus = BABYLON.MeshBuilder.CreateTorus("torus", {diameter: 3, thickness: 0.5}, scene);

টোরাসের প্যারামিটার:

• diameter: রিংয়ের প্রধান ব্যাস।
• thickness: রিংটির পুরুত্ব।

৬. Ground (গ্রাউন্ড)

Ground হল একটি বৃহত্তর প্লেন যা সাধারণত মাটির স্তর বা পৃথিবীর মত কাজ করে। এটি গেম এবং 3D সিমুলেশনগুলিতে ভিত্তি হিসেবে ব্যবহৃত হয়।

উদাহরণ:

var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 20, height: 20}, scene);

গ্রাউন্ডের প্যারামিটার:

• width: গ্রাউন্ডের প্রস্থ।
• height: গ্রাউন্ডের দৈর্ঘ্য।

৭. Pyramid (পিরামিড)

Pyramid হল একটি ত্রৈমাসিক বা প্রমিত ত্রিভুজাকৃতি 3D অবজেক্ট। এটি সাধারণত স্থাপত্যের ডিজাইন, মিশন বা গেমগুলিতে ব্যবহার করা হয়।

উদাহরণ:

var pyramid = BABYLON.MeshBuilder.CreatePolyhedron("pyramid", {type: 1, size: 2}, scene);

পিরামিডের প্যারামিটার:

• type: পিরামিডের ধরনের সংখ্যা (প্রথমে ১ ব্যবহার করতে পারেন)।
• size: পিরামিডের আকার।

৮. Cone (কোন)

Cone একটি শঙ্কু আকৃতির 3D অবজেক্ট। এটি সাধারণত পিরামিডের মতো দেখতে হলেও তার উপরের প্রান্তটা সংকুচিত হয়ে যায়। গেম বা অ্যাপ্লিকেশনে কখনও কখনও কোন ব্যবহার করা হয়।

উদাহরণ:

var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, diameterBottom: 2, height: 5}, scene);

কোনের প্যারামিটার:

• diameterTop: শীর্ষের ব্যাস (0 হলে এটি একটি শঙ্কু হবে)।
• diameterBottom: নীচের ব্যাস।
• height: কোনের উচ্চতা।

৯. Icosphere (আইকোসফিয়ার)

Icosphere একটি গাণিতিক শেপ যা আর্চিমিডিয়ান সমকোণযুক্ত এবং বিভিন্ন সিমুলেশন বা গ্রাফিক্স প্রজেক্টে ব্যবহার করা যায়।

উদাহরণ:

var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("icosphere", {radius: 3, subdivisions: 2}, scene);

আইকোসফিয়ার প্যারামিটার:

• radius: শেপের ব্যাসার্ধ।
• subdivisions: শেপটির সাবডিভিশন (যত বেশি হবে, তত সূক্ষ্ম হবে শেপটি)।

সারাংশ

BabylonJS এ বিভিন্ন ধরনের Mesh প্রিমিটিভ রয়েছে যা 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এই প্রিমিটিভ শেপগুলো সহজেই BABYLON.MeshBuilder ক্লাসের মাধ্যমে তৈরি করা যায়, এবং আপনি সেগুলোর সাইজ, রঙ, টেক্সচার, রোটেশন ইত্যাদি কাস্টমাইজ করে আপনার দৃশ্যকে আরও আকর্ষণীয় এবং বাস্তবসম্মত করতে পারেন। এগুলোর মধ্যে Box, Sphere, Plane, Cylinder, Torus, Ground, Pyramid, Cone, Icosphere ইত্যাদি অন্তর্ভুক্ত রয়েছে, যা গেম ডেভেলপমেন্ট এবং 3D অ্যাপ্লিকেশন তৈরিতে অত্যন্ত গুরুত্বপূর্ণ।

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 বাস্তবসম্মত শেডিং এবং আলোর প্রতিক্রিয়া দেয়। আপনি বিভিন্ন ধরনের প্রপার্টি যেমন রঙ, আলোকিত পৃষ্ঠ, স্বচ্ছতা, টেক্সচার ইত্যাদি ব্যবহার করে মেটেরিয়ালকে কাস্টমাইজ করতে পারেন।

BabylonJS দিয়ে 3D দৃশ্যে বাস্তবসম্মততা আনতে Texture, Bump Map, এবং Reflection Map খুব গুরুত্বপূর্ণ ভূমিকা পালন করে। এগুলোর সাহায্যে আপনি আপনার 3D মডেলের পৃষ্ঠতল (surface) আরও আকর্ষণীয়, বিস্তারিত এবং বাস্তবসম্মত করে তুলতে পারেন। চলুন, একে একে এই তিনটি উপাদান নিয়ে আলোচনা করি এবং কীভাবে BabylonJS এ এগুলি ইমপ্লিমেন্ট করা যায় তা দেখে নেওয়া যাক।

Texture (টেক্সচার)

টেক্সচার হল একটি ইমেজ যা একটি 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 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);

        // টেক্সচার লোড করা
        var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/wood.jpg", scene);

        // বক্সে টেক্সচার প্রয়োগ করা
        box.material = new BABYLON.StandardMaterial("boxMaterial", scene);
        box.material.diffuseTexture = texture;

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

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

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

• BABYLON.Texture: এখানে একটি টেক্সচার ইমেজ লোড করা হয়েছে, যা একটি ওয়েব URL থেকে নেওয়া হয়েছে (যেমন, কাঠের টেক্সচার)।
• box.material.diffuseTexture: বক্সে টেক্সচার প্রয়োগ করা হয়েছে। diffuseTexture হল পৃষ্ঠের মূল টেক্সচার।

Bump Map (বাম্প ম্যাপ)

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

১. বাম্প ম্যাপ ইমপ্লিমেন্ট করা

নিচের কোডে একটি বক্সে বাম্প ম্যাপ প্রয়োগ করা হয়েছে:

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

        // টেক্সচার লোড করা
        var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/wood.jpg", scene);

        // বাম্প ম্যাপ লোড করা
        var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/wood_bump.png", scene);

        // বক্সে টেক্সচার এবং বাম্প ম্যাপ প্রয়োগ করা
        box.material = new BABYLON.StandardMaterial("boxMaterial", scene);
        box.material.diffuseTexture = texture;
        box.material.bumpTexture = bumpMap;

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

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

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

• bumpTexture: বাম্প ম্যাপ টেক্সচার ব্যবহার করে বক্সের পৃষ্ঠের ওপর গভীরতা এবং উঁচু-নিচু অনুভূতি যোগ করা হয়েছে।

Reflection Map (রিফ্লেকশন ম্যাপ)

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

১. রিফ্লেকশন ম্যাপ ইমপ্লিমেন্ট করা

নিচের কোডে একটি বক্সে রিফ্লেকশন ম্যাপ প্রয়োগ করা হয়েছে:

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

        // রিফ্লেকশন টেক্সচার লোড করা
        var reflectionTexture = new BABYLON.CubeTexture("https://www.babylonjs-playground.com/textures/skybox", scene);

        // বক্সে রিফ্লেকশন ম্যাপ প্রয়োগ করা
        box.material = new BABYLON.StandardMaterial("boxMaterial", scene);
        box.material.reflectionTexture = reflectionTexture;
        box.material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

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

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

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

• BABYLON.CubeTexture: এখানে একটি স্কাইবক্স রিফ্লেকশন ম্যাপ ব্যবহার করা হয়েছে, যা 6টি ইমেজের স্যাম্পল দিয়ে একটি 3D বক্সের চারপাশে প্রতিবিম্ব তৈরি করে।

সারাংশ

• Texture: এটি 3D মডেলের পৃষ্ঠে একটি ইমেজ প্রয়োগ করে, যা মডেলটিকে বাস্তবসম্মত করে তোলে।
• Bump Map: এটি 3D মডেলের পৃষ্ঠের ওপর অনুভূতি তৈরি করে, যেমন গভীরতা এবং উঁচু-নিচু, যা একটি সাদামাটা পৃষ্ঠে বাস্তবতার অনুভূতি যোগ করে।
• Reflection Map: এটি 3D মডেলের পৃষ্ঠে প্রতিবিম্ব তৈরি করে, যা কাচ, পানি বা মেটাল পৃষ্ঠে ব্যবহৃত হয়।

এই তিনটি উপাদান ব্যবহার

করে আপনি আপনার 3D দৃশ্যকে আরও আকর্ষণীয় এবং বাস্তবসম্মত করতে পারবেন।