ক্যামেরা এবং ভিউ মেট্রিক্স সেটআপ

ক্যামেরা (Camera) কি?

ওয়েবজিএল-এ ক্যামেরা (Camera) হলো সেই উপাদান যা 3D দৃশ্যের ভিউ পয়েন্ট বা দর্শন নির্দেশ করে। এটি একরকম ভার্চুয়াল ক্যামেরা, যা 3D বিশ্বে নির্দিষ্ট জায়গা থেকে দৃশ্য দেখানোর জন্য ব্যবহৃত হয়। ক্যামেরা সেটআপ করার মাধ্যমে আপনি কোন দিক থেকে দৃশ্য দেখবেন তা নির্ধারণ করতে পারেন। ক্যামেরা সাধারণত দুটি প্রধান বৈশিষ্ট্য ধারণ করে:

• পজিশন (Position): ক্যামেরার স্থান বা অবস্থান 3D স্পেসে কোথায় রয়েছে তা নির্ধারণ করে।
• লুক অ্যাট (Look At): ক্যামেরা কোন দিকে তাকাবে বা দৃশ্যের কোন অংশের দিকে ফোকাস করবে তা নির্ধারণ করে।

ক্যামেরার পজিশন এবং ভিউ মেট্রিক্স

ওয়েবজিএল-এ ক্যামেরা একটি ভিউ মেট্রিক্স (View Matrix) তৈরি করতে সাহায্য করে, যা 3D স্পেসে ক্যামেরার অবস্থান এবং দিক নির্দেশ করে। এই ভিউ মেট্রিক্স সাধারণত একটি 4x4 ম্যাট্রিক্সের আকারে থাকে এবং এর মাধ্যমে দৃশ্যের পজিশন ও দিককে গ্রাফিক্যালি পরিমাপ করা হয়।

ভিউ মেট্রিক্স (View Matrix): ভিউ মেট্রিক্স 3D পরিবেশে ক্যামেরার অবস্থান ও দিকের তথ্য ধারণ করে। এটি পৃথিবীর স্থানাংক (world coordinates) থেকে ক্যামেরার স্থানাংকে (camera coordinates) রূপান্তরিত করে, যাতে 3D দৃশ্যকে ক্যামেরা অনুসারে প্রদর্শন করা যায়।

ভিউ মেট্রিক্স কিভাবে কাজ করে?

ভিউ মেট্রিক্স তৈরি করতে সাধারণত ক্যামেরার পজিশন এবং লক্ষ্যবস্তু (target) পয়েন্ট ব্যবহার করা হয়। সাধারণত, ক্যামেরার পজিশন এবং লক্ষ্যবস্তু দুটি 3D ভেক্টর হিসেবে থাকে। ক্যামেরার উপর থেকে দৃশ্য তৈরি করতে এই ভেক্টরগুলো থেকে একটি 4x4 ম্যাট্রিক্স তৈরি করা হয়।

ভিউ মেট্রিক্স তৈরির উদাহরণ

// ক্যামেরার পজিশন এবং লক্ষ্যবস্তু
var cameraPosition = [0, 0, 5];  // ক্যামেরা 5 ইউনিট দূরে রয়েছে
var targetPosition = [0, 0, 0];  // ক্যামেরা লক্ষ্য করছে পৃথিবীর কেন্দ্র
var upDirection = [0, 1, 0];     // ক্যামেরার উপরের দিক

// ভিউ মেট্রিক্স তৈরি
var viewMatrix = mat4.lookAt(mat4.create(), cameraPosition, targetPosition, upDirection);

এখানে:

• cameraPosition: ক্যামেরার অবস্থান (বিশ্বস্থান)
• targetPosition: যে পয়েন্টে ক্যামেরা লক্ষ্য করবে
• upDirection: ক্যামেরার 'উপরে' দিক, যা সাধারণত Y-অক্ষকে নির্দেশ করে

প্রজেকশন মেট্রিক্স (Projection Matrix)

ক্যামেরার ভিউ মেট্রিক্সের পাশাপাশি, ওয়েবজিএল-এ সাধারণত প্রজেকশন মেট্রিক্স (Projection Matrix) ব্যবহৃত হয়, যা 3D কোঅর্ডিনেটকে 2D স্ক্রীন কোঅর্ডিনেটে রূপান্তরিত করে। এটি 3D দৃশ্যকে ফ্ল্যাট স্ক্রীনে উপস্থাপন করার জন্য দরকারি।

প্রজেকশন মেট্রিক্সের দুটি প্রধান ধরন আছে:

1. অর্থোগ্রাফিক প্রজেকশন (Orthographic Projection): যেখানে দৃশ্যের পজিশন এবং স্কেল ফিক্সড থাকে, এবং দৃষ্টিভঙ্গির অ্যাঙ্গল পরিবর্তন হয় না। এটি 2D ভিউয়ের জন্য উপযুক্ত।

   উদাহরণ:

   var projectionMatrix = mat4.ortho(mat4.create(), -1, 1, -1, 1, 0.1, 100);
   

2. পার্সপেকটিভ প্রজেকশন (Perspective Projection): এখানে দৃশ্যের গভীরতা এবং দূরত্ব অনুযায়ী স্কেল পরিবর্তিত হয়, যা বাস্তব পৃথিবীর মত দৃশ্য তৈরি করে।

   উদাহরণ:

   var projectionMatrix = mat4.perspective(mat4.create(), Math.PI / 4, canvas.width / canvas.height, 0.1, 100);
   

এখানে:

• Math.PI / 4: ক্যামেরার দৃষ্টিকোণ (Field of View) 45 ডিগ্রি।
• canvas.width / canvas.height: দৃশ্যের প্রপোরশনাল (aspect ratio) রেশিও।
• 0.1, 100: দৃশ্যের কাছের এবং দূরের ক্লিপিং প্লেন (clipping planes) এর দূরত্ব।

ক্যামেরা এবং ভিউ মেট্রিক্স একত্রে ব্যবহার

ওয়েবজিএল-এ একটি সম্পূর্ণ 3D দৃশ্য তৈরি করতে ক্যামেরা এবং প্রজেকশন মেট্রিক্স একত্রে ব্যবহৃত হয়। উদাহরণস্বরূপ, 3D গ্রাফিক্স রেন্ডার করার জন্য:

// ভিউ এবং প্রজেকশন মেট্রিক্স যোগ করা
var viewMatrix = mat4.lookAt(mat4.create(), cameraPosition, targetPosition, upDirection);
var projectionMatrix = mat4.perspective(mat4.create(), Math.PI / 4, canvas.width / canvas.height, 0.1, 100);

// মডেল, ভিউ এবং প্রজেকশন মেট্রিক্স সমন্বয় করা
var modelViewProjectionMatrix = mat4.multiply(mat4.create(), projectionMatrix, viewMatrix);

এখানে:

• modelViewProjectionMatrix: এটি সব মেট্রিক্সকে একত্রিত করে গ্রাফিক্স রেন্ডারিংয়ে ব্যবহারযোগ্য ম্যাট্রিক্স তৈরি করে।

সারাংশ

ওয়েবজিএল-এ ক্যামেরা এবং ভিউ মেট্রিক্স ব্যবহার করার মাধ্যমে আপনি 3D দৃশ্যের পজিশন এবং দিক নিয়ন্ত্রণ করতে পারেন। ক্যামেরা পজিশন এবং লক্ষ্যবস্তু ঠিক করে ভিউ মেট্রিক্স তৈরি করা হয়, এবং তারপরে প্রজেকশন মেট্রিক্স ব্যবহার করে 3D দৃশ্যকে 2D স্ক্রীনে রূপান্তর করা হয়। এই দুটি মেট্রিক্সের সমন্বয়ে একটি সম্পূর্ণ 3D গ্রাফিক্স রেন্ডারিং প্রক্রিয়া তৈরি করা সম্ভব হয়।