Skyboxes এবং Environments

Three.js এবং 3D Environments

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

Skyboxes এবং Environments Three.js এর দুটি গুরুত্বপূর্ণ অংশ, যা 3D দৃশ্যের পারিপার্শ্বিক পরিবেশ তৈরি করে এবং একটি বাস্তবসম্মত অভিজ্ঞতা প্রদান করে।

Skyboxes: একটি 3D পরিবেশের অংশ

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

Skybox কীভাবে কাজ করে?

Skybox একটি 6-পক্ষবিশিষ্ট বাক্সের মতো কাজ করে, যা চারপাশে টেক্সচার যুক্ত করা থাকে। এই বাক্সটি 3D দৃশ্যে ক্যামেরার চারপাশে স্থাপন করা হয়, যা ব্যবহারকারীর দৃষ্টিকোণ থেকে আকাশ বা পরিবেশের মতো মনে হয়। যখন ব্যবহারকারী দৃশ্যের মধ্যে চলাফেরা করেন, তখন তারা এটি দেখতে পান, এবং Skyboxটি ক্যামেরার অবস্থান অনুযায়ী পরিবর্তিত হয় না।

Three.js এ Skybox সেটআপ করা

Three.js এ Skybox তৈরি করতে, আমরা একটি CubeTextureLoader ব্যবহার করি যা 6টি আলাদা টেক্সচার লোড করে এবং একটি CubeMap তৈরি করে। এরপর এই CubeMap টেক্সচারটি scene এ যোগ করা হয়।

// Basic scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Load Skybox textures
const loader = new THREE.CubeTextureLoader();
const skyboxTexture = loader.load([
  'path/to/px.jpg', // right
  'path/to/nx.jpg', // left
  'path/to/py.jpg', // top
  'path/to/ny.jpg', // bottom
  'path/to/pz.jpg', // front
  'path/to/nz.jpg', // back
]);

// Set skybox as background
scene.background = skyboxTexture;

// Create a basic object to interact with the scene
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Camera position
camera.position.z = 5;

// Render the scene
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

এখানে, CubeTextureLoader ব্যবহার করে 6টি আলাদা টেক্সচার লোড করা হয়েছে যা স্কাইবক্স তৈরি করবে এবং scene.background হিসেবে সেট করা হয়েছে।

Environments: 3D দৃশ্যের পরিপূর্ণতা

Environment Mapping হল একটি গ্রাফিক্স টেকনিক যা বাস্তবসম্মত পরিবেশ তৈরি করতে ব্যবহৃত হয়, যেমন আকাশ, সূর্য, সাগর ইত্যাদি। Three.js-এ Environment Mapping সাধারণত Reflection Mapping বা Refraction Mapping এর মাধ্যমে তৈরি করা হয়। এটি 3D মডেলগুলোর উপর বাস্তবসম্মত প্রতিফলন (Reflection) বা বিচ্ছুরণ (Refraction) প্রদর্শন করতে সাহায্য করে।

Three.js এ Environment Mapping

Three.js এ CubeMap বা Spherical Map ব্যবহার করে পরিবেশ তৈরি করা হয়, যা 3D মডেলগুলোর উপর প্রাকৃতিক প্রতিফলন সৃষ্টি করতে ব্যবহৃত হয়।

Environment Mapping এর একটি সাধারণ উদাহরণ হতে পারে একটি জলাশয়ে আকাশের প্রতিফলন, যেখানে স্কাইবক্সটি জলাশয়ে প্রতিফলিত হবে।

Three.js এ Environment Mapping উদাহরণ

// Basic scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Load environment map (CubeMap)
const loader = new THREE.CubeTextureLoader();
const environmentMap = loader.load([
  'path/to/px.jpg', // right
  'path/to/nx.jpg', // left
  'path/to/py.jpg', // top
  'path/to/ny.jpg', // bottom
  'path/to/pz.jpg', // front
  'path/to/nz.jpg', // back
]);

// Set environment map as the background
scene.background = environmentMap;

// Create a reflective sphere
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
const sphereMaterial = new THREE.MeshBasicMaterial({
  envMap: environmentMap,  // Set environment map
  reflectivity: 1,         // High reflectivity for better reflection
});
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

// Camera position
camera.position.z = 5;

// Render the scene
function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

এখানে, CubeTextureLoader ব্যবহার করে 6টি টেক্সচার লোড করা হয়েছে যা পরিবেশের ছবি তৈরি করবে এবং envMap এর মাধ্যমে মডেলের প্রতিফলন নির্ধারণ করা হয়েছে।

সারাংশ

Skyboxes এবং Environments Three.js এর গুরুত্বপূর্ণ উপাদান যা 3D দৃশ্যের প্রাকৃতিক পরিবেশ তৈরি করতে সহায়তা করে। Skyboxes 3D দৃশ্যের আশেপাশে একটি বক্সের মতো পরিবেশ তৈরি করে, যা দৃশ্যের পটভূমি হিসেবে কাজ করে। অন্যদিকে, Environment Mapping মডেলগুলির উপর প্রতিফলন এবং বিচ্ছুরণ তৈরি করতে ব্যবহৃত হয়। এই দুটি প্রযুক্তি Three.js এর মাধ্যমে 3D ওয়েব অ্যাপ্লিকেশন এবং গেম ডেভেলপমেন্টে বাস্তবসম্মত এবং ইন্টারঅ্যাক্টিভ পরিবেশ তৈরি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

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 দৃশ্যের বাস্তবসম্মততা এবং গভীরতা বাড়াতে সাহায্য করে।

Three.js এবং Skybox

Three.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি WebGL এর উপর ভিত্তি করে কাজ করে, যা ব্রাউজারে 3D গ্রাফিক্স রেন্ডারিং সহজ করে তোলে। Skybox হল একটি 3D পরিবেশের চারপাশে একটি দৃশ্যমান বক্স, যা সাধারণত 6টি বেসিক ইমেজ (চারটি পাশ, একটি উপরের এবং একটি নিচের) দ্বারা গঠিত।

CubeTextureLoader হলো Three.js এর একটি বিশেষ ক্লাস যা 6টি ইমেজের একটি সেট লোড করে এবং সেটিকে একটি স্কাইবক্স হিসেবে ব্যবহার করার জন্য প্রস্তুত করে। এটি সাধারণত স্কাইবক্স তৈরি করতে ব্যবহৃত হয়, যাতে আপনি একটি 3D দৃশ্যের চারপাশে একটি পরিবেশ সৃষ্টি করতে পারেন।

CubeTextureLoader দিয়ে Skybox তৈরি করার ধাপ

এখানে, Three.js এর CubeTextureLoader ব্যবহার করে কিভাবে একটি স্কাইবক্স তৈরি করতে হয়, তা নিয়ে আলোচনা করা হবে।

১. প্রথমে Three.js লাইব্রেরি ইনক্লুড করুন

প্রথমেই আপনাকে Three.js লাইব্রেরি ইনক্লুড করতে হবে। আপনি এটি CDN থেকে লোড করতে পারেন অথবা আপনার প্রোজেক্টে ইনস্টল করতে পারেন।

CDN ব্যবহার করে:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

NPM ব্যবহার করে:

npm install three

২. Scene, Camera এবং Renderer সেটআপ

Three.js ব্যবহার করতে হলে, একটি Scene, Camera, এবং Renderer প্রয়োজন। এই তিনটি উপাদান হলো আপনার 3D পরিবেশের মূল অংশ।

// Scene তৈরি করুন
const scene = new THREE.Scene();

// Camera তৈরি করুন
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// WebGLRenderer তৈরি করুন
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

৩. CubeTextureLoader দিয়ে Skybox লোড করা

CubeTextureLoader ব্যবহার করে 6টি ইমেজের একটি সেট লোড করতে হবে। এটি 6টি ইমেজের মাধ্যমে একটি স্কাইবক্স তৈরি করবে।

const loader = new THREE.CubeTextureLoader();

// 6টি ইমেজের পাথ
const texture = loader.load([
  'path/to/px.jpg', // Positive X
  'path/to/nx.jpg', // Negative X
  'path/to/py.jpg', // Positive Y
  'path/to/ny.jpg', // Negative Y
  'path/to/pz.jpg', // Positive Z
  'path/to/nz.jpg', // Negative Z
]);

// Scene এ স্কাইবক্স যোগ করুন
scene.background = texture;

এখানে, loader.load() মেথডে 6টি পাথ দেওয়া হয়েছে যা স্কাইবক্সের বিভিন্ন দিককে নির্দেশ করে। ইমেজগুলির পাথ আপনাকে আপনার প্রোজেক্ট ফোল্ডারে উপযুক্তভাবে সেট করতে হবে।

৪. অবজেক্ট যোগ করা এবং ক্যামেরা সেট করা

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

// Cube তৈরি করুন
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

// Animate ফাংশন
function animate() {
  requestAnimationFrame(animate);

  // কিউবের রোটেশন
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // রেন্ডার
  renderer.render(scene, camera);
}

animate();

এখানে, animate() ফাংশনটি রেন্ডারিং চক্র চালায়, যেখানে কিউবটি প্রতি ফ্রেমে ঘোরানো হচ্ছে। এইভাবে, আপনার স্কাইবক্সের মধ্যে কিউবটি প্রদর্শিত হবে।

৫. পর্ণামানিক রেসপন্সিভ ডিজাইন

এখন আমরা ব্রাউজার সাইজ পরিবর্তন হলে রেন্ডারিং সঠিকভাবে কাজ করবে এমন একটি ফিচার যোগ করতে পারি। এর জন্য resize ইভেন্টে রেন্ডারার এবং ক্যামেরার রেশিও আপডেট করতে হবে।

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

এটি স্ক্রীনের আকার পরিবর্তন হলে সঠিকভাবে স্ক্রীন রিসাইজ করবে।

সম্পূর্ণ কোড

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Skybox with Three.js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
  <script>
    // Scene, Camera and Renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Load Skybox with CubeTextureLoader
    const loader = new THREE.CubeTextureLoader();
    const texture = loader.load([
      'path/to/px.jpg', 'path/to/nx.jpg', 'path/to/py.jpg', 'path/to/ny.jpg', 'path/to/pz.jpg', 'path/to/nz.jpg'
    ]);
    scene.background = texture;

    // Create a Cube
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // Position camera
    camera.position.z = 5;

    // Animation function
    function animate() {
      requestAnimationFrame(animate);

      // Cube rotation
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      // Render scene
      renderer.render(scene, camera);
    }

    // Window resize listener
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });

    animate();
  </script>
</body>
</html>

সারাংশ

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

HDRI (High Dynamic Range Imaging) এর ভূমিকা

HDRI (High Dynamic Range Imaging) একটি প্রযুক্তি যা ইমেজের উজ্জ্বলতা এবং কনট্রাস্টের উচ্চ মান বজায় রেখে অধিক পরিসর এবং বিশদ প্রদর্শন করতে সহায়তা করে। এটি মূলত ৩ডি পরিবেশে বাস্তবসম্মত আলোর উৎস হিসেবে ব্যবহৃত হয়। ৩ডি ভিজুয়ালাইজেশন এবং রেন্ডারিংয়ের ক্ষেত্রে, HDRI ছবিগুলি একটি দৃশ্যের আলোক ব্যবস্থা (lighting) এবং পরিবেশের সঠিক প্রতিফলন (reflection) এবং আবহ তৈরি করতে সাহায্য করে।

Three.js একটি শক্তিশালী ৩ডি গ্রাফিক্স লাইব্রেরি, যা এই HDRI ইমেজ এবং রেন্ডারিং কৌশলগুলো সহজে ইমপ্লিমেন্ট করতে সহায়তা করে। Three.js ব্যবহার করে আপনি এই ধরনের ইমেজ ব্যবহার করে আপনার ৩ডি সিনে অত্যন্ত বাস্তবসম্মত আলোক ব্যবস্থা তৈরি করতে পারেন, যা গ্রাফিক্সে একটি উচ্চ মানের ভিজ্যুয়াল ইফেক্ট তৈরি করতে সক্ষম।

Three.js এ HDRI Environment Mapping এবং Lighting ব্যবহার

Three.js এ HDRI Environment Mapping এবং Lighting কনফিগার করার জন্য, আপনাকে প্রথমে একটি HDRI ইমেজ লোড করতে হবে এবং তারপরে সেটি একটি লাইট সোর্স বা পরিবেশ হিসেবে ব্যবহার করতে হবে। এই প্রক্রিয়া সাধারণত Scene এ আলোর উৎস হিসেবে কাজ করে, যা দৃশ্যটির রেন্ডারিং এবং পরিপূর্ণতার জন্য অত্যন্ত গুরুত্বপূর্ণ।

১. HDRI ইমেজ লোড করা

Three.js এ HDRI ইমেজ লোড করার জন্য সাধারণত RGBELoader ব্যবহার করা হয়, যা একটি বিশেষ ইমেজ ফাইল ফরম্যাট (যেমন .hdr বা .exr) রেন্ডার করতে সক্ষম।

// Scene এবং Renderer সেটআপ
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// HDRI ইমেজ লোড করা
const loader = new THREE.RGBELoader();
loader.load('path/to/your/hdr_image.hdr', function (texture) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture; // HDRI এর পটভূমি হিসেবে সেট করা হচ্ছে
  scene.environment = texture; // HDRI পরিবেশ হিসেবে সেট করা হচ্ছে

  // রেন্ডারিং শুরু করা
  render();
});

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

এখানে, RGBELoader দ্বারা HDRI ইমেজটি লোড করা হচ্ছে এবং সেটি দৃশ্যের background এবং environment হিসেবে ব্যবহার করা হচ্ছে। HDRI ইমেজটি সাধারণত পটভূমি (background) এবং পরিবেশের প্রতিফলন (environment reflection) উভয়ের জন্য ব্যবহৃত হয়।

২. Lighting সেটআপ

Three.js এ আলোক ব্যবস্থাপনার জন্য সাধারণত বিভিন্ন ধরনের লাইট ব্যবহার করা হয়। HDRI ইমেজ ব্যবহারের পর, অতিরিক্ত লাইটিং ব্যবহার করতে পারেন দৃশ্যটির উজ্জ্বলতা ও গভীরতা বাড়ানোর জন্য।

অন্যথায়, বিভিন্ন ধরনের লাইট:

• AmbientLight: সব জায়গায় সমানভাবে আলো প্রদান করে।
• DirectionalLight: নির্দিষ্ট দিক থেকে আলো প্রদান করে।
• PointLight: একটি নির্দিষ্ট স্থান থেকে আলো ছড়িয়ে দেয়।
• SpotLight: একটি নির্দিষ্ট জায়গায় আলো কেন্দ্রীভূত করে।

উদাহরণ:

// Ambient Light যোগ করা
const ambientLight = new THREE.AmbientLight(0xffffff, 1); // সাদা রং, শক্তি ১
scene.add(ambientLight);

// Directional Light যোগ করা
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// Point Light যোগ করা
const pointLight = new THREE.PointLight(0xff0000, 1, 100); // লাল রঙ, শক্তি ১, ম্যাক্স ডিস্টেন্স ১০০
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

এখানে, তিনটি আলোর উৎস ব্যবহার করা হয়েছে:

1. Ambient Light: যা পুরো দৃশ্যের জন্য সমানভাবে আলো প্রদান করে।
2. Directional Light: যা দৃশ্যের একটি নির্দিষ্ট দিক থেকে আলো দেয়।
3. Point Light: একটি নির্দিষ্ট স্থান থেকে আলো ছড়িয়ে দেয়।

৩. Lighting এবং HDRI এর একত্রিত ব্যবহার

HDRI ইমেজের সাথে একাধিক আলোর উৎস ব্যবহার করে, আপনি আরো বাস্তবসম্মত দৃশ্য তৈরি করতে পারেন। উদাহরণস্বরূপ, HDRI আলোর উৎস দিয়ে পরিবেশের প্রতিফলন তৈরি করা এবং অতিরিক্ত আলোর উৎস দিয়ে বিশেষ আলোকদ্বীপ (highlight) তৈরি করা যায়।

// HDRI ব্যবহার করে Environment Lighting এবং আলোর উৎস একত্রিত করা
const loader = new THREE.RGBELoader();
loader.load('path/to/your/hdr_image.hdr', function (texture) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture; // HDRI পটভূমি
  scene.environment = texture; // HDRI পরিবেশ

  // HDRI এর সাথে আলো যুক্ত করা
  const ambientLight = new THREE.AmbientLight(0xffffff, 1); // HDRI এর আলো শক্তি
  scene.add(ambientLight);

  // Directonal Light যোগ করা
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);

  render();
});

এখানে, AmbientLight এবং DirectionalLight এর সাথে HDRI এর পরিবেশের প্রতিফলন মিলে বাস্তবসম্মত আলোর উৎস তৈরি করা হচ্ছে।

সারাংশ

HDRI (High Dynamic Range Imaging) ব্যবহার করে Three.js এ environment mapping এবং lighting সেটআপ করা অত্যন্ত গুরুত্বপূর্ণ। HDRI একটি বাস্তবসম্মত এবং শক্তিশালী আলোর উৎস হিসেবে কাজ করে, যা আপনার ৩ডি সিনে বাস্তবসম্মত প্রতিফলন এবং পরিবেশ তৈরি করতে সহায়তা করে। Three.js-এ HDRI এবং আলোর সঠিক ব্যবহার করতে, আপনি RGBELoader, AmbientLight, DirectionalLight, এবং PointLight ইত্যাদি ব্যবহার করতে পারেন। এভাবে, আপনি একটি ডাইনামিক এবং জীবন্ত ৩ডি দৃশ্য তৈরি করতে সক্ষম হবেন।

Three.js এর মাধ্যমে Atmosphere এবং Fog যোগ করার প্রয়োজনীয়তা

Three.js হল একটি শক্তিশালী 3D গ্রাফিক্স লাইব্রেরি যা ওয়েব ব্রাউজারে 3D কনটেন্ট তৈরি এবং প্রদর্শন করার জন্য ব্যবহৃত হয়। 3D দৃশ্য (scene) তৈরি করতে, একে আরও বাস্তবসম্মত এবং গভীর করতে, কখনও কখনও atmosphere এবং fog যোগ করা প্রয়োজন। Atmosphere এবং Fog দুটি 3D দৃশ্যের পরিবেশ উন্নত করার জন্য ব্যবহৃত হয়, যা দৃশ্যের গভীরতা, রহস্য, এবং বাস্তবসম্মততা বৃদ্ধি করে।

• Fog: ফগ দৃশ্যের নির্দিষ্ট অংশকে অস্পষ্ট করে এবং এটি দূরত্বের সাথে গভীরতা তৈরি করতে সাহায্য করে।
• Atmosphere: এটি দৃশ্যের একটি মৃদু আলো তৈরি করে, যা দৃশ্যের পুরো পরিবেশে একটি এক্সটেন্ডেড, মাস্কিং ইফেক্ট সৃষ্টি করে।

এখানে Three.js এর মাধ্যমে atmosphere এবং fog কীভাবে যোগ করা যায় তা দেখানো হয়েছে।

১. Fog যোগ করা

Fog দৃশ্যে দূরত্ব বাড়ানোর জন্য এবং দৃশ্যের কিছু অংশকে অস্পষ্ট করতে ব্যবহৃত হয়, যা একটি গা dark ়, রহস্যময় পরিবেশ তৈরি করে।

Fog যোগ করতে, আমরা THREE.Fog অথবা THREE.FogExp2 ব্যবহার করতে পারি। প্রথমটি একটি সোজাসুজি ফগ প্রভাব তৈরি করে, যেখানে দ্বিতীয়টি একটি এক্সপোনেনশিয়াল ফগ প্রভাব সৃষ্টি করে, যা দূরত্বের সাথে আরও গা dark ় হয়।

Fog উদাহরণ:

// Scene তৈরি
const scene = new THREE.Scene();

// Fog যোগ করা: THREE.Fog(distanceNear, distanceFar)
scene.fog = new THREE.Fog(0xcccccc, 1, 100);

// ক্যামেরা তৈরি
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer সেটআপ
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Cube তৈরি
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Animation ফাংশন
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

এখানে, scene.fog-এ THREE.Fog যোগ করা হয়েছে, যা ফগ প্রভাব তৈরি করছে। এর মাধ্যমে, দৃশ্যের উপরের 100 ইউনিট পর্যন্ত সবকিছু ফগ দ্বারা ঢেকে যাবে।

২. Atmosphere যোগ করা

Atmosphere যোগ করতে, আমরা একটি আলোক উৎস ব্যবহার করতে পারি যা দৃশ্যের মধ্যে একটি স্পষ্ট আলো তৈরি করে। সাধারণত, এই কাজের জন্য THREE.AmbientLight এবং THREE.HemisphereLight ব্যবহার করা হয়।

Atmosphere উদাহরণ:

// Scene তৈরি
const scene = new THREE.Scene();

// Ambient light যোগ করা (মৃদু আলো)
const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);

// Hemisphere light যোগ করা (আকাশ ও পৃথিবী থেকে আলো)
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.6); // Light from sky and ground
scene.add(hemisphereLight);

// ক্যামেরা তৈরি
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer সেটআপ
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Cube তৈরি
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Animation ফাংশন
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

এখানে, AmbientLight এবং HemisphereLight ব্যবহার করে আমরা একটি soft light atmosphere তৈরি করেছি যা পুরো দৃশ্যের উপর প্রভাব ফেলবে।

• THREE.AmbientLight হল একটি সার্বজনীন আলো যা দৃশ্যের পুরো অংশে সমানভাবে আলো দেয়।
• THREE.HemisphereLight আকাশ থেকে আলোর উৎস এবং পৃথিবী থেকে আলোর উল্টো প্রভাব তৈরি করে, এটি একটি সুন্দর পরিবেশ তৈরি করে।

৩. Fog এবং Atmosphere একসাথে ব্যবহার করা

একটি দৃশ্যে Fog এবং Atmosphere একসাথে যোগ করার মাধ্যমে আরও গভীর এবং বাস্তবসম্মত পরিবেশ তৈরি করা যেতে পারে। নিচে একটি উদাহরণ দেখানো হলো যেখানে উভয়কে একসাথে ব্যবহার করা হয়েছে।

Fog এবং Atmosphere একসাথে উদাহরণ:

// Scene তৈরি
const scene = new THREE.Scene();

// Fog যোগ করা
scene.fog = new THREE.Fog(0xcccccc, 1, 100);

// Ambient light যোগ করা
const ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(ambientLight);

// Hemisphere light যোগ করা
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x000000, 0.6);
scene.add(hemisphereLight);

// ক্যামেরা তৈরি
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Renderer সেটআপ
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Cube তৈরি
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Animation ফাংশন
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

এখানে, Fog এবং Atmosphere উভয়ই দৃশ্যে একসাথে যোগ করা হয়েছে, যা একটি সুন্দর ও বাস্তবসম্মত পরিবেশ তৈরি করে। Fog দৃশ্যের কিছু অংশকে অস্পষ্ট করে, এবং Atmosphere আলোর প্রভাব বাড়িয়ে পরিবেশের গভীরতা ও রঙের বৈচিত্র্য তৈরি করে।

সারাংশ

Three.js ব্যবহার করে Atmosphere এবং Fog যোগ করার মাধ্যমে আপনি আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত এবং গভীর করতে পারেন। Fog দৃশ্যের দূরত্ব এবং গভীরতা তৈরি করতে সহায়তা করে, এবং Atmosphere দৃশ্যে আলোর প্রভাব বৃদ্ধি করে একটি সুন্দর পরিবেশ তৈরি করে। এই দুটি বৈশিষ্ট্য দৃশ্যে আরও প্রাকৃতিক এবং আকর্ষণীয় দৃশ্য তৈরি করতে সহায়ক।