অবজেক্ট মুভমেন্ট এবং ট্রান্সফরমেশন আপডেট

অবজেক্ট মুভমেন্ট এবং ট্রান্সফরমেশন কি?

ওয়েবজিএল (WebGL) এ অবজেক্ট মুভমেন্ট এবং ট্রান্সফরমেশন হলো গ্রাফিক্স ইলিমেন্টের অবস্থান, স্কেল, রোটেশন ইত্যাদি পরিবর্তন করার পদ্ধতি। 3D গ্রাফিক্সের ক্ষেত্রে অবজেক্টগুলিকে সঠিকভাবে স্থানান্তর (translation), ঘূর্ণন (rotation), এবং আকার পরিবর্তন (scaling) করা প্রয়োজন। এই অপারেশনগুলোকে ট্রান্সফরমেশন বলা হয়, এবং ওয়েবজিএল এ এগুলি শেডার এবং ম্যাট্রিক্স ম্যানিপুলেশন দ্বারা পরিচালিত হয়।

ওয়েবজিএল-এ ট্রান্সফরমেশন টেকনিক

ওয়েবজিএল (WebGL) এর মাধ্যমে অবজেক্ট মুভমেন্ট এবং ট্রান্সফরমেশন সম্পন্ন করার জন্য মূলত ম্যাট্রিক্সের সাহায্য নেওয়া হয়। 3D গ্রাফিক্সের মুভমেন্ট ও ট্রান্সফরমেশনগুলোকে সাধারণত তিনটি প্রধান ধরনের ট্রান্সফরমেশন দ্বারা নিয়ন্ত্রণ করা হয়:

1. ট্রান্সলেশন (Translation)

ট্রান্সলেশন অবজেক্টের অবস্থান পরিবর্তন করে। এটি অবজেক্টের পজিশনকে একটি নির্দিষ্ট দিক বা কোঅর্ডিনেট সিস্টেমে স্থানান্তরিত করে। ওয়েবজিএল এ এটা সাধারণত ম্যাট্রিক্স অপারেশন হিসেবে ব্যবহৃত হয়।

const translationMatrix = mat4.create();
mat4.translate(translationMatrix, translationMatrix, [x, y, z]); // অবজেক্টের স্থানান্তর

এখানে x, y, এবং z হল অবজেক্টের নতুন স্থানাঙ্ক।

2. রোটেশন (Rotation)

রোটেশন অবজেক্টের কোণ পরিবর্তন করে। এটি একটি নির্দিষ্ট অক্ষ (axis) অথবা পয়েন্টের চারপাশে অবজেক্টকে ঘূর্ণন করে। ওয়েবজিএল-এ রোটেশন সাধারণত 3D ম্যাট্রিক্স অপারেশন দ্বারা সম্পন্ন হয়।

const rotationMatrix = mat4.create();
mat4.rotate(rotationMatrix, rotationMatrix, angle, [1, 0, 0]); // X অক্ষের চারপাশে রোটেশন

এখানে angle হল ঘূর্ণনের কোণ এবং [1, 0, 0] হল X অক্ষের চারপাশে ঘূর্ণন করার নির্দেশক।

3. স্কেলিং (Scaling)

স্কেলিং অবজেক্টের আকার পরিবর্তন করে। এটি অবজেক্টের দৈর্ঘ্য, প্রস্থ এবং উচ্চতা বাড়ায় বা কমায়। ওয়েবজিএল-এ স্কেলিং অপারেশন ম্যাট্রিক্সের মাধ্যমে পরিচালিত হয়।

const scalingMatrix = mat4.create();
mat4.scale(scalingMatrix, scalingMatrix, [sx, sy, sz]); // স্কেলিং ভেক্টর

এখানে sx, sy, এবং sz হল অবজেক্টের স্কেল ফ্যাক্টর।

ট্রান্সফরমেশন মেট্রিক্স এবং শেডার

ওয়েবজিএল-এ অবজেক্টের মুভমেন্ট এবং ট্রান্সফরমেশন আপডেট করতে ম্যাট্রিক্স ব্যবহৃত হয়। ম্যাট্রিক্স অপারেশনগুলো একত্রিত হয়ে একটি ফাইনাল ট্রান্সফরমেশন মেট্রিক্স তৈরি করে, যা শেডারের মাধ্যমে অবজেক্টে প্রভাব ফেলে।

ম্যাট্রিক্স কম্পোজিশন

একটি 3D অবজেক্টে স্থানান্তর, রোটেশন, এবং স্কেলিং একত্রিত করতে হলে, আমরা বিভিন্ন মেট্রিক্সকে একত্রিত করি। ওয়েবজিএল এ ম্যাট্রিক্স কম্পোজিশনের মাধ্যমে একাধিক ট্রান্সফরমেশন একসাথে সম্পন্ন করা হয়।

const modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, [x, y, z]);   // ট্রান্সলেশন
mat4.rotate(modelMatrix, modelMatrix, angle, [1, 0, 0]); // রোটেশন
mat4.scale(modelMatrix, modelMatrix, [sx, sy, sz]);   // স্কেলিং

এখানে modelMatrix হল মডেল ট্রান্সফরমেশন মেট্রিক্স, যা একাধিক ট্রান্সফরমেশন কম্পোজিশন করে তৈরি করা হয়েছে।

শেডারে ট্রান্সফরমেশন পাস করা

ওয়েবজিএল-এ শেডার প্রোগ্রামে ট্রান্সফরমেশন মেট্রিক্স পাস করা হয় যাতে গ্রাফিক্সের পরিবর্তন দৃশ্যমান হয়।

const modelMatrixLocation = gl.getUniformLocation(program, "u_modelMatrix");
gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);

এখানে u_modelMatrix হল শেডারে পাস করা ট্রান্সফরমেশন মেট্রিক্স।

অবজেক্ট মুভমেন্টের জন্য ইভেন্ট লিসনার (Event Listener) ব্যবহার

অবজেক্টের মুভমেন্ট এবং ট্রান্সফরমেশন আপডেট করতে ইভেন্ট লিসনার ব্যবহার করা হয়। উদাহরণস্বরূপ, ব্যবহারকারীর মাউস বা কীবোর্ড ইনপুটের মাধ্যমে অবজেক্ট মুভ করা হতে পারে।

let x = 0, y = 0, z = 0;

document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowUp') {
        y += 0.1;
    } else if (event.key === 'ArrowDown') {
        y -= 0.1;
    }
    updateMovement();
});

function updateMovement() {
    mat4.translate(modelMatrix, modelMatrix, [x, y, z]);
    gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);
}

এখানে, কীবোর্ডের ইনপুটের মাধ্যমে অবজেক্টের y পজিশন আপডেট করা হচ্ছে।

সারাংশ

ওয়েবজিএল (WebGL) এ অবজেক্ট মুভমেন্ট এবং ট্রান্সফরমেশন আপডেট করার জন্য ম্যাট্রিক্স অপারেশনগুলো গুরুত্বপূর্ণ ভূমিকা পালন করে। স্থানান্তর (translation), রোটেশন (rotation), এবং স্কেলিং (scaling) অপারেশনগুলো একসাথে মেট্রিক্স কম্পোজিশন দ্বারা সম্পন্ন করা হয়, এবং শেডারের মাধ্যমে টেক্সচার বা মডেল রেন্ডারিংয়ে প্রভাব ফেলে। এছাড়া, ব্যবহারকারীর ইনপুটের মাধ্যমে অবজেক্ট মুভমেন্ট পরিচালনার জন্য ইভেন্ট লিসনার ব্যবহার করা হয়।