৩ডি ট্রান্সফরমেশন ম্যাট্রিক্স
৩ডি গ্রাফিক্স রেন্ডারিংয়ে একাধিক ট্রান্সফরমেশন ম্যাট্রিক্স ব্যবহৃত হয় যাতে একটি মডেলকে তার স্থান, স্কেল এবং রোটেশন অনুযায়ী ভিউয়ারের সামনে সঠিকভাবে প্রদর্শন করা যায়। ওয়েবজিএল-এ তিনটি প্রধান ট্রান্সফরমেশন ম্যাট্রিক্স রয়েছে, যা হলো:
- মডেল ম্যাট্রিক্স (Model Matrix)
- ভিউ ম্যাট্রিক্স (View Matrix)
- প্রজেকশন ম্যাট্রিক্স (Projection Matrix)
এই তিনটি ম্যাট্রিক্স একত্রে কাজ করে ৩ডি অবজেক্টগুলোকে সঠিকভাবে স্ক্রীনে প্রদর্শন করতে।
মডেল ম্যাট্রিক্স (Model Matrix)
মডেল ম্যাট্রিক্স ব্যবহার করা হয় কোনো ৩ডি অবজেক্টের স্থানান্তর (Translation), রোটেশন (Rotation) এবং স্কেলিং (Scaling) পরিবর্তন করতে। এটি মূলত ৩ডি মডেলকে পৃথিবীর স্থান বা কোঅর্ডিনেট সিস্টেমে রূপান্তরিত করে।
- স্থানান্তর (Translation): অবজেক্টকে একটি নির্দিষ্ট অবস্থানে স্থানান্তর করা।
- রোটেশন (Rotation): অবজেক্টকে একটি নির্দিষ্ট কোণে ঘুরানো।
- স্কেলিং (Scaling): অবজেক্টের আকার পরিবর্তন করা।
মডেল ম্যাট্রিক্স ৪x৪ ম্যাট্রিক্স আকারে থাকে, যা এই ধরনের ট্রান্সফরমেশন সঞ্চালন করতে সক্ষম।
const modelMatrix = mat4.create(); // ৪x৪ ম্যাট্রিক্স তৈরি
mat4.translate(modelMatrix, modelMatrix, [1.0, 0.0, 0.0]); // x-axis এ স্থানান্তর
mat4.rotate(modelMatrix, modelMatrix, Math.PI / 4, [0, 1, 0]); // y-axis এ ৪৫° রোটেশন
mat4.scale(modelMatrix, modelMatrix, [1.5, 1.5, 1.5]); // আকার পরিবর্তন
ভিউ ম্যাট্রিক্স (View Matrix)
ভিউ ম্যাট্রিক্স গ্রাফিক্স সিস্টেমে ক্যামেরার অবস্থান এবং দৃষ্টিকোণ নির্ধারণ করে। এটি সঠিকভাবে দেখানোর জন্য মডেল ম্যাট্রিক্সের সাথে কাজ করে এবং ক্যামেরার দিক থেকে সব কিছু স্থানান্তরিত করে।
ভিউ ম্যাট্রিক্স তৈরির জন্য একটি সাধারিত পদ্ধতি হলো LookAt ফাংশন ব্যবহার করা, যা একটি ক্যামেরার পজিশন, লক্ষ্য পজিশন এবং আপ ভেক্টর নির্ধারণ করে।
const viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, [0.0, 0.0, 5.0], [0.0, 0.0, 0.0], [0.0, 1.0, 0.0]);
এখানে, ক্যামেরার অবস্থান [0.0, 0.0, 5.0], লক্ষ্য [0.0, 0.0, 0.0] এবং আপ ভেক্টর [0.0, 1.0, 0.0] দেওয়া হয়েছে।
প্রজেকশন ম্যাট্রিক্স (Projection Matrix)
প্রজেকশন ম্যাট্রিক্স ৩ডি অবজেক্টকে ২ডি স্ক্রীনে প্রদর্শন করতে ব্যবহৃত হয়। এটি ক্যামেরার দৃষ্টিকোণ এবং ক্লিপিং প্লেন (clipping planes) নির্ধারণ করে। সাধারণত দুটি ধরনের প্রজেকশন ব্যবহৃত হয়:
- অর্থোগ্রাফিক প্রজেকশন (Orthographic Projection): এটি কোনো গভীরতা (depth) অনুভব না করিয়ে ২ডি পদ্ধতিতে অবজেক্টের আকারের রূপান্তর করে।
- পার্সপেকটিভ প্রজেকশন (Perspective Projection): এটি গভীরতার অনুভূতি প্রদান করে এবং দূরবর্তী অবজেক্টগুলো ছোট দেখায়।
অর্থোগ্রাফিক প্রজেকশন
const projectionMatrix = mat4.create();
mat4.ortho(projectionMatrix, -1, 1, -1, 1, 0.1, 100); // অর্থোগ্রাফিক প্রজেকশন
পার্সপেকটিভ প্রজেকশন
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100); // পার্সপেকটিভ প্রজেকশন
এখানে, Math.PI / 4 ক্যামেরার ফিল্ড অফ ভিউ (Field of View) এবং 0.1, 100 ক্লিপিং প্লেন নির্ধারণ করে।
তিনটি ম্যাট্রিক্স একত্রে ব্যবহার
মডেল, ভিউ এবং প্রজেকশন ম্যাট্রিক্স একত্রে কাজ করে, এবং সেগুলোর কম্বিনেশন একটি চূড়ান্ত ট্রান্সফরমেশন ম্যাট্রিক্স তৈরি করে যা ৩ডি অবজেক্টের সঠিক অবস্থান, রোটেশন, স্কেলিং এবং প্রদর্শন নিশ্চিত করে।
const modelViewProjectionMatrix = mat4.create();
mat4.multiply(modelViewProjectionMatrix, projectionMatrix, viewMatrix); // ভিউ এবং প্রজেকশন যোগ করা
mat4.multiply(modelViewProjectionMatrix, modelViewProjectionMatrix, modelMatrix); // মডেল ম্যাট্রিক্স যোগ করা
৩ডি ট্রান্সফরমেশন ম্যাট্রিক্স (Model, View, Projection) একত্রে ব্যবহৃত হলে, ওয়েবজিএল-এ ৩ডি মডেলগুলোকে সঠিকভাবে স্থান, স্কেল, রোটেশন, এবং প্রদর্শন করা সম্ভব হয়। এই ম্যাট্রিক্সগুলোর ব্যবহারে গেম, সিমুলেশন, এবং বিভিন্ন গ্রাফিক্স প্রজেক্টে যথার্থতা এবং নির্ভুলতা আনা সম্ভব হয়।
Read more
