WebGL এর কাজের পদ্ধতি

ওয়েবজিএল কীভাবে কাজ করে?

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

ওয়েবজিএল এর কাজের পদ্ধতি

ওয়েবজিএল এর কাজের পদ্ধতি মূলত কয়েকটি ধাপে বিভক্ত:

1. ক্যানভাস (Canvas) প্রস্তুত করা

ওয়েবজিএল গ্রাফিক্স রেন্ডার করতে HTML5 ক্যানভাস এলিমেন্ট ব্যবহার করে। প্রথমে, একটি ক্যানভাস এলিমেন্ট তৈরি করতে হয় এবং ওয়েবজিএল কনটেক্সট (WebGL Context) সেট করতে হয়।

<canvas id="webglCanvas" width="500" height="500"></canvas>

এই ক্যানভাস এলিমেন্টে গ্রাফিক্স রেন্ডার করা হয় এবং জাভাস্ক্রিপ্টের মাধ্যমে ক্যানভাসের কনটেক্সট নির্বাচন করা হয়।

var canvas = document.getElementById("webglCanvas");
var gl = canvas.getContext("webgl");

2. শেডার (Shader) তৈরি

ওয়েবজিএল গ্রাফিক্সের জন্য দুটি ধরনের শেডার ব্যবহার করে:

• Vertex Shader: এটি গ্রাফিক্সের পয়েন্টগুলির অবস্থান এবং বৈশিষ্ট্য নির্ধারণ করে। Vertex Shader গ্রাফিক্সের প্রথম স্তর।
• Fragment Shader: এটি গ্রাফিক্সের পিক্সেল রঙ এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করে।

প্রতিটি শেডারকে একটি কোড স্ট্রিং হিসেবে তৈরি করতে হয় এবং ওয়েবজিএল কনটেক্সটের মাধ্যমে এটি কম্পাইল ও লিঙ্ক করা হয়।

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

3. প্রোগ্রাম তৈরি এবং শেডার লিঙ্কিং

একবার শেডার কোড কম্পাইল হয়ে গেলে, পরবর্তী পদক্ষেপ হলো শেডারগুলোকে একত্রিত করা এবং একটি ওয়েবজিএল প্রোগ্রাম তৈরি করা। এই প্রোগ্রামটি শেডারগুলোর মধ্যে যোগাযোগ স্থাপন করে।

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

4. বাফার এবং ডেটা সংরক্ষণ

গ্রাফিক্সের জন্য ডেটা (যেমন পয়েন্ট, লাইনের কোঅর্ডিনেট) বাফার (Buffer) এ সংরক্ষণ করা হয়। ওয়েবজিএল বাফারে ডেটা আপলোড করে এবং সেগুলো শেডারের মধ্যে পাঠানো হয়।

var vertices = new Float32Array([
  0.0,  1.0,  0.0,  // Vertex 1
 -1.0, -1.0,  0.0,  // Vertex 2
  1.0, -1.0,  0.0   // Vertex 3
]);

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

5. ড্র করার জন্য ডাটা পাঠানো

ড্রিং (Drawing) কৌশলটি ওয়েবজিএল প্রোগ্রামটি চালু করার পর শুরু হয়, যেখানে বাফারে সংরক্ষিত ডেটা শেডারকে পাঠানো হয় এবং এটি গ্রাফিক্স রেন্ডার করে।

gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear color (black)
gl.clear(gl.COLOR_BUFFER_BIT);  // Clear canvas

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
var positionAttribLocation = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(positionAttribLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttribLocation);

gl.drawArrays(gl.TRIANGLES, 0, 3);  // Draw triangle

6. রেন্ডারিং আউটপুট

একবার সব কিছু ঠিকভাবে সেট হয়ে গেলে, ওয়েবজিএল গ্রাফিক্স ক্যানভাসে রেন্ডার হয়ে দেখানো হয়। এটি টেক্সচার, লাইটিং, রিফ্লেকশন ইত্যাদির মাধ্যমে গ্রাফিক্সকে আরও উন্নত এবং বাস্তবসম্মত করে তোলে।

ওয়েবজিএল এর কাজের পদ্ধতি মূলত গ্রাফিক্স তৈরি এবং রেন্ডার করার জন্য একাধিক ধাপের সমন্বয়। এটি ব্রাউজারের মধ্যে দ্রুত, ইন্টারঅ্যাকটিভ 2D ও 3D গ্রাফিক্স তৈরি করতে সহায়তা করে।