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 দৃশ্যকে আরও আকর্ষণীয় এবং বাস্তবসম্মত করতে পারবেন।
Content added By
Read more
