শেডার প্রোগ্রাম লেখা

শেডার কি?

শেডার (Shader) হলো একটি প্রোগ্রাম যা গ্রাফিক্স রেন্ডারিংয়ের সময় GPU তে চলতে থাকে এবং ৩ডি বা ২ডি গ্রাফিক্সের দৃশ্য তৈরির জন্য প্রয়োজনীয় গাণিতিক কাজগুলো সম্পন্ন করে। ওয়েবজিএল (WebGL) ব্যবহার করার সময়, শেডার প্রোগ্রাম দুটি প্রধান ধরনের হয়ে থাকে:

• Vertex Shader: এটি ৩ডি মডেল বা ২ডি ক্যানভাসের পয়েন্টগুলোর (vertices) পজিশন, রঙ, টেক্সচার কোঅর্ডিনেট, ইত্যাদি হিসাব করে।
• Fragment Shader: এটি প্রতি পিক্সেলের রঙ এবং অন্যান্য প্রপার্টিজ হিসাব করে, যেমন আলোর প্রতিফলন, ছায়া এবং অন্যান্য গ্রাফিক্যাল এফেক্ট।

শেডার প্রোগ্রাম লেখার ধাপসমূহ

ওয়েবজিএল এ শেডার প্রোগ্রাম লিখতে কিছু নির্দিষ্ট ধাপ অনুসরণ করতে হয়:

১. শেডার কোড তৈরি করা

প্রথমে, Vertex এবং Fragment শেডারের কোড তৈরি করতে হবে। এই কোড সাধারণত GLSL (OpenGL Shading Language) ভাষায় লেখা হয়।

• Vertex Shader Example:

const vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
`;

এই কোডে, a_position হলো পয়েন্টের অবস্থান যা ৩ডি স্পেসে ডিফাইন করা থাকে এবং এটি gl_Position এ মান প্রদান করে, যা গ্লোবাল শেডার স্ট্যাটাসে পয়েন্টের অবস্থান জানায়।

• Fragment Shader Example:

const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red Color
    }
`;

এখানে, gl_FragColor হলো ফ্র্যাগমেন্ট (পিক্সেল) এর রঙ নির্ধারণকারী একটি বিল্ট-ইন ভেরিয়েবল। এই কোডে, পিক্সেলটি লাল রঙে রেন্ডার হবে।

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

এখন, ওয়েবজিএল API ব্যবহার করে শেডার কোডটি কম্পাইল করতে হবে। প্রথমে, WebGL context থেকে শেডার তৈরি এবং কম্পাইল করতে হবে:

function compileShader(gl, shaderSource, shaderType) {
    const shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compilation failed:", gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

const vertexShader = compileShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);

এখানে gl.createShader() এবং gl.shaderSource() ফাংশনগুলো শেডার তৈরি এবং তার কোড সাপ্লাই করে, পরে gl.compileShader() ফাংশন দিয়ে কোড কম্পাইল করা হয়।

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

শেডার কম্পাইল করার পর, এগুলোকে একটি প্রোগ্রামে যুক্ত করতে হবে:

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

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error("Program linking failed:", gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
        return null;
    }
    return program;
}

const shaderProgram = createShaderProgram(gl, vertexShader, fragmentShader);

এখানে gl.createProgram() দিয়ে একটি নতুন প্রোগ্রাম তৈরি করা হয় এবং gl.attachShader() দিয়ে শেডারগুলো প্রোগ্রামে যোগ করা হয়। পরিশেষে, gl.linkProgram() দিয়ে প্রোগ্রাম লিংক করা হয়।

৪. শেডার প্রোগ্রাম ব্যবহার করা

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

gl.useProgram(shaderProgram);

এটি প্রোগ্রামটি বর্তমান শেডার প্রোগ্রাম হিসেবে সেট করে।

শেডার প্রোগ্রামের ব্যবহার

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

শেডার প্রোগ্রাম লেখা কিছুটা জটিল হতে পারে, কিন্তু ওয়েবজিএল-এ শক্তিশালী গ্রাফিক্স তৈরি করতে এটি অপরিহার্য।

GLSL কি?

GLSL (OpenGL Shading Language) হল একটি প্রোগ্রামিং ভাষা যা OpenGL (এবং WebGL) এর শেডার লেখার জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের গ্রাফিক্স রেন্ডারিং শেডারগুলি তৈরি করতে সহায়তা করে, যেমন Vertex Shader এবং Fragment Shader। ওয়েবজিএল-এর মধ্যে GLSL ব্যবহার করে ডেভেলপাররা 3D গ্রাফিক্সের বিভিন্ন ভিজ্যুয়াল ইফেক্ট তৈরি করতে পারেন, যেমন আলো, ছায়া, টেক্সচারিং, এবং পেইন্টিং।

GLSL-এর সিনট্যাক্স C ভাষার (C Language) মতো হলেও এতে কিছু বিশেষ বৈশিষ্ট্য রয়েছে, যা গ্রাফিক্স রেন্ডারিংয়ের জন্য প্রয়োজনীয়। ওয়েবজিএল-এর GLSL কোড প্রধানত শেডারে লেখা হয়, যা ব্রাউজারে GPU দ্বারা কার্যকরী হয়।

GLSL এর বেসিক সিনট্যাক্স

GLSL ভাষার বেসিক সিনট্যাক্স কিছু সাধারণ ধারণা এবং নিয়ম অনুসরণ করে। নিচে GLSL-এর কিছু মূল উপাদান এবং সিনট্যাক্স দেওয়া হলো:

১. ডেটা টাইপস (Data Types)

GLSL বেশ কিছু প্রাথমিক ডেটা টাইপ সমর্থন করে। এগুলির মধ্যে রয়েছে:

• int: পূর্ণসংখ্যা
• float: দশমিক সংখ্যা
• bool: বুলিয়ান মান (true/false)
• vec2, vec3, vec4: ২, ৩, এবং ৪ উপাদানের ভেক্টর (যেমন, পয়েন্ট, রং)
• mat2, mat3, mat4: ম্যাট্রিক্স
• sampler2D: ২D টেক্সচার

২. ভেরিয়েবল ডিক্লেয়ারেশন (Variable Declaration)

GLSL-এ ভেরিয়েবল ডিক্লেয়ার করতে হয় ডেটা টাইপ এবং নাম দিয়ে। উদাহরণস্বরূপ:

float myVariable;    // float টাইপের ভেরিয়েবল
vec3 myVector;       // ৩ উপাদানের ভেক্টর

৩. ফাংশন (Functions)

GLSL-এ কোডিংয়ের জন্য আপনি ফাংশন ব্যবহার করতে পারেন। একটি ফাংশন ডিফাইন করার সময়, তার রিটার্ন টাইপ, নাম এবং আর্গুমেন্ট দেওয়া হয়। উদাহরণস্বরূপ:

float addNumbers(float a, float b) {
    return a + b;
}

৪. শেডার প্রোগ্রাম (Shader Program)

GLSL-এ Vertex Shader এবং Fragment Shader দুটি প্রধান শেডার প্রোগ্রাম থাকে। প্রতিটি শেডারে আলাদা আলাদা ফাংশন ব্যবহার করা হয়। Vertex Shader সাধারণত ভেক্টর এবং পজিশন সংক্রান্ত হিসাব করে, আর Fragment Shader পিক্সেল বা ফ্র্যাগমেন্টের রঙ নির্ধারণ করে।

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;  // ফ্র্যাগমেন্টের রঙ অ্যাসাইন করা
}

৫. কন্ট্রোল স্টেটমেন্টস (Control Statements)

GLSL-এ সাধারণ কন্ট্রোল স্টেটমেন্ট যেমন if, for, while ইত্যাদি ব্যবহার করা যায়। উদাহরণস্বরূপ:

if (x > 0.5) {
    result = 1.0;
} else {
    result = 0.0;
}

৬. বিল্ট-ইন ভেরিয়েবলস (Built-in Variables)

GLSL-এ কিছু বিল্ট-ইন ভেরিয়েবল রয়েছে, যেমন:

• gl_Position: Vertex Shader-এ পজিশন সেট করার জন্য ব্যবহৃত
• gl_FragColor: Fragment Shader-এ রঙ অ্যাসাইন করার জন্য ব্যবহৃত
• gl_PointSize: পয়েন্টের আকার নির্ধারণ করে

GLSL শেডার ব্যবহারের সাধারণ উদাহরণ

GLSL শেডার সাধারণত ওয়েবজিএল প্রোগ্রামের অংশ হিসেবে ব্যবহার করা হয়। নিচে একটি সাধারণ ওয়েবজিএল কোডের উদাহরণ দেওয়া হলো যা GLSL শেডারকে ব্যবহার করে:

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;
    }
`;

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

এখানে createShader ফাংশন একটি GLSL শেডার তৈরি করে এবং WebGL প্রোগ্রামে ব্যবহার করতে প্রস্তুত করে।

GLSL এর বেসিক সিনট্যাক্স এবং ধারণাগুলি ওয়েবজিএল-এর জন্য অত্যন্ত গুরুত্বপূর্ণ, কারণ শেডারগুলি সঠিকভাবে ব্যবহার করতে না পারলে 3D গ্রাফিক্সের রেন্ডারিংয়ে সমস্যা হতে পারে। এর মাধ্যমে ডেভেলপাররা WebGL অ্যাপ্লিকেশন তৈরি করতে পারবেন যা ইন্টারঅ্যাকটিভ এবং ভিজ্যুয়ালি রিচ হবে।

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 একত্রিত হয়ে পুরো গ্রাফিক্স রেন্ডারিং প্রক্রিয়াকে সম্পন্ন করে।

ফ্র্যাগমেন্ট শেডার (Fragment Shader) কি?

ফ্র্যাগমেন্ট শেডার হল ওয়েবজিএল এবং OpenGL ES-এর একটি গুরুত্বপূর্ণ অংশ যা গ্রাফিক্স রেন্ডারিং পিপলাইনে ব্যবহৃত হয়। এটি একটি প্রোগ্রাম যা প্রতিটি পিক্সেল বা "ফ্র্যাগমেন্ট" এর জন্য রঙ বা অন্যান্য বৈশিষ্ট্য নির্ধারণ করে। সাধারণভাবে, ফ্র্যাগমেন্ট শেডার পিক্সেল পর্যায়ে গ্রাফিক্সের রেন্ডারিং চালায়, যেমন একটি 3D মডেল বা সিমুলেশন দৃশ্যে রঙ বা টেক্সচার অ্যাপ্লাই করা।

ফ্র্যাগমেন্ট শেডার সাধারণত GPU (Graphics Processing Unit)-এ রান হয় এবং এটি উচ্চ পারফরম্যান্স গ্রাফিক্স তৈরিতে সাহায্য করে।

ফ্র্যাগমেন্ট শেডার তৈরির প্রাথমিক ধারণা

ফ্র্যাগমেন্ট শেডার একটি GLSL (OpenGL Shading Language)-এ লেখা প্রোগ্রাম, যা GPU-তে প্রতিটি পিক্সেল বা ফ্র্যাগমেন্টের জন্য কল করা হয়। এটি সাধারণত রঙ, টেক্সচার, আলোর ইফেক্ট, এবং অন্যান্য গ্রাফিক্যাল বৈশিষ্ট্য নির্ধারণ করে।

একটি সাধারণ ফ্র্যাগমেন্ট শেডারের কোড এই রকম হতে পারে:

precision mediump float;

uniform vec4 u_color;  // রঙের ইউনিফর্ম ভেরিয়েবল

void main() {
    gl_FragColor = u_color;  // প্রতিটি পিক্সেলের জন্য রঙ নির্ধারণ
}

এই শেডারটি একটি রঙের ইউনিফর্ম ভেরিয়েবল গ্রহণ করে এবং সেটিকে প্রতিটি পিক্সেলের রঙ হিসেবে সেট করে দেয়।

ফ্র্যাগমেন্ট শেডার তৈরি করার ধাপসমূহ

ফ্র্যাগমেন্ট শেডার তৈরি করার জন্য কয়েকটি ধাপ অনুসরণ করতে হয়:

1. শেডার কোড লেখার জন্য GLSL ভাষা ব্যবহার

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

2. ওয়েবজিএল শেডার প্রোগ্রাম কম্পাইল ও লিঙ্ক করা

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

3. শেডার প্রোগ্রামে ইনপুট প্যারামিটার পাস করা

শেডার প্রোগ্রামে বিভিন্ন ইনপুট প্যারামিটার (যেমন রঙ, টেক্সচার, আলোর উৎস) পাস করা হয় যাতে শেডারটি সেই তথ্য ব্যবহার করে যথাযথ গ্রাফিক্স রেন্ডার করতে পারে।

4. রেন্ডারিং পর্বে শেডার ব্যবহার করা

একবার শেডার প্রোগ্রামটি তৈরি এবং ইনিশিয়ালাইজ করা হলে, এটি ওয়েবজিএল কনটেক্সটের মাধ্যমে গ্রাফিক্স রেন্ডারিং এ ব্যবহৃত হয়। শেডার প্রোগ্রামটি GPU-তে রান হয় এবং নির্দিষ্ট গ্রাফিক্সের জন্য সঠিক রঙ বা ইফেক্ট প্রদান করে।

ওয়েবজিএল-এ ফ্র্যাগমেন্ট শেডার ব্যবহার করা

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

1. শেডার কোড তৈরি

প্রথমেই, একটি ফ্র্যাগমেন্ট শেডার কোড তৈরি করতে হবে, যেমন:

precision mediump float;
uniform vec4 u_color;  // রঙের ইউনিফর্ম ভেরিয়েবল
void main() {
    gl_FragColor = u_color;  // প্রতিটি পিক্সেলের জন্য রঙ নির্ধারণ
}

2. ওয়েবজিএল শেডার প্রোগ্রাম কম্পাইল করা

এখন এই শেডার কোডকে ওয়েবজিএল কনটেক্সটে কম্পাইল এবং লিঙ্ক করতে হবে। এর জন্য ওয়েবজিএল এ createShader(), shaderSource(), compileShader() এবং linkProgram() ফাংশনগুলো ব্যবহার করা হয়।

const fragmentShaderSource = `
precision mediump float;
uniform vec4 u_color;
void main() {
    gl_FragColor = u_color;
}`;
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

3. শেডার প্রোগ্রামে ইনপুট প্যারামিটার পাস করা

শেডার প্রোগ্রামে ইনপুট প্যারামিটার পাস করার জন্য uniform ভেরিয়েবল ব্যবহার করা হয়, যেমন রঙের জন্য:

const uColorLocation = gl.getUniformLocation(program, "u_color");
gl.uniform4f(uColorLocation, 1.0, 0.0, 0.0, 1.0);  // রঙ লাল হবে

4. শেডার প্রোগ্রাম রেন্ডারিংয়ে ব্যবহার করা

একবার শেডার প্রোগ্রাম সেটআপ হয়ে গেলে, এটি গ্রাফিক্স রেন্ডারিং এ ব্যবহার করা হয়। ওয়েবজিএল এ useProgram() ফাংশন ব্যবহার করে শেডার প্রোগ্রামটি সক্রিয় করা হয়:

gl.useProgram(program);

সারাংশ

ফ্র্যাগমেন্ট শেডার ওয়েবজিএল (WebGL)-এ একটি গুরুত্বপূর্ণ উপাদান, যা পিক্সেল স্তরে গ্রাফিক্স রেন্ডারিং নিয়ন্ত্রণ করে। এটি গ্রাফিক্সের রঙ, টেক্সচার, এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। ওয়েবজিএল এ ফ্র্যাগমেন্ট শেডার তৈরি ও ব্যবহার করতে হলে GLSL কোড লিখতে হয়, যা শেডারের কার্যকারিতা নিশ্চিত করে এবং পরবর্তী পর্যায়ে এটি গ্রাফিক্স রেন্ডারিং এর অংশ হিসেবে ব্যবহার করা হয়।

ওয়েবজিএল (WebGL) একটি গ্রাফিক্স API যা GPU (Graphics Processing Unit) এর মাধ্যমে ২D এবং ৩D গ্রাফিক্স রেন্ডার করতে ব্যবহৃত হয়। ওয়েবজিএল এ গ্রাফিক্স রেন্ডারিং করার জন্য, শেডার প্রোগ্রাম তৈরি করতে হয় যা বিশেষ ধরনের প্রোগ্রাম যা গ্রাফিক্স রেন্ডারিংয়ের সময় নির্দিষ্ট অপারেশন সম্পন্ন করে। এই প্রোগ্রাম দুটি প্রধান অংশে বিভক্ত: Vertex Shader এবং Fragment Shader। শেডার প্রোগ্রামগুলোকে সঠিকভাবে কম্পাইল (compile) এবং লিঙ্ক (link) করা ওয়েবজিএল ডেভেলপমেন্টের গুরুত্বপূর্ণ অংশ।

শেডার প্রোগ্রাম কি?

শেডার প্রোগ্রাম হলো ছোট জাভাস্ক্রিপ্ট কোড যা GPU-তে রান করে এবং গ্রাফিক্স প্রক্রিয়াকরণের জন্য ব্যবহার করা হয়। শেডার দুটি ধরণের হয়ে থাকে:

• Vertex Shader: এটি প্রতিটি ভেরটেক্স (vertex) এর জন্য কার্যকর হয়, যেমন আউটপুট অবস্থান, রঙ, টেক্সচার কোঅর্ডিনেট ইত্যাদি।
• Fragment Shader: এটি পিক্সেল লেভেলে কাজ করে এবং প্রতিটি ফ্র্যাগমেন্টের জন্য রঙ বা অন্যান্য গুণাবলী নির্ধারণ করে।

এই শেডার প্রোগ্রামগুলোকে ওয়েবজিএল এ কম্পাইল এবং লিঙ্ক করার মাধ্যমে কার্যকরী গ্রাফিক্স রেন্ডারিং করা হয়।

শেডার প্রোগ্রাম কম্পাইল ও লিঙ্ক করার ধাপ

১. শেডার সোর্স কোড লেখা

প্রথমে, আপনাকে শেডারের সোর্স কোড লিখতে হবে। ওয়েবজিএল শেডার কোড GLSL (OpenGL Shading Language) ভাষায় লেখা হয়। উদাহরণস্বরূপ:

• Vertex Shader:

  attribute vec4 a_position;
  void main() {
      gl_Position = a_position;
  }
  

• Fragment Shader:

  precision mediump float;
  void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Red color
  }
  

২. শেডার কম্পাইল করা

একবার শেডারের সোর্স কোড লেখা হয়ে গেলে, পরবর্তী ধাপে এই কোডগুলো কম্পাইল করা হয়। ওয়েবজিএল API ব্যবহার করে শেডার কম্পাইল করার জন্য gl.createShader() এবং gl.shaderSource() ফাংশন ব্যবহার করতে হয়।

প্রথমে, ওয়েবজিএল এ একটি শেডার তৈরি করতে হয়:

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

তারপর, শেডার সোর্স কোড যুক্ত করতে হয়:

gl.shaderSource(vertexShader, vertexShaderSource);
gl.shaderSource(fragmentShader, fragmentShaderSource);

এরপর, শেডারগুলিকে কম্পাইল করতে হয়:

gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

৩. কম্পাইলের পর চেক করা

কম্পাইলেশন সফল হয়েছে কিনা তা চেক করতে হয়:

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

৪. শেডার প্রোগ্রাম তৈরি ও লিঙ্ক করা

শেডার কম্পাইল করার পর, পরবর্তী ধাপে এগুলোকে একসাথে লিঙ্ক করতে হবে। ওয়েবজিএল এ gl.createProgram() ফাংশন ব্যবহার করে একটি শেডার প্রোগ্রাম তৈরি করা হয় এবং gl.attachShader() এর মাধ্যমে শেডারগুলোকে প্রোগ্রামে যোগ করা হয়।

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);

তারপর, শেডার প্রোগ্রামটি লিঙ্ক করতে হয়:

gl.linkProgram(shaderProgram);

৫. লিঙ্কের পর চেক করা

লিঙ্কিং সফল হয়েছে কিনা তা চেক করতে হয়:

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    console.error("Shader Program Error: " + gl.getProgramInfoLog(shaderProgram));
}

৬. প্রোগ্রাম ব্যবহার করা

একবার শেডার প্রোগ্রামটি সফলভাবে কম্পাইল এবং লিঙ্ক হয়ে গেলে, এটি রেন্ডারিং প্রসেসে ব্যবহার করতে পারেন:

gl.useProgram(shaderProgram);

সারাংশ

শেডার প্রোগ্রাম কম্পাইল এবং লিঙ্ক করা ওয়েবজিএল ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ প্রক্রিয়া, যা গ্রাফিক্স রেন্ডারিংয়ের জন্য প্রাথমিক অবস্থায় শেডার কোডকে কার্যকরী করে তোলে। এই প্রক্রিয়ার মাধ্যমে Vertex Shader এবং Fragment Shader একসাথে কাজ করে, যাতে জটিল গ্রাফিক্স তৈরি করা সম্ভব হয়। শেডার প্রোগ্রাম কম্পাইল করার পর তাদেরকে সঠিকভাবে লিঙ্ক করা এবং প্রোগ্রাম হিসেবে ব্যবহারের জন্য প্রস্তুত করা প্রয়োজন।