Bump Maps, Normal Maps, এবং Displacement Maps

Three.js এবং 3D গ্রাফিক্স

Three.js হল একটি শক্তিশালী এবং জনপ্রিয় JavaScript লাইব্রেরি যা 3D গ্রাফিক্স ওয়েব ব্রাউজারে প্রদর্শনের জন্য ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে, যা ওয়েব পেজে 3D কন্টেন্ট রেন্ডার করতে সক্ষম। Three.js দিয়ে আপনি 3D মডেল, সিম্পল জিওমেট্রি, লাইটিং, ক্যামেরা, এবং শেডার ব্যবহারের মাধ্যমে ভিজ্যুয়াল ইফেক্ট তৈরি করতে পারেন।

এই গাইডে, আমরা আলোচনা করব Bump Maps, Normal Maps, এবং Displacement Maps সম্পর্কিত কিছু বিষয়, যা Three.js-এ 3D গ্রাফিক্সকে আরও বাস্তবসম্মত এবং বিস্তারিত দেখানোর জন্য ব্যবহৃত হয়।

১. Bump Maps: একটি পরিচিতি

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

Bump Maps এর ব্যবহার:

Bump maps মূলত একটি গ্রেস্কেল ইমেজ (black and white) হয়, যেখানে সাদা অংশ উঁচু এবং কালো অংশ নিচু হিসাবে ধরা হয়। এই টেক্সচারটি Phong shading বা Lambert shading এর মতো শেডিং মডেল দ্বারা লাইটিং অপারেশনের জন্য ব্যবহৃত হয়।

Three.js-এ Bump Map ব্যবহার করা:

const textureLoader = new THREE.TextureLoader();

// Load a bump map texture
const bumpMapTexture = textureLoader.load('path/to/your/bump-map.jpg');

// Create a material with bump map
const material = new THREE.MeshStandardMaterial({
  color: 0xaaaaaa,
  bumpMap: bumpMapTexture,
  bumpScale: 0.1
});

// Create a sphere geometry with the material
const geometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

এখানে, bumpMap এবং bumpScale ব্যবহার করে আমরা 3D মডেলের উপর একধরনের পৃষ্ঠতলের বিশদ তৈরি করেছি।

২. Normal Maps: একটি পরিচিতি

Normal Mapping হল একটি উন্নত পদ্ধতি যা 3D মডেলগুলোকে আরো বিস্তারিত দেখানোর জন্য ব্যবহৃত হয়। Bump Mapping এর থেকে এটি আরও বাস্তবসম্মত, কারণ এটি পিক্সেলের অবস্থান পরিবর্তন না করে পৃষ্ঠতলের নরমাল ভেক্টর (যা লাইটের সাথে যোগাযোগ করে) পরিবর্তন করে। এতে আরও উন্নত ডিটেইল এবং লাইট ইন্টারঅ্যাকশন পাওয়া যায়।

Normal Maps এর ব্যবহার:

Normal maps একটি রঙিন (RGB) ইমেজ থাকে, যেখানে প্রতিটি পিক্সেল তিনটি ভেক্টর (X, Y, Z) নির্দেশ করে যা পৃষ্ঠতলের নরমালকে পরিবর্তন করে। সঠিক নরমাল ভেক্টর ব্যবহার করার মাধ্যমে, এই টেক্সচারগুলি লাইটিং এবং শেডিং-এর উপর বাস্তবসম্মত পরিবর্তন এনে দেয়।

Three.js-এ Normal Map ব্যবহার করা:

const textureLoader = new THREE.TextureLoader();

// Load a normal map texture
const normalMapTexture = textureLoader.load('path/to/your/normal-map.jpg');

// Create a material with normal map
const material = new THREE.MeshStandardMaterial({
  color: 0xaaaaaa,
  normalMap: normalMapTexture
});

// Create a sphere geometry with the material
const geometry = new THREE.SphereGeometry(1, 32, 32);
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

এখানে, normalMap ব্যবহার করে আমরা 3D মডেলের উপর আরো বাস্তবসম্মত পৃষ্ঠতলের বিশদ যোগ করেছি।

৩. Displacement Maps: একটি পরিচিতি

Displacement Mapping হল একটি টেকনিক যা মডেলের পৃষ্ঠতলে আসল পরিবর্তন তৈরি করে। এটি vertex displacement ব্যবহার করে, অর্থাৎ এটি পিক্সেলের অবস্থান পরিবর্তন করে মডেলের ভূগোলগত আকার পরিবর্তন করে। Bump maps এবং normal maps সাধারণত লাইটিং-এ পরিবর্তন আনলেও, displacement maps বাস্তবে পৃষ্ঠতলের ভলিউম পরিবর্তন করে।

Displacement Maps এর ব্যবহার:

Displacement maps একটি গ্রেস্কেল ইমেজ হিসেবে থাকে, যেখানে সাদা অংশ উঁচু এবং কালো অংশ নিচু, এবং এই মানগুলো ভেক্টর হিসেবে ব্যবহার করা হয় যা পৃষ্ঠতলের ভলিউম পরিবর্তন করে।

Three.js-এ Displacement Map ব্যবহার করা:

const textureLoader = new THREE.TextureLoader();

// Load a displacement map texture
const displacementMapTexture = textureLoader.load('path/to/your/displacement-map.jpg');

// Create a material with displacement map
const material = new THREE.MeshStandardMaterial({
  color: 0xaaaaaa,
  displacementMap: displacementMapTexture,
  displacementScale: 0.5
});

// Create a plane geometry with the material
const geometry = new THREE.PlaneGeometry(5, 5, 32, 32);
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

এখানে, displacementMap এবং displacementScale ব্যবহার করে আমরা মডেলের পৃষ্ঠতলে ভলিউম পরিবর্তন করেছি, যা বাস্তবসম্মত গভীরতা এবং ভলিউম তৈরির জন্য উপকারী।

Bump Maps, Normal Maps, এবং Displacement Maps এর মধ্যে পার্থক্য

সারাংশ

Bump Maps, Normal Maps, এবং Displacement Maps হল 3D গ্রাফিক্সের তিনটি গুরুত্বপূর্ণ টেকনিক যা Three.js-এ বাস্তবসম্মত পৃষ্ঠতলের ডিটেইল এবং লাইট ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়।

• Bump Maps পৃষ্ঠতলের গভীরতা অনুভূতি তৈরি করে, তবে আসলে ভলিউম পরিবর্তন করে না।
• Normal Maps পৃষ্ঠতলের নরমাল ভেক্টর পরিবর্তন করে, যা লাইট ইন্টারঅ্যাকশনকে উন্নত করে, কিন্তু পিক্সেলের অবস্থান পরিবর্তন করে না।
• Displacement Maps বাস্তবসম্মত পৃষ্ঠতল তৈরি করতে পিক্সেলের অবস্থান পরিবর্তন করে, যার ফলে ভলিউম এবং গভীরতা পরিবর্তিত হয়।

এই টেকনিকগুলো ব্যবহার করে আপনি আপনার 3D মডেলগুলোকে আরও বাস্তবসম্মত এবং ডিটেইলযুক্ত করে তুলতে পারবেন, যা Three.js এর মাধ্যমে ওয়েব ব্রাউজারে উপস্থাপন করা হয়।