অ্যানিমেশন এবং মুভমেন্ট

ওয়েবজিএল-এ অ্যানিমেশন এবং মুভমেন্ট কি?

ওয়েবজিএল (WebGL) ব্যবহার করে গ্রাফিক্স অ্যানিমেশন এবং মুভমেন্ট তৈরি করা যায়, যা ৩ডি অথবা ২ডি অবজেক্টকে গতিশীল এবং ইন্টারঅ্যাকটিভ করে তোলে। অ্যানিমেশন বলতে কোনো অবজেক্টের পজিশন, আকার, রঙ, অথবা অন্যান্য বৈশিষ্ট্য পরিবর্তন করার প্রক্রিয়াকে বোঝায়, আর মুভমেন্ট হলো অবজেক্টের স্থান পরিবর্তন (position change) বা গতির পরিবর্তন (movement change)।

ওয়েবজিএল-এর সাথে অ্যানিমেশন এবং মুভমেন্ট তৈরি করতে সাধারণত জাভাস্ক্রিপ্ট এবং শেডার প্রোগ্রামিং ব্যবহার করা হয়, যাতে গ্রাফিক্স সঠিকভাবে রেন্ডার করা যায় এবং চলন্ত অবজেক্টের উপস্থাপনা ঘটানো যায়।

ওয়েবজিএল-এ অ্যানিমেশন এবং মুভমেন্ট তৈরি করার প্রক্রিয়া

১. অবজেক্টের অবস্থান পরিবর্তন

অ্যানিমেশন এবং মুভমেন্ট শুরু করার জন্য প্রথমেই অবজেক্টের পজিশন বা অবস্থান পরিবর্তন করতে হবে। উদাহরণস্বরূপ, নিচে একটি বেসিক ২ডি ট্রায়াঙ্গেল (Triangle) এর পজিশন পরিবর্তন করা হচ্ছে:

let angle = 0.0; // Initial angle

function animate() {
    angle += 0.01; // Increment angle for animation
    const cosAngle = Math.cos(angle);
    const sinAngle = Math.sin(angle);

    // Update the position of the vertices based on angle
    vertices = new Float32Array([
        cosAngle, sinAngle, 0.0,  // Vertex 1
        -cosAngle, sinAngle, 0.0, // Vertex 2
        0.0, -1.0, 0.0           // Vertex 3
    ]);

    // Rebind and update the buffer with new vertices
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    // Redraw the scene
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    requestAnimationFrame(animate); // Request the next frame
}

এখানে, angle পরিবর্তন হচ্ছে এবং এর মাধ্যমে টেক্সচার বা অবজেক্টের পজিশন গাণিতিকভাবে পরিবর্তিত হচ্ছে। requestAnimationFrame() ফাংশনটি ব্যবহার করে প্রতি ফ্রেমে নতুন পজিশন রেন্ডার করা হচ্ছে।

২. মুভমেন্টের জন্য ট্রান্সফরমেশন ব্যবহার

অ্যানিমেশন এবং মুভমেন্টের জন্য বিভিন্ন ট্রান্সফরমেশন যেমন ট্রান্সলেশন (Translation), রোটেশন (Rotation) এবং স্কেলিং (Scaling) ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি অবজেক্টের পজিশন ট্রান্সলেট করতে:

const modelMatrix = mat4.create(); // Create a matrix
mat4.translate(modelMatrix, modelMatrix, [0.01, 0.0, 0.0]); // Translate along x-axis

// Set the model matrix in the shader
const uModelMatrix = gl.getUniformLocation(program, "uModelMatrix");
gl.uniformMatrix4fv(uModelMatrix, false, modelMatrix);

এখানে, mat4.translate() ফাংশনটি একটি ট্রান্সফরমেশন ম্যাট্রিক্স তৈরি করে এবং তাকে পজিশনে ০.০১ পরিবর্তন করছে, যা প্রতি ফ্রেমে অ্যানিমেশন পরিবর্তনের জন্য ব্যবহার হবে।

৩. শেডারে অ্যানিমেশন যুক্ত করা

শেডার প্রোগ্রামে পজিশন বা রঙ পরিবর্তনের জন্য ইউনিফর্ম (Uniform) ব্যবহার করা হয়। উদাহরণস্বরূপ, ভেরটেক্স শেডারে একটি নতুন ট্রান্সফরমেশন অ্যাপ্লাই করা:

const vertexShaderSource = `
    attribute vec4 a_position;
    uniform mat4 uModelMatrix;
    void main() {
        gl_Position = uModelMatrix * a_position; // Apply transformation
    }
`;

এখানে uModelMatrix শেডারে একটি ইউনিফর্ম হিসেবে ব্যবহার হচ্ছে, যা ট্রান্সফরমেশন অ্যাপ্লাই করে অবজেক্টের পজিশন পরিবর্তন করবে।

৪. অ্যানিমেশন চক্রের জন্য টাইম ভ্যারিয়েবল

অ্যানিমেশনকে সজীব এবং বাস্তবসম্মত করার জন্য টাইম ভ্যারিয়েবল ব্যবহার করা হয়। উদাহরণস্বরূপ, অবজেক্টের ঘূর্ণন অ্যানিমেট করার জন্য:

let lastTime = 0;

function animate(timestamp) {
    const deltaTime = timestamp - lastTime; // Calculate time difference
    lastTime = timestamp;

    // Rotate the object
    const angle = (deltaTime / 1000) * Math.PI; // Speed of rotation
    const cosAngle = Math.cos(angle);
    const sinAngle = Math.sin(angle);

    // Update vertices with new rotation
    vertices = new Float32Array([
        cosAngle, sinAngle, 0.0, // Vertex 1
        -cosAngle, sinAngle, 0.0, // Vertex 2
        0.0, -1.0, 0.0          // Vertex 3
    ]);

    // Redraw the scene with updated vertices
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    requestAnimationFrame(animate); // Request next frame
}

এখানে, timestamp ব্যবহার করে সময়ের পরিবর্তন অনুযায়ী ঘূর্ণন অ্যাঙ্গেল হিসাব করা হচ্ছে এবং প্রতিটি ফ্রেমে অ্যানিমেশন রেন্ডার করা হচ্ছে।

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

• পারফরমেন্স উন্নত করা: অ্যানিমেশন ব্যবস্থাপনা করার সময় পারফরমেন্স রক্ষার জন্য ফ্রেম রেট (frame rate) স্থির রাখা জরুরি। requestAnimationFrame() ফাংশনটি এই কাজটি দক্ষভাবে করে।
• ইন্টারঅ্যাকটিভিটি: ব্যবহারকারীর ইনপুট (mouse, keyboard) দ্বারা অবজেক্টের মুভমেন্ট কন্ট্রোল করতে পারেন। উদাহরণস্বরূপ, মাউসের মাধ্যমে অবজেক্ট ঘুরানো বা সরানো।
• ম্যাট্রিক্স ট্রান্সফরমেশন: ভেক্টর এবং ম্যাট্রিক্সের মাধ্যমে মুভমেন্ট, স্কেলিং এবং রোটেশন অত্যন্ত ফ্লুইড এবং কার্যকরভাবে পরিচালিত হয়।

উপসংহার

ওয়েবজিএল-এ অ্যানিমেশন এবং মুভমেন্ট তৈরি করতে গাণিতিক হিসাব এবং শেডারের মাধ্যমে অবজেক্টের বৈশিষ্ট্য পরিবর্তন করা হয়। জাভাস্ক্রিপ্ট এবং শেডার প্রোগ্রামিং ব্যবহার করে ইনপুট এবং সময়ভিত্তিক পরিবর্তনগুলি গতি এবং অ্যানিমেশনে রূপান্তরিত হয়, যা ৩ডি বা ২ডি গ্রাফিক্সের জন্য ইন্টারঅ্যাকটিভ এবং গতিশীল অভিজ্ঞতা প্রদান করে।

অ্যানিমেশন লুপ কি?

ওয়েবজিএল-এ অ্যানিমেশন লুপ হলো এমন একটি প্রক্রিয়া যেখানে একাধিক ফ্রেম (frames) একে অপরের সাথে ধারাবাহিকভাবে রেন্ডার (render) করা হয়। এটি 3D অবজেক্ট বা সিমুলেশন এর মধ্যে গতিশীলতা (motion) বা পরিবর্তন (change) প্রদর্শন করতে ব্যবহৃত হয়। অ্যানিমেশন লুপ সাধারণত requestAnimationFrame() ফাংশনের মাধ্যমে তৈরি করা হয়, যা প্রতিটি ফ্রেমে নির্দিষ্ট কাজ সম্পন্ন করে এবং পরবর্তী ফ্রেমে চলে যায়।

বেসিক অ্যানিমেশন লুপ তৈরির প্রক্রিয়া

ওয়েবজিএল-এ একটি বেসিক অ্যানিমেশন লুপ তৈরি করতে, কয়েকটি মূল পদক্ষেপ অনুসরণ করতে হবে:

১. WebGL কনটেক্সট তৈরি করা

প্রথমেই ওয়েবজিএল কনটেক্সট তৈরি করতে হবে, যা গ্রাফিক্স রেন্ডারিং করার জন্য ব্যবহৃত হবে।

var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');
if (!gl) {
    alert('WebGL not supported!');
}

২. শেডার তৈরি করা

একটি Vertex Shader এবং একটি Fragment Shader তৈরি করতে হবে, যাতে 3D অবজেক্টের রেন্ডারিং করা যাবে। এই শেডারগুলি গঠন এবং রঙের তথ্য প্রক্রিয়াকরণ করবে।

Vertex Shader Example:

attribute vec4 a_position;
uniform mat4 u_modelViewProjectionMatrix;

void main() {
    gl_Position = u_modelViewProjectionMatrix * a_position;
}

Fragment Shader Example:

precision mediump float;
uniform vec4 u_color;

void main() {
    gl_FragColor = u_color;
}

৩. শেডার প্রোগ্রাম কম্পাইল করা

Vertex এবং Fragment Shader তৈরি হওয়ার পর, এগুলিকে WebGL প্রোগ্রামে সংযুক্ত করতে হবে।

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
var program = createProgram(gl, vertexShader, fragmentShader);

৪. অ্যানিমেশন ফাংশন তৈরি করা

অ্যানিমেশন তৈরি করতে, requestAnimationFrame() ফাংশন ব্যবহার করা হয়, যা প্রতিটি নতুন ফ্রেমে অ্যানিমেশন আপডেট করে এবং পরবর্তী ফ্রেমের জন্য কল করে।

function animate() {
    // অ্যানিমেশন লজিক এখানে থাকবে, যেমন অবজেক্টের অবস্থান পরিবর্তন করা
    // রেন্ডারিং করা
    renderScene();

    // পরবর্তী ফ্রেমের জন্য অ্যানিমেশন ফাংশন কল করা
    requestAnimationFrame(animate);
}

৫. রেন্ডার ফাংশন তৈরি করা

রেন্ডার ফাংশন হবে যেখানে আপনি গ্রাফিক্স রেন্ডার করবেন এবং অ্যানিমেশন আপডেট করবেন। উদাহরণস্বরূপ:

function renderScene() {
    // ব্রাশ বা রং পরিষ্কার করা
    gl.clear(gl.COLOR_BUFFER_BIT);

    // ৩D অবজেক্ট বা দৃশ্য রেন্ডার করা
    // এটি আপনার 3D অবজেক্টের অবস্থান, আকার, রঙ ইত্যাদি পরিবর্তন করবে

    // পরবর্তী ফ্রেম রেন্ডার করার জন্য
    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

৬. অ্যানিমেশন শুরু করা

অ্যানিমেশন লুপ শুরু করতে requestAnimationFrame() ফাংশন কল করে অ্যানিমেশন চালু করতে হবে।

requestAnimationFrame(animate); // অ্যানিমেশন শুরু

সম্পূর্ণ উদাহরণ

এখানে একটি বেসিক ওয়েবজিএল অ্যানিমেশন লুপের উদাহরণ দেওয়া হলো, যেখানে একটি ট্রায়াঙ্গল (Triangle) ধীরে ধীরে পর্দার উপর ঘোরানো হবে:

<canvas id="myCanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');
if (!gl) {
    alert('WebGL not supported!');
}

var vertexShaderSource = `
    attribute vec4 a_position;
    uniform mat4 u_modelViewProjectionMatrix;
    void main() {
        gl_Position = u_modelViewProjectionMatrix * a_position;
    }
`;

var fragmentShaderSource = `
    precision mediump float;
    uniform vec4 u_color;
    void main() {
        gl_FragColor = u_color;
    }
`;

function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('Shader compile error: ' + gl.getShaderInfoLog(shader));
    }
    return shader;
}

function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        alert('Program link error: ' + gl.getProgramInfoLog(program));
    }
    gl.useProgram(program);
    return program;
}

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
var program = createProgram(gl, vertexShader, fragmentShader);

var vertices = new Float32Array([
    0.0,  0.5,
   -0.5, -0.5,
    0.5, -0.5
]);

var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var aPositionLocation = gl.getAttribLocation(program, 'a_position');
gl.vertexAttribPointer(aPositionLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPositionLocation);

var uModelViewProjectionMatrixLocation = gl.getUniformLocation(program, 'u_modelViewProjectionMatrix');
var uColorLocation = gl.getUniformLocation(program, 'u_color');

var angle = 0;

function renderScene() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    var modelViewProjectionMatrix = mat4.create();
    mat4.rotateZ(modelViewProjectionMatrix, modelViewProjectionMatrix, angle);
    gl.uniformMatrix4fv(uModelViewProjectionMatrixLocation, false, modelViewProjectionMatrix);
    
    gl.uniform4f(uColorLocation, 1.0, 0.0, 0.0, 1.0);  // Red color
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    angle += 0.01;
}

function animate() {
    renderScene();
    requestAnimationFrame(animate);
}

requestAnimationFrame(animate); // Start animation
</script>

সারাংশ

ওয়েবজিএল-এ বেসিক অ্যানিমেশন লুপ তৈরি করার মাধ্যমে 3D গ্রাফিক্সের গতিশীলতা (dynamic) প্রদর্শন করা সম্ভব হয়। requestAnimationFrame() ব্যবহার করে ফ্রেম ভিত্তিক অ্যানিমেশন প্রক্রিয়া পরিচালনা করা হয়। এটি পারফরম্যান্স উন্নত করতে সহায়তা করে, কারণ এটি ব্রাউজারের ইভেন্ট লুপের সাথে সিঙ্ক্রোনাইজ করা থাকে এবং প্রতি ফ্রেমে যথাযথ রেন্ডারিং নিশ্চিত করে।

টাইম বেসড অ্যানিমেশন কি?

টাইম বেসড অ্যানিমেশন হলো এমন একটি অ্যানিমেশন পদ্ধতি যেখানে অ্যানিমেশন চলাকালীন সময়ের ব্যবধান (time delta) ব্যবহার করে অবজেক্টের গতি বা অবস্থান নিয়ন্ত্রিত হয়। এতে কোনো ফ্রেম রেটের উপর নির্ভরশীল না হয়ে, একটি নির্দিষ্ট সময়ের মধ্যে অ্যানিমেশন একীভূত হতে পারে। এটি বিশেষ করে ওয়েবজিএল বা গ্রাফিক্স প্রোগ্রামিং-এ ব্যবহার করা হয় যেখানে বিভিন্ন অবজেক্টের অ্যানিমেশন গতি স্বাভাবিক রাখতে হয়।

Delta Time (Δt) হল প্রতিটি ফ্রেমের মধ্যে পেরিয়ে যাওয়া সময়ের পরিমাণ, যা অ্যানিমেশনগুলোকে ফ্রেম রেটের উপর নির্ভরশীল না করে সমন্বয় করতে সহায়তা করে।

Delta Time কি এবং কেন প্রয়োজন?

Delta Time (Δt) হলো দুটি ফ্রেমের মধ্যে সময়ের পার্থক্য। ওয়েবজিএল বা গেম ডেভেলপমেন্টে, প্রতি ফ্রেমে Delta Time হিসাব করা হয়, যাতে অ্যানিমেশনগুলো ভিন্ন ভিন্ন ডিভাইসে সঠিকভাবে রান করে, তার ফ্রেম রেট বা GPU ক্ষমতার উপর নির্ভর না হয়ে।

যদি আপনি 60 FPS (Frames Per Second) গতিতে কাজ করছেন, তবে Delta Time হবে প্রতি ফ্রেমের মধ্যে 1/60 সেকেন্ড। যদি আপনি 30 FPS-এ থাকেন, তবে Delta Time হবে 1/30 সেকেন্ড। এই পার্থক্যটি গতি বা অ্যানিমেশনকে সামঞ্জস্যপূর্ণ করে।

Delta Time ব্যবহার করে অ্যানিমেশন কিভাবে করা যায়?

Delta Time ব্যবহার করে অ্যানিমেশন তৈরি করতে কিছু সাধারণ পদক্ষেপ অনুসরণ করা হয়:

1. Delta Time হিসাব করা

প্রথমত, প্রতি ফ্রেমের জন্য Delta Time হিসাব করতে হয়, যা সাধারণত requestAnimationFrame() ফাংশন ব্যবহার করে করা হয়।

let lastTime = 0;

function animate(currentTime) {
  // Delta Time হিসাব করা
  let deltaTime = (currentTime - lastTime) / 1000; // সময় সেকেন্ডে রূপান্তর করা
  lastTime = currentTime;

  // অ্যানিমেশন ফাংশন কল
  update(deltaTime);

  // পরবর্তী ফ্রেম রেন্ডার
  requestAnimationFrame(animate);
}

2. অ্যানিমেশন আপডেট করা

অ্যানিমেশন আপডেট করার সময় Delta Time ব্যবহার করতে হবে যাতে অবজেক্টটি একটি নির্দিষ্ট গতিতে চলতে থাকে, নির্ভর না করে সিস্টেমের ফ্রেম রেটের উপর। উদাহরণস্বরূপ, একটি অবজেক্টের অবস্থান আপডেট করার জন্য:

let position = 0;
const speed = 5; // প্রতি সেকেন্ডে গতি

function update(deltaTime) {
  // অবস্থান আপডেট করা Delta Time ব্যবহার করে
  position += speed * deltaTime;
  
  // অবজেক্টের অবস্থান রেন্ডার করা
  render(position);
}

function render(position) {
  // অবজেক্টের নতুন অবস্থান ব্যবহার করে গ্রাফিক্স রেন্ডারিং করা
  console.log("Object position:", position);
}

এখানে, অবজেক্টের অবস্থান প্রতি সেকেন্ডে 5 ইউনিট গতি হবে। Delta Time ব্যবহার করার ফলে, গতি পরিবর্তন হতে পারে ফ্রেম রেটের উপর নির্ভর না করে।

3. অ্যানিমেশন স্টপ বা লুপিং

এটি নিশ্চিত করা দরকার যে অ্যানিমেশনটি সঠিকভাবে চালু বা বন্ধ হচ্ছে। সাধারণত requestAnimationFrame() ফাংশনটি লুপিং ফাংশন হিসেবে কাজ করে, যাতে অ্যাসিনক্রোনাসভাবে অ্যানিমেশন চালানো যায়।

টাইম বেসড অ্যানিমেশনের সুবিধা

• ফ্রেম রেটের উপর নির্ভরশীল না হওয়া: Delta Time ব্যবহার করে অ্যানিমেশন সিস্টেমের ফ্রেম রেটের উপর নির্ভরশীল নয়, যা সিস্টেমের মধ্যে সামঞ্জস্য বজায় রাখে।
• কনসিস্টেন্ট অ্যানিমেশন: এটি বিশেষ করে গেম বা ওয়েব অ্যাপ্লিকেশনে গুরুত্বপূর্ণ, যেখানে একাধিক ডিভাইস ও হার্ডওয়্যারে একই অভিজ্ঞতা প্রদান করা হয়।
• অ্যানিমেশন সমন্বয়: যেকোনো পরিস্থিতিতে অ্যানিমেশন সহজে সমন্বিত করা যায়, যেমন ভিন্ন ভিন্ন ডিভাইসে একই অভিজ্ঞতা নিশ্চিত করা।

ওয়েবজিএল-এ টাইম বেসড অ্যানিমেশন ব্যবহার

ওয়েবজিএল-এ টাইম বেসড অ্যানিমেশন করার জন্য Delta Time ব্যবহার করে গ্রাফিক্স রেন্ডারিং বা অবজেক্ট মুভমেন্ট নিয়ন্ত্রণ করা যায়। ওয়েবজিএল অ্যাপ্লিকেশনগুলোর ক্ষেত্রে এটি সিস্টেমের উপর নির্ভরশীলতা কমিয়ে দেয় এবং প্রতিটি ফ্রেমে অ্যাক্টিভিটি সময়ের সাথে সঙ্গতিপূর্ণ থাকে।

let lastTime = 0;
let rotationAngle = 0;

function animate(currentTime) {
  let deltaTime = (currentTime - lastTime) / 1000; // সেকেন্ডে সময়
  lastTime = currentTime;

  // অবজেক্টের ঘূর্ণন (rotation) আপডেট করা
  rotationAngle += 45 * deltaTime;  // প্রতি সেকেন্ডে 45 ডিগ্রি ঘূর্ণন
  if (rotationAngle > 360) rotationAngle = 0;  // ঘূর্ণন 360 ডিগ্রি পার হলে রিসেট

  update(rotationAngle);
  requestAnimationFrame(animate);
}

function update(rotationAngle) {
  // ওয়েবজিএল-এ 3D অবজেক্টের ঘূর্ণন বা অবস্থান আপডেট করা
  console.log("Rotation Angle:", rotationAngle);
}

Delta Time ব্যবহার করে টাইম বেসড অ্যানিমেশন ওয়েবজিএল ও অন্যান্য গ্রাফিক্স প্রোগ্রামিং প্ল্যাটফর্মে অভ্যন্তরীণ গতি বা অ্যানিমেশন নিয়ন্ত্রণের জন্য অত্যন্ত কার্যকর। এটি নিশ্চিত করে যে, অভিজ্ঞতা কোনো ডিভাইস বা সিস্টেমের মধ্যে ফ্রেম রেটের পরিবর্তনের জন্য পরিবর্তিত হবে না, এবং অ্যানিমেশন আরও সমন্বিত ও বাস্তবসম্মত হবে।

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

ওয়েবজিএল (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) অপারেশনগুলো একসাথে মেট্রিক্স কম্পোজিশন দ্বারা সম্পন্ন করা হয়, এবং শেডারের মাধ্যমে টেক্সচার বা মডেল রেন্ডারিংয়ে প্রভাব ফেলে। এছাড়া, ব্যবহারকারীর ইনপুটের মাধ্যমে অবজেক্ট মুভমেন্ট পরিচালনার জন্য ইভেন্ট লিসনার ব্যবহার করা হয়।

ওয়েবজিএল (WebGL) এ অ্যানিমেশন তৈরি করার সময়, বিভিন্ন ইন্টারপোলেশন পদ্ধতি ব্যবহৃত হয়, যা দুটি বা ততোধিক ভ্যালুর মধ্যে একটি নির্দিষ্ট মান গণনা করতে সাহায্য করে। এর মধ্যে দুটি জনপ্রিয় ইন্টারপোলেশন পদ্ধতি হলো অ্যানিমেশন ইন্টারপোলেশন এবং লিনিয়ার ইন্টারপোলেশন। এই দুটি পদ্ধতি ব্যবহার করে অ্যানিমেশন তৈরি করা সহজ এবং মসৃণ হয়।

লিনিয়ার ইন্টারপোলেশন (Linear Interpolation)

লিনিয়ার ইন্টারপোলেশন (LERP) হলো একটি সাধারন পদ্ধতি, যা দুটি ভ্যালু বা অবস্থানের মধ্যে সরলরেখায় একটি মধ্যবর্তী মান নির্ধারণ করে। এটি মূলত একটি গাণিতিক পদ্ধতি, যা সরলরেখায় এক মান থেকে অন্য মানে চলাচল করার সময় ব্যবহার করা হয়।

লিনিয়ার ইন্টারপোলেশন কিভাবে কাজ করে?

লিনিয়ার ইন্টারপোলেশনে, দুটি ভ্যালু $A$ এবং $B$ এর মধ্যে একটি মান $t$ দিয়ে নির্ধারণ করা হয়, যেখানে $t$ ০ এবং ১ এর মধ্যে থাকে। এই ইন্টারপোলেশন পদ্ধতি নিম্নরূপ:

$$Lerp(A, B, t) = A + t \times (B - A)$$

এখানে:

• A: শুরুর মান।
• B: শেষ মান।
• t: ইন্টারপোলেটেড মানের প্রগতি, যেখানে $t = 0$ হলে ফলাফল হবে $A$ এবং $t = 1$ হলে ফলাফল হবে $B$।

লিনিয়ার ইন্টারপোলেশনের ব্যবহার

• অ্যানিমেশন: অবজেক্টের অবস্থান, আকার, রঙ ইত্যাদির জন্য লিনিয়ার ইন্টারপোলেশন ব্যবহৃত হয়।
• মুভমেন্ট: ওয়েবজিএল গেমস বা গ্রাফিক্সে অবজেক্টগুলোর মধ্যে মসৃণ মুভমেন্ট তৈরি করতে।
• অডিও ভলিউম: অডিও ভলিউম বা অন্য প্যারামিটার পরিবর্তনের জন্য ব্যবহৃত হয়।

উদাহরণ

ধরা যাক, আপনার কাছে দুটি ভ্যালু 10 এবং 20, এবং $t = 0.5$ এ আপনি ইন্টারপোলেটেড মান চান।

$$Lerp(10, 20, 0.5) = 10 + 0.5 \times (20 - 10) = 10 + 5 = 15$$

এখানে, 0.5 প্রগ্রেসিভ ভ্যালু দিয়ে আপনি 10 থেকে 20 পর্যন্ত ১৫ পেয়ে গেছেন।

অ্যানিমেশন ইন্টারপোলেশন (Animation Interpolation)

অ্যানিমেশন ইন্টারপোলেশন হল একটি কৌশল যেখানে একটি অবজেক্টের পজিশন বা অন্যান্য বৈশিষ্ট্যের পরিবর্তন একটি নির্দিষ্ট সময়ের মধ্যে বা দুটি কিপয়েন্টের মধ্যে ধীরে ধীরে সম্পন্ন হয়। এই পদ্ধতিতে সাধারনত লিনিয়ার ইন্টারপোলেশন ছাড়াও আরও উন্নত ইন্টারপোলেশন কৌশল ব্যবহার করা হয়, যেমন ইজিং (Easing), যা অ্যানিমেশনকে আরও বাস্তবসম্মত এবং ইন্টারঅ্যাকটিভ করে তোলে।

অ্যানিমেশন ইন্টারপোলেশন কিভাবে কাজ করে?

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

• Ease In: অ্যানিমেশন ধীরে শুরু হয়ে শেষে দ্রুত হয়।
• Ease Out: অ্যানিমেশন দ্রুত শুরু হয়ে ধীরে শেষ হয়।
• Ease In-Out: অ্যানিমেশন শুরু এবং শেষ ধীরে হয়ে মাঝখানে দ্রুত হয়।

এগুলি সাধারণত লিনিয়ার ইন্টারপোলেশনের তুলনায় বেশি বাস্তবসম্মত এবং স্বাভাবিক অনুভূতি প্রদান করে।

উদাহরণ

ধরা যাক, আপনি একটি অবজেক্টের অবস্থান পরিবর্তন করতে চান। আপনাকে কিছু সময়ের মধ্যে অবজেক্টটির অবস্থানকে প্রথম পজিশন থেকে দ্বিতীয় পজিশনে নিয়ে যেতে হবে। লিনিয়ার ইন্টারপোলেশন এই পরিবর্তন সরাসরি করে, তবে আপনি যদি Ease-In বা Ease-Out ব্যবহার করেন, তবে অবজেক্টটি প্রথমে ধীরে চলে এবং পরে দ্রুত চলে অথবা বিপরীতভাবে।

লিনিয়ার ইন্টারপোলেশন এবং অ্যানিমেশন ইন্টারপোলেশনের মধ্যে পার্থক্য

সারাংশ

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