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

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

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