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);
এখানে, তিনটি আলোর উৎস ব্যবহার করা হয়েছে:
- Ambient Light: যা পুরো দৃশ্যের জন্য সমানভাবে আলো প্রদান করে।
- Directional Light: যা দৃশ্যের একটি নির্দিষ্ট দিক থেকে আলো দেয়।
- 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 ইত্যাদি ব্যবহার করতে পারেন। এভাবে, আপনি একটি ডাইনামিক এবং জীবন্ত ৩ডি দৃশ্য তৈরি করতে সক্ষম হবেন।
Read more
