Three.js এবং Shadows
Three.js একটি জনপ্রিয় JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করতে ব্যবহৃত হয়। এটি WebGL-এর উপর ভিত্তি করে কাজ করে এবং 3D মডেল, অ্যানিমেশন, এবং রেন্ডারিং সহজভাবে তৈরি করতে সাহায্য করে। Shadows (ছায়া) 3D দৃশ্যের একটি গুরুত্বপূর্ণ অংশ, যা দৃশ্যের গভীরতা, বাস্তবতা, এবং ডিটেইল প্রদান করে।
Three.js এ Shadows তৈরি এবং নিয়ন্ত্রণ করার জন্য কিছু নির্দিষ্ট ফিচার এবং পদ্ধতি রয়েছে। এই গাইডে আমরা শিখব কীভাবে Three.js এ Shadows তৈরি এবং কনফিগার করা যায়, এবং শ্যাডোর প্রপার্টিগুলো কিভাবে নিয়ন্ত্রণ করা যায়।
Shadows তৈরি করার জন্য প্রাথমিক ধাপ
Three.js-এ shadows তৈরি করতে হলে কিছু মৌলিক পদক্ষেপ অনুসরণ করতে হয়:
- Shadow Map সক্রিয় করা: Shadows তৈরি করতে হলে, প্রথমে রেন্ডারারের মধ্যে shadowMap সক্রিয় করতে হয়।
- Light Source সেট করা: আলো (light) সেট করতে হয় যাতে এটি শ্যাডো তৈরি করতে সক্ষম হয়।
- Object কে Shadow Cast করতে অনুমতি দেওয়া: শ্যাডো কাস্ট করার জন্য প্রতিটি অবজেক্টে শ্যাডো কাস্টিং সক্রিয় করতে হয়।
- Object কে Shadow গ্রহণ করতে অনুমতি দেওয়া: শ্যাডো গ্রহন করার জন্য প্রতিটি অবজেক্টে শ্যাডো গ্রহণের অনুমতি দিতে হয়।
এখন আমরা বিস্তারিতভাবে এই পদক্ষেপগুলি দেখব।
১. Shadow Map সক্রিয় করা
প্রথমে, renderer এ shadowMap সক্রিয় করতে হবে।
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
// Shadow Map সক্রিয় করা
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Shadow type সেট করা (PCFSoftShadowMap সাধারণত ভালো দেখায়)
document.body.appendChild(renderer.domElement);
এখানে, renderer.shadowMap.enabled কে true সেট করে আমরা Shadow Map সক্রিয় করেছি এবং PCFSoftShadowMap এর মাধ্যমে সফট শ্যাডো ব্যবহৃত হচ্ছে।
২. Light Source সেট করা
Shadows তৈরি করতে একটি light source প্রয়োজন। এখানে আমরা একটি DirectionalLight ব্যবহার করব, যা সাধারণত শ্যাডো তৈরির জন্য ব্যবহৃত হয়।
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
light.castShadow = true; // আলোকে শ্যাডো কাস্ট করার অনুমতি দেওয়া
scene.add(light);
এখানে, DirectionalLight সেট করা হয়েছে এবং castShadow কে true করা হয়েছে, যার মাধ্যমে আলো শ্যাডো কাস্ট করতে সক্ষম হবে।
৩. Object কে Shadow Cast করতে অনুমতি দেওয়া
এখন, যেকোনো 3D object এর জন্য castShadow সক্রিয় করতে হবে, যাতে এটি শ্যাডো কাস্ট করতে পারে।
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
// Cube কে Shadow Cast করতে অনুমতি দেওয়া
cube.castShadow = true;
scene.add(cube);
এখানে, cube মেশের জন্য castShadow প্রপার্টি true করা হয়েছে, যার মাধ্যমে এটি শ্যাডো কাস্ট করতে সক্ষম হবে।
৪. Object কে Shadow গ্রহণ করতে অনুমতি দেওয়া
যে অবজেক্টগুলিতে শ্যাডো পড়বে, সেগুলিকে receiveShadow সক্রিয় করতে হবে।
const groundGeometry = new THREE.PlaneGeometry(100, 100);
const groundMaterial = new THREE.ShadowMaterial({ opacity: 0.5 });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
// Ground-কে Shadow গ্রহণ করতে অনুমতি দেওয়া
ground.receiveShadow = true;
ground.rotation.x = - Math.PI / 2; // Plane এর orientation সেট করা
scene.add(ground);
এখানে, ground মেশের জন্য receiveShadow প্রপার্টি true করা হয়েছে, যার মাধ্যমে এটি শ্যাডো গ্রহণ করবে।
৫. Rendering the Scene
সবশেষে, সঠিকভাবে শ্যাডো দেখানোর জন্য সঠিকভাবে দৃশ্য রেন্ডার করতে হবে।
function animate() {
requestAnimationFrame(animate);
// Cube movement (optional)
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
এখানে, animate() ফাংশনটি কল করে দৃশ্যের অবজেক্টগুলোর রেন্ডারিং নিশ্চিত করা হয়েছে। cube এর রোটেশনও এখানে যুক্ত করা হয়েছে, যাতে 3D cube এবং শ্যাডোটি অ্যানিমেটেড হয়।
Shadows এর নিয়ন্ত্রণ
Three.js-এ শ্যাডো নিয়ন্ত্রণ করার জন্য কয়েকটি গুরুত্বপূর্ণ প্রপার্টি রয়েছে:
১. Shadow Bias:
shadowBias হল শ্যাডোর শিফটিংয়ের জন্য ব্যবহৃত একটি প্রপার্টি। কখনও কখনও, শ্যাডোতে পিক্সেল স্যাম্পলিং এর কারণে "shadow acne" বা অস্বাভাবিক শ্যাডো দেখা দিতে পারে। shadowBias দিয়ে এটি ঠিক করা যায়।
light.shadow.bias = -0.005; // Shadow bias সেট করা
২. Shadow Map Size:
shadowMapSize ডিফল্ট শ্যাডো ম্যাপের রেজোলিউশন নিয়ন্ত্রণ করে। এর মাধ্যমে শ্যাডোর গুণমান পরিবর্তন করা যায়।
light.shadow.mapSize.width = 2048; // Shadow map width
light.shadow.mapSize.height = 2048; // Shadow map height
৩. Shadow Camera:
shadowCamera এর মাধ্যমে আপনি শ্যাডো কাস্ট করার ক্যামেরা কনফিগার করতে পারেন। এটি একটি OrthographicCamera যা শ্যাডো প্রজেকশন তৈরি করে।
light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 100;
সারাংশ
Three.js-এ শ্যাডো তৈরি এবং নিয়ন্ত্রণ করা একটি গুরুত্বপূর্ণ অংশ যা 3D দৃশ্যকে আরও বাস্তবসম্মত করে তোলে। আপনি Shadow Map সক্রিয় করে, আলো এবং অবজেক্টগুলির উপর শ্যাডো কাস্ট এবং গ্রহণ করতে পারবেন। শ্যাডো নিয়ন্ত্রণের জন্য বিভিন্ন প্রপার্টি যেমন shadowBias, shadowMapSize, এবং shadowCamera ব্যবহার করা যায়, যা শ্যাডোর গুণমান এবং কার্যকারিতা উন্নত করতে সহায়ক। Shadows 3D গ্রাফিক্সে সত্যিকার বাস্তবতা প্রদান করে এবং দৃশ্যের গভীরতা এবং ডিটেইলিং উন্নত করে।
Read more
