Texture Mapping কি?
Texture Mapping হল একটি গ্রাফিক্স টেকনিক যা ৩ডি মডেল বা অবজেক্টের পৃষ্ঠতলে ২ডি ইমেজ (texture) প্রয়োগ করতে ব্যবহৃত হয়। এটি ৩ডি মডেল বা অবজেক্টকে আরো বাস্তবসম্মত এবং বিস্তারিত দেখানোর জন্য ব্যবহার করা হয়। থ্রি.জেএস (Three.js) তে, এটি একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য, যা আপনাকে ৩ডি দৃশ্যগুলোতে বাস্তবসম্মত চেহারা দিতে সহায়তা করে।
টেক্সচার ম্যাপিং এর মাধ্যমে, আপনি কোনো ৩ডি অবজেক্টের পৃষ্ঠে একটি ছবি বা প্যাটার্ন মেপে দিতে পারেন, যেমন কাঠের টেক্সচার, মাটি, জল, প্রাকৃতিক দৃশ্যের ছবি ইত্যাদি। এটি সাধারণত ৩ডি গ্রাফিক্স এবং ভিডিও গেমস, অ্যানিমেশন এবং ৩ডি ভিজ্যুয়ালাইজেশনে ব্যবহৃত হয়।
Three.js তে Texture Mapping
Three.js একটি ৩ডি জাভাস্ক্রিপ্ট লাইব্রেরি, যা ৩ডি গ্রাফিক্স তৈরি এবং প্রদর্শন করতে ব্যবহৃত হয়। Three.js-এ, টেক্সচার ম্যাপিং একটি গুরুত্বপূর্ণ অংশ, যা একটি Mesh (যেমন Cube, Sphere, Plane) এর পৃষ্ঠে texture (ছবি, প্যাটার্ন) প্রয়োগ করতে ব্যবহার করা হয়।
Three.js তে টেক্সচার ব্যবহারের জন্য একটি Texture অবজেক্ট তৈরি করা হয়, এবং তারপর এই টেক্সচারটি একটি Material এর সাথে যুক্ত করা হয়, যা অবজেক্টের পৃষ্ঠে এটি প্রয়োগ করবে।
Three.js তে Texture Mapping প্রক্রিয়া
টেক্সচার ম্যাপিং এর প্রক্রিয়া কয়েকটি পদক্ষেপে সম্পন্ন হয়:
- Texture লোড করা
- Material তৈরি করা
- Mesh এ টেক্সচার অ্যাপ্লাই করা
এখানে একটি সিম্পল উদাহরণ দেওয়া হলো যেখানে একটি Cube অবজেক্টে টেক্সচার ম্যাপ করা হচ্ছে।
উদাহরণ: Three.js তে Texture Mapping
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Texture Mapping</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// 1. Scene, Camera and Renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Texture Loading
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('https://threejs.org/examples/textures/brick_diffuse.jpg'); // Example texture
// 3. Cube Geometry and Material with texture
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ map: texture });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 4. Camera Position
camera.position.z = 5;
// 5. Animation Loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
এখানে ব্যবহৃত কোডের ব্যাখ্যা:
- Scene, Camera এবং Renderer:
- Scene হল থ্রি.জেএস-এর বেস কন্টেইনার যা ৩ডি অবজেক্টগুলো ধারণ করে।
- Camera এর মাধ্যমে দৃশ্যটি কিভাবে দেখা হবে তা নির্ধারণ করা হয়।
- Renderer তে সব গ্রাফিক্স এবং দৃশ্য রেন্ডার করা হয়।
- Texture লোড করা:
THREE.TextureLoader()ক্লাস ব্যবহার করে টেক্সচার লোড করা হয়। এখানে একটি ব্রিক টেক্সচার লোড করা হয়েছে। আপনি আপনার ইচ্ছামতো অন্য কোনো টেক্সচার ব্যবহার করতে পারেন।
- Geometry এবং Material:
- একটি BoxGeometry তৈরি করা হয়েছে, যা একটি সাধারণ কিউব (Cube) তৈরি করবে।
- Material তৈরি করার সময় টেক্সচারটি
mapপ্রোপার্টি হিসেবে সেট করা হয়েছে। এর মাধ্যমে টেক্সচারটি কিউবের পৃষ্ঠে প্রয়োগ হবে।
- Cube Mesh:
- Mesh তৈরি করতে geometry এবং material একসাথে ব্যবহার করা হয়। এই Mesh-এর মাধ্যমে টেক্সচার কিউবের পৃষ্ঠে যুক্ত হয়।
- Animation Loop:
- animate() ফাংশন ব্যবহার করে কিউবটি ঘোরানো হচ্ছে। প্রতিবার রেন্ডার করার আগে কিউবের rotation.x এবং rotation.y মান বাড়ানো হচ্ছে, যাতে এটি ক্রমাগত ঘোরে।
Texture Types এবং Mapping Modes
Three.js-এ বিভিন্ন ধরনের টেক্সচার ব্যবহার করা যেতে পারে, যেমন:
- Diffuse Map: এটি সাধারণত মূল রঙের জন্য ব্যবহৃত হয়, যা অবজেক্টের পৃষ্ঠের টেক্সচার হিসেবে প্রয়োগ করা হয়।
- Normal Map: এটি অবজেক্টের পৃষ্ঠের উত্থান বা গভীরতা পরিবর্তন করতে ব্যবহৃত হয়, যাতে ছায়া ও আলো আরও বাস্তবসম্মত হয়।
- Specular Map: এটি টেক্সচারের প্রতিফলন এবং চকচকে প্রভাব নিয়ন্ত্রণ করতে ব্যবহৃত হয়।
- Bump Map: এটি নরমাল মেপের মতো কাজ করে, কিন্তু এটি পৃষ্ঠের প্রকৃত আকৃতি পরিবর্তন না করে শুধুমাত্র আলো এবং ছায়ার উপর প্রভাব ফেলে।
Mapping modes:
- UV Mapping: টেক্সচার ম্যাপিংয়ের জন্য সবচেয়ে সাধারণ এবং জনপ্রিয় পদ্ধতি যেখানে ২ডি টেক্সচারকে ৩ডি অবজেক্টের পৃষ্ঠে মেলানো হয়।
- Cube Mapping: যখন ৩ডি অবজেক্টের চারপাশে একটি পরিপূর্ণ পরিবেশ টেক্সচার করতে হয়, তখন এটি ব্যবহৃত হয়।
সারাংশ
Texture Mapping থ্রি.জেএস-এ একটি গুরুত্বপূর্ণ গ্রাফিক্স টেকনিক যা ৩ডি অবজেক্টের পৃষ্ঠে ২ডি ইমেজ প্রয়োগ করতে ব্যবহৃত হয়। এটি ৩ডি দৃশ্যগুলোকে আরও বাস্তবসম্মত এবং বিস্তারিত করে তোলে। Three.js তে টেক্সচার ম্যাপিং এর মাধ্যমে আপনি বিভিন্ন ধরনের টেক্সচার যেমন Diffuse, Normal, Specular ইত্যাদি ব্যবহার করে আপনার ৩ডি মডেলকে আরও আকর্ষণীয় এবং বাস্তবসম্মত বানাতে পারেন।
Read more
