ওয়েবজিএল (WebGL)

ওয়েবজিএল (Web Graphics Library) হলো একটি জাভাস্ক্রিপ্ট API, যা ওয়েব ব্রাউজারে সরাসরি 2D এবং 3D গ্রাফিক্স রেন্ডার করার সুযোগ দেয়। এটি কোনো প্লাগইন ছাড়াই, ব্রাউজারে উচ্চমানের গ্রাফিক্স তৈরির জন্য OpenGL ES (Embedded Systems) এর ক্ষমতা ব্যবহার করে। WebGL ওয়েব অ্যাপ্লিকেশন এবং গেমগুলিতে ত্রিমাত্রিক গ্রাফিক্স এবং ইন্টারেক্টিভ ভিজ্যুয়ালাইজেশন তৈরি করতে ব্যবহৃত হয়।

WebGL (Web Graphics Library) বাংলা টিউটোরিয়াল

WebGL হলো একটি জাভাস্ক্রিপ্ট API, যা ব্রাউজারের মধ্যে 3D গ্রাফিক্স এবং 2D গ্রাফিক্স রেন্ডার করতে ব্যবহৃত হয়। এটি সরাসরি কম্পিউটারের GPU (Graphics Processing Unit) ব্যবহার করে, যা শক্তিশালী 3D গ্রাফিক্স তৈরি করতে সাহায্য করে। WebGL এর সবচেয়ে বড় সুবিধা হলো, এটি কোন প্লাগইন ছাড়াই ওয়েব ব্রাউজারেই গ্রাফিক্স চালাতে পারে।

WebGL এর বৈশিষ্ট্যসমূহ:

1. Cross-Platform: WebGL সমস্ত আধুনিক ব্রাউজারে চলে এবং ডিভাইসের ধরনের উপর নির্ভর করে না।
2. GPU এক্সেস: WebGL সরাসরি কম্পিউটারের গ্রাফিক্স কার্ডের মাধ্যমে গ্রাফিক্স প্রসেসিং করতে সক্ষম।
3. 3D গ্রাফিক্স: WebGL-এ 3D গ্রাফিক্স তৈরি এবং নিয়ন্ত্রণ করা যায়, যা ওয়েব ব্রাউজারে গেম এবং গ্রাফিক্যাল অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়।

১. WebGL এর সাথে শুরু করা

WebGL-এর সাথে কাজ করতে প্রথমে আমাদের একটি HTML5 ক্যানভাস () ব্যবহার করতে হবে। WebGL রেন্ডার করার জন্য এই ক্যানভাস এলিমেন্টটি প্রয়োজন।

HTML ফাইলে WebGL ক্যানভাস তৈরি করা:

উপরের কোডে, একটি canvas এলিমেন্ট ব্যবহার করা হয়েছে যেখানে WebGL রেন্ডার করা হবে। এবার webgl_script.js ফাইলে WebGL ইন্টিগ্রেশন শুরু করা যাক।

২. WebGL কনটেক্সট সেটআপ

প্রথম ধাপে, আমাদের ক্যানভাস এলিমেন্ট থেকে WebGL কনটেক্সট সেটআপ করতে হবে, যা WebGL এর জন্য প্রয়োজন।

WebGL কনটেক্সট সেটআপ:

// ক্যানভাস এলিমেন্টটি নিন
const canvas = document.getElementById('webglCanvas');

// WebGL কনটেক্সট নিন
const gl = canvas.getContext('webgl');

// WebGL সমর্থন করা হচ্ছে কিনা তা যাচাই করুন
if (!gl) {
    alert('আপনার ব্রাউজার WebGL সমর্থন করে না!');
}

উপরের কোডটি ক্যানভাস এলিমেন্ট থেকে WebGL কনটেক্সট তৈরি করে, যা গ্রাফিক্স প্রসেসিংয়ের জন্য প্রয়োজন।

৩. WebGL-এ রঙ সেট করা

WebGL-এ ক্যানভাসের ব্যাকগ্রাউন্ডে রঙ যোগ করার জন্য clearColor() এবং clear() ফাংশন ব্যবহার করা হয়। clearColor() দিয়ে ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করা হয় এবং clear() ফাংশন দিয়ে সেটিকে ক্যানভাসে রেন্ডার করা হয়।

ক্যানভাসে রঙ সেট করা:

// ক্যানভাসের ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করুন (লাল, সবুজ, নীল, আলফা)
gl.clearColor(0.0, 0.0, 0.0, 1.0);  // কালো রঙ

// ক্যানভাস পরিষ্কার করুন এবং রঙ যোগ করুন
gl.clear(gl.COLOR_BUFFER_BIT);

উপরের কোডটি ক্যানভাসে কালো রঙের ব্যাকগ্রাউন্ড রেন্ডার করবে।

৪. WebGL শেডার তৈরি করা

WebGL-এ শেডার হলো প্রোগ্রাম, যা GPU তে চলে এবং গ্রাফিক্স ড্র করে। দুটি প্রকারের শেডার থাকে:

1. Vertex Shader: এটি প্রতিটি ভেরটেক্সের অবস্থান নির্ধারণ করে।
2. Fragment Shader: এটি প্রতিটি পিক্সেলের রঙ নির্ধারণ করে।

শেডার তৈরি করার ধাপ:

1. শেডারের সোর্স কোড লিখুন।
2. শেডার কম্পাইল করুন।
3. শেডার প্রোগ্রামে শেডার যোগ করুন।

শেডার কোড:

// Vertex Shader
const vertexShaderSource = `
    attribute vec4 aVertexPosition;
    void main(void) {
        gl_Position = aVertexPosition;
    }
`;

// Fragment Shader
const fragmentShaderSource = `
    void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);  // সাদা রঙ
    }
`;

// শেডার কম্পাইল করার ফাংশন
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);

    // কম্পাইলেশন যাচাই
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('Shader compilation error: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}

// Vertex এবং Fragment Shader কম্পাইল করুন
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

৫. শেডার প্রোগ্রাম তৈরি করা

শেডার প্রোগ্রাম হলো যেখানে ভেরটেক্স এবং ফ্র্যাগমেন্ট শেডার একসাথে যুক্ত হয় এবং GPU-তে রান করে।

শেডার প্রোগ্রাম তৈরি:

function createShaderProgram(gl, vertexShader, fragmentShader) {
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    // প্রোগ্রাম লিঙ্কিং যাচাই
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Shader program linking error: ' + gl.getProgramInfoLog(shaderProgram));
        return null;
    }

    return shaderProgram;
}

// শেডার প্রোগ্রাম তৈরি
const shaderProgram = createShaderProgram(gl, vertexShader, fragmentShader);

// প্রোগ্রামটি সক্রিয় করুন
gl.useProgram(shaderProgram);

৬. ভেরটেক্স ডেটা তৈরি এবং রেন্ডার করা

WebGL-এ সাধারণত ড্র করার জন্য পয়েন্ট, লাইন এবং ত্রিভুজ ব্যবহার করা হয়। আমরা এখন একটি ত্রিভুজ (triangle) ড্র করব।

ভেরটেক্স বাফার তৈরি:

// ত্রিভুজের ভেরটেক্স ডেটা (X, Y, Z)
const vertices = new Float32Array([
    0.0,  1.0,  0.0,
   -1.0, -1.0,  0.0,
    1.0, -1.0,  0.0,
]);

// বাফার তৈরি করুন এবং ডেটা জমা দিন
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// ভেরটেক্স অ্যাট্রিবিউট সক্রিয় করুন
const aVertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
gl.enableVertexAttribArray(aVertexPosition);
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);

ত্রিভুজ রেন্ডার করা:

// রেন্ডার করুন
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);  // তিনটি পয়েন্ট নিয়ে একটি ত্রিভুজ আঁকা হচ্ছে

৭. সম্পূর্ণ কোড:

উপসংহার

WebGL দিয়ে আপনি সরাসরি ব্রাউজারে 3D এবং 2D গ্রাফিক্স তৈরি করতে পারেন। এই টিউটোরিয়ালে আমরা দেখেছি কিভাবে WebGL দিয়ে একটি ত্রিভুজ আঁকা যায়। তবে WebGL আরও অনেক জটিল গ্রাফিক্স, যেমন 3D মডেলিং, ইন্টারেক্টিভ গেম এবং ভিজ্যুয়ালাইজেশন তৈরি করতে সক্ষম।