View Frustum এবং Clipping Planes

Three.js এবং 3D গ্রাফিক্স

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

View Frustum এবং Clipping Planes এর ধারণা

View Frustum এবং Clipping Planes হল 3D গ্রাফিক্সের মৌলিক ধারণা, যা তিনটি উপাদান নিয়ে কাজ করে:

• Frustum: এটি দৃশ্যমান ক্ষেত্র বা দৃশ্যের সীমা, যা ক্যামেরা এর মাধ্যমে দৃশ্য দেখানো হয়। ক্যামেরা কিছু নির্দিষ্ট দূরত্বের মধ্যে দৃশ্যমান বস্তুগুলো দেখাতে সক্ষম। যেগুলি এর বাইরে, সেগুলি অদৃশ্য হয়ে যায়।
• Clipping Planes: এই প্লেনগুলি ব্যবহার করে ক্যামেরার সামনে এবং পিছনে থাকা অবজেক্টগুলো ক্লিপ করা হয় (অর্থাৎ, দৃশ্যের বাইরে রেখে দেয়া হয়), যাতে অবজেক্টগুলো ক্যামেরার ভিউ ফ্রাস্টামের মধ্যে রাখা যায়।

১. View Frustum

View Frustum হল একটি কনজেক্স পিরামিড বা কনিক্যাল শেপ যা ক্যামেরার দৃশ্যমান এলাকা নির্ধারণ করে। এটি ক্যামেরা এবং এর দৃষ্টিভঙ্গি (field of view) এর সীমা গুলি দ্বারা নির্ধারিত হয়।

Three.js-এ, ক্যামেরা তৈরি করার সময় আপনি frustum এর বৈশিষ্ট্য সেট করতে পারেন। ক্যামেরার ফোকাল পয়েন্ট, ফিল্ড অফ ভিউ, প্রজেকশন প্লেনস ইত্যাদি এর মধ্যে পড়বে। ক্যামেরার জন্য সাধারণত দুটি ধরনের প্রজেকশন ব্যবহার করা হয়:

• Perspective Camera: এটি দূরত্বের সাথে বস্তুগুলির আকার পরিবর্তন করে এবং বাস্তবিক অনুভূতি প্রদান করে।
• Orthographic Camera: এটি বস্তুর আকার পরিবর্তন না করে সরাসরি দৃশ্য দেখায়।

Perspective Camera উদাহরণ:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

এখানে, camera হল একটি PerspectiveCamera যা 3D দৃশ্যের view frustum তৈরি করে। 0.1 এবং 1000 হল ক্যামেরার ক্লিপিং প্লেন, যেগুলি দূরত্বের মধ্যে অবজেক্টগুলোকে দৃশ্যমান করতে ব্যবহৃত হয়।

২. Clipping Planes

Clipping Planes হল কৌশল যার মাধ্যমে আমরা একটি দৃশ্যের নির্দিষ্ট অংশ বা অঞ্চলের বাইরে থাকা অবজেক্টগুলিকে সরিয়ে ফেলতে পারি। Three.js-এ আপনি near এবং far ক্লিপিং প্লেন ব্যবহার করতে পারেন যা ক্যামেরার দৃশ্যের সীমানা নির্ধারণ করে এবং দৃশ্যের বাইরে অবজেক্টগুলোকে অদৃশ্য করে দেয়।

Clipping Planes ব্যবহারের মাধ্যমে আপনি ক্যামেরার সামনে এবং পিছনে অবজেক্টগুলোর মধ্যে কোনগুলি দৃশ্যমান হবে তা নিয়ন্ত্রণ করতে পারেন।

Three.js-এ ক্লিপিং প্লেন ব্যবহার করার জন্য near এবং far ভ্যালু সহ ক্যামেরার ক্লিপিং প্লেন সেট করতে পারেন। near হল ক্যামেরার সামনে থাকা ক্লিপিং প্লেন এবং far হল ক্যামেরার পিছনে থাকা ক্লিপিং প্লেন।

ক্লিপিং প্লেন উদাহরণ:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Set the near and far clipping planes
camera.near = 1;  // Objects closer than this distance will be clipped
camera.far = 500; // Objects farther than this distance will be clipped

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

এখানে, near এবং far ক্লিপিং প্লেন ব্যবহার করে আপনি ক্যামেরার দৃশ্যের সীমা নির্ধারণ করেছেন। ক্যামেরার সামনে খুব কাছাকাছি অবজেক্টগুলো এবং ক্যামেরার পেছনে যেসব অবজেক্ট আছে সেগুলো দৃশ্য থেকে বাদ দেওয়া হবে।

Custom Clipping Planes:

Three.js-এ আপনি Custom Clipping Planes ব্যবহার করে আরও জটিল ক্লিপিং কার্যক্রম করতে পারেন।

const plane = new THREE.Plane(new THREE.Vector3(1, 0, 0), 0);
const planes = [plane];
scene.clippingPlanes = planes;
scene.localClippingEnabled = true;

এখানে, THREE.Plane ব্যবহার করে একটি কাস্টম ক্লিপিং প্লেন তৈরি করা হয়েছে এবং এটি scene.clippingPlanes এ সেট করা হয়েছে। আপনি এর মাধ্যমে নির্দিষ্ট প্লেনের উপর ভিত্তি করে কিছু অংশ ক্লিপ করতে পারবেন।

Frustum Culling:

Frustum Culling হল একটি প্রক্রিয়া যা এক্সিকিউটিং কোডের গতি বাড়ানোর জন্য ব্যবহার করা হয়। এটি একটি টেকনিক্যাল পদ্ধতি যা অপ্রয়োজনীয় বা দৃশ্যের বাইরে থাকা অবজেক্টগুলোকে রেন্ডার করতে বাধা দেয়। Three.js এটি স্বয়ংক্রিয়ভাবে পরিচালনা করে। অর্থাৎ, যখন কোনো অবজেক্ট ক্যামেরার ভিউ ফ্রাস্টাম (view frustum) এর বাইরে চলে যায়, তখন Three.js ঐ অবজেক্টটিকে রেন্ডার করার প্রয়োজন মনে করে না এবং সে অবজেক্টটি গুলি বাদ দিয়ে রেন্ডারিং করতে থাকে।

সারাংশ

View Frustum এবং Clipping Planes হল 3D গ্রাফিক্সের গুরুত্বপূর্ণ ধারণা যা ক্যামেরার দৃশ্য এবং দৃশ্যের বাইরে থাকা অবজেক্টগুলোকে কনট্রোল করতে ব্যবহৃত হয়। View Frustum ক্যামেরার দৃশ্যের সীমা নির্ধারণ করে এবং Clipping Planes ক্যামেরার সামনে এবং পেছনে অবজেক্টগুলোকে ক্লিপ করে ফেলতে সহায়তা করে। Three.js-এ এই দুটি ধারণা ব্যবহার করে আপনি কাস্টম দৃশ্য তৈরি করতে পারেন এবং কার্যকরীভাবে ডেটা রেন্ডারিং অপটিমাইজ করতে পারেন। Frustum Culling স্বয়ংক্রিয়ভাবে দৃশ্যের বাইরে থাকা অবজেক্টগুলো বাদ দিয়ে পারফরম্যান্স উন্নত করে।