Vertex Shader তৈরি এবং ব্যবহার

Vertex Shader কি?

Vertex Shader হলো ওয়েবজিএল (WebGL)-এ ব্যবহৃত একটি গ্রাফিক্স শেডার, যা 3D গ্রাফিক্সের পয়েন্টগুলির (vertices) অবস্থান এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করে। এটি গ্রাফিক্স রেন্ডারিংয়ের প্রথম স্তর এবং প্রতিটি পয়েন্ট বা ভেক্টরের স্থান, রঙ বা অন্যান্য তথ্য সংশোধন ও স্থানান্তর করতে সাহায্য করে। Vertex Shader সাধারণত গ্রাফিক্সের geometrical structure বা আকার তৈরি করতে ব্যবহৃত হয়, যেমন পলিগন, লাইন, বা পয়েন্ট।

Vertex Shader তৈরি

ওয়েবজিএল-এ Vertex Shader তৈরি করার জন্য আপনাকে একটি শেডার প্রোগ্রাম তৈরি করতে হবে, যা জাভাস্ক্রিপ্টের মাধ্যমে ওয়েবজিএল কনটেক্সটের সাথে সংযুক্ত হবে। Vertex Shader তৈরি করার জন্য প্রথমে একটি GLSL (OpenGL Shading Language) কোড লিখতে হবে।

1. Vertex Shader কোড উদাহরণ

এখানে একটি সাধারণ Vertex Shader কোড দেওয়া হলো, যা পয়েন্টগুলির অবস্থান এবং রঙ নির্ধারণ করে:

var vertexShaderSource = `
  attribute vec4 a_position;  // পয়েন্টের স্থান
  attribute vec4 a_color;     // পয়েন্টের রঙ
  varying vec4 v_color;       // ভেরিয়েবল যা ফ্র্যাগমেন্ট শেডারে পাঠানো হবে

  void main() {
    gl_Position = a_position;  // পজিশন আপডেট করা
    v_color = a_color;         // রঙ আপডেট করা
  }
`;

এখানে:

• a_position: এটি ভেরিয়েবল যা পয়েন্টের ৩D স্থান (x, y, z, w) ধারণ করে।
• a_color: এটি পয়েন্টের রঙ ধারণ করে।
• v_color: এটি ভেরিয়েবল যা ফ্র্যাগমেন্ট শেডারে রঙ পাঠানোর জন্য ব্যবহৃত হয়।

2. Vertex Shader কম্পাইল করা

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

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

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
  console.error("Vertex Shader Error: " + gl.getShaderInfoLog(vertexShader));
}

Vertex Shader ব্যবহার

Vertex Shader ব্যবহার করার জন্য আপনাকে এটি একটি ওয়েবজিএল প্রোগ্রামে অন্তর্ভুক্ত করতে হবে। এখানে আপনার Vertex Shader এবং Fragment Shader একত্রিত করে একটি প্রোগ্রাম তৈরি করতে হবে।

1. Vertex Shader এবং Fragment Shader প্রোগ্রামে সংযুক্ত করা

var fragmentShaderSource = `
  precision mediump float;
  varying vec4 v_color;

  void main() {
    gl_FragColor = v_color;  // ফ্র্যাগমেন্ট শেডারে রঙ প্রয়োগ করা
  }
`;

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

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
  console.error("Fragment Shader Error: " + gl.getShaderInfoLog(fragmentShader));
}

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

2. ডেটা বাফারে আপলোড করা

এখন আপনাকে গ্রাফিক্সের ডেটা (যেমন পয়েন্টের স্থান এবং রঙ) ওয়েবজিএল বাফারে আপলোড করতে হবে। এটি Vertex Shader-এ পাঠানোর জন্য প্রস্তুত করা হয়।

var vertices = new Float32Array([
  0.0,  0.5,  0.0,   1.0, 0.0, 0.0,  // Vertex 1 (x, y, z, r, g, b)
 -0.5, -0.5,  0.0,   0.0, 1.0, 0.0,  // Vertex 2 (x, y, z, r, g, b)
  0.5, -0.5,  0.0,   0.0, 0.0, 1.0   // Vertex 3 (x, y, z, r, g, b)
]);

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

3. শেডার প্রোগ্রামের সাথে ডেটা সংযুক্ত করা

ওয়েবজিএল শেডারে ডেটা পাঠানোর জন্য আপনাকে attribute এবং uniform টাইপের ভেরিয়েবল ব্যবহার করতে হয়। এখানে a_position এবং a_color এ ডেটা পাঠানো হচ্ছে।

var positionAttribLocation = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(positionAttribLocation, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(positionAttribLocation);

var colorAttribLocation = gl.getAttribLocation(program, "a_color");
gl.vertexAttribPointer(colorAttribLocation, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribArray(colorAttribLocation);

4. ড্রিং অপারেশন

এখন আপনার গ্রাফিক্স রেন্ডার করার জন্য gl.drawArrays ফাংশন ব্যবহার করতে হবে।

gl.clearColor(0.0, 0.0, 0.0, 1.0);  // ক্লিয়ার ব্যাকগ্রাউন্ড (কালো)
gl.clear(gl.COLOR_BUFFER_BIT);  // ক্যানভাস ক্লিয়ার করা

gl.drawArrays(gl.TRIANGLES, 0, 3);  // 3টি পয়েন্ট দিয়ে ত্রিভুজ আঁকা

Vertex Shader এর ভূমিকা

Vertex Shader ওয়েবজিএল-এর একটি গুরুত্বপূর্ণ অংশ, যা গ্রাফিক্সের পয়েন্টগুলির অবস্থান এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করে। এটি সাধারণত 3D গ্রাফিক্সের geometrical shapes তৈরির জন্য ব্যবহৃত হয় এবং ফ্র্যাগমেন্ট শেডারের জন্য ডেটা পাঠানোর দায়িত্ব পালন করে। Vertex Shader এবং Fragment Shader একত্রিত হয়ে পুরো গ্রাফিক্স রেন্ডারিং প্রক্রিয়াকে সম্পন্ন করে।