Skybox এবং Environment Mapping এর ধারণা

Three.js এর ভূমিকা

Three.js একটি JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। এটি WebGL প্রযুক্তির উপর ভিত্তি করে তৈরি এবং ব্রাউজারে 3D গ্রাফিক্স তৈরি করা সহজ করে তোলে। WebGL হল একটি JavaScript API যা ব্রাউজারে 3D গ্রাফিক্স রেন্ডারিং সম্ভব করে তোলে, তবে এটি সরাসরি ব্যবহার করা কিছুটা জটিল হতে পারে। Three.js এই জটিলতা কমিয়ে 3D গ্রাফিক্স তৈরির জন্য একটি সরল ইন্টারফেস সরবরাহ করে।

Three.js ব্যবহার করে আপনি 3D মডেল, অ্যানিমেশন, লাইটিং, শেডার ইত্যাদি তৈরি করতে পারেন এবং Skybox ও Environment Mapping এর মতো কৌশল ব্যবহার করে আপনার 3D দৃশ্য আরো বাস্তবসম্মত এবং গতিশীল করে তুলতে পারেন।

Skybox এবং Environment Mapping

Skybox এবং Environment Mapping হল 3D গ্রাফিক্সের দুটি শক্তিশালী কৌশল যা একটি দৃশ্যের চারপাশে একটি পরিবেশ তৈরি করে। এই কৌশলগুলো সাধারণত দৃশ্যের চারপাশে একটি আকাশ, দৃশ্যের পটভূমি বা বাস্তবসম্মত পরিবেশ তৈরি করতে ব্যবহৃত হয়।

1. Skybox কি?

Skybox হল একটি কৌশল যা 3D দৃশ্যে একটি আকাশের মতো পরিবেশ তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি বড় বাক্সের মতো ধারণা, যার ছয়টি দিক থাকে (যেমন উপরের, নিচের, বাম, ডান, সামনে, পেছনে) এবং প্রতিটি দিকের জন্য একটি ইমেজ ব্যবহার করা হয়। এই ছয়টি ইমেজ মিলিয়ে একটি পূর্ণ আকাশ তৈরি করা হয়, যা দৃশ্যের সাথে একত্রে রেন্ডার করা হয়।

Skybox এর মাধ্যমে দৃশ্যে বাস্তবসম্মত আকাশ, পর্বত, সমুদ্র বা অন্য কোনো পরিবেশ তৈরি করা সম্ভব। Three.js-এ Skybox তৈরি করতে সাধারণত CubeMap ব্যবহার করা হয়, যেখানে একটি বাক্সের ছয়টি দিকের জন্য আলাদা আলাদা টেক্সচার (ইমেজ) প্রয়োগ করা হয়।

Skybox তৈরি করার উদাহরণ:

// Scene, camera, 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);

// Skybox জন্য CubeTextureLoader ব্যবহার
var loader = new THREE.CubeTextureLoader();
loader.setPath('path_to_your_textures/');
var skyboxTexture = loader.load([
    'px.jpg', 'nx.jpg', // Positive X, Negative X
    'py.jpg', 'ny.jpg', // Positive Y, Negative Y
    'pz.jpg', 'nz.jpg'  // Positive Z, Negative Z
]);

// Scene এ skybox অ্যাসাইন করা
scene.background = skyboxTexture;

// ক্যামেরা অবস্থান নির্ধারণ
camera.position.z = 5;

// রেন্ডার ফাংশন
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

এখানে, THREE.CubeTextureLoader() ব্যবহার করে Skybox টেক্সচার লোড করা হচ্ছে এবং সেগুলি scene.background এ অ্যাসাইন করা হচ্ছে।

2. Environment Mapping কি?

Environment Mapping হল একটি কৌশল যা একটি অবজেক্টের চারপাশে একটি পরিবেশ তৈরি করে, যেখানে অবজেক্টটির রিফ্লেকশন (প্রতিফলন) সঠিকভাবে প্রদর্শিত হয়। এটি বিশেষত reflections এবং realistic lighting তৈরি করতে ব্যবহৃত হয়।

Environment Mapping সাধারণত Cube Mapping বা Spherical Mapping এর মাধ্যমে করা হয়, যেখানে একটি অবজেক্টের প্রতিফলন তৈরি করতে বাইরের পরিবেশের একটি টেক্সচার ব্যবহার করা হয়। Three.js এ, Environment Mapping তৈরির জন্য CubeTextureLoader এবং Reflection Mapping ব্যবহৃত হয়।

Environment Mapping উদাহরণ:

// Scene, camera, 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);

// CubeTextureLoader ব্যবহার করে environment map লোড করা
var loader = new THREE.CubeTextureLoader();
loader.setPath('path_to_your_textures/');
var environmentMap = loader.load([
    'px.jpg', 'nx.jpg',
    'py.jpg', 'ny.jpg',
    'pz.jpg', 'nz.jpg'
]);

// Material তৈরি করতে environment map ব্যবহার করা
var material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    envMap: environmentMap,
    roughness: 0.1,
    metalness: 0.9
});

// একটি Sphere বা অন্য কোন অবজেক্ট তৈরি করা
var geometry = new THREE.SphereGeometry(1, 32, 32);
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

// ক্যামেরা অবস্থান নির্ধারণ
camera.position.z = 5;

// রেন্ডার ফাংশন
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

এখানে, CubeTextureLoader ব্যবহার করে একটি environment map লোড করা হচ্ছে এবং এটি একটি MeshStandardMaterial এর envMap প্রপার্টিতে অ্যাসাইন করা হচ্ছে, যা স্ফিয়ারের রিফ্লেকশন তৈরি করবে।

Skybox এবং Environment Mapping এর মধ্যে পার্থক্য

সারাংশ

Skybox এবং Environment Mapping হল দুটি গুরুত্বপূর্ণ কৌশল যা 3D গ্রাফিক্স এবং বাস্তবসম্মত পরিবেশ তৈরি করতে ব্যবহৃত হয়। Skybox একটি কৌশল যা 3D দৃশ্যে একটি আকাশ বা পটভূমি তৈরি করে, যেখানে একটি বাক্সের ছয়টি দিকের টেক্সচার ব্যবহার করা হয়। অপরদিকে, Environment Mapping হল একটি কৌশল যা অবজেক্টের চারপাশে একটি পরিবেশ তৈরি করে, যাতে অবজেক্টের রিফ্লেকশন (প্রতিফলন) সঠিকভাবে প্রদর্শিত হয়।

Three.js এই কৌশলগুলো সহজে প্রয়োগ করার জন্য শক্তিশালী সরঞ্জাম সরবরাহ করে, যা 3D দৃশ্যের বাস্তবসম্মততা এবং গভীরতা বাড়াতে সাহায্য করে।