ইফেক্টস এর জন্য কাস্টম শেডার তৈরি করা

কাস্টম শেডার কি?

ওয়েবজিএল (WebGL) ডেভেলপমেন্টে কাস্টম শেডার (Custom Shaders) তৈরি করা হয় বিশেষ ধরনের গ্রাফিক্যাল ইফেক্টস যেমন ৩ডি মডেল বা অবজেক্টের উপর আলোর প্রভাব, টেক্সচার রেন্ডারিং, অথবা বিভিন্ন ধরনের ভিজ্যুয়াল ইফেক্ট তৈরি করতে। শেডারগুলো মূলত ভেরটেক্স শেডার (Vertex Shader) এবং ফ্র্যাগমেন্ট শেডার (Fragment Shader) রূপে তৈরি করা হয়, যা গেমস, সিমুলেশন, বা ওয়েব অ্যাপ্লিকেশনগুলির গ্রাফিক্স রেন্ডারিংয়ের জন্য ব্যবহৃত হয়।

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

কাস্টম শেডার তৈরির প্রক্রিয়া

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

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

ভেরটেক্স শেডার উদাহরণ:

attribute vec3 aPosition;   // পজিশন অ্যাট্রিবিউট
attribute vec4 aColor;      // কালার অ্যাট্রিবিউট

uniform mat4 uModelViewMatrix; // মডেল ভিউ ম্যাট্রিক্স
uniform mat4 uProjectionMatrix; // প্রজেকশন ম্যাট্রিক্স

varying vec4 vColor; // ফ্র্যাগমেন্ট শেডারের জন্য কালার পাস করা

void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0); 
    vColor = aColor; // কালার ভেরিয়েবল পাস করা হচ্ছে
}

ফ্র্যাগমেন্ট শেডার উদাহরণ:

precision mediump float;

varying vec4 vColor;  // ভেরটেক্স শেডার থেকে কালার পাস করা

void main() {
    gl_FragColor = vColor;  // কালার রেন্ডার করা হচ্ছে
}

২. শেডার কোড কম্পাইল এবং লিঙ্ক করা

শেডার কোড কম্পাইল এবং লিঙ্ক করার জন্য ওয়েবজিএল API ব্যবহার করতে হবে। এখানে gl.createShader, gl.shaderSource, gl.compileShader, এবং gl.getShaderParameter ইত্যাদি ফাংশন ব্যবহার করা হয়।

শেডার কম্পাইল উদাহরণ:

// ভেরটেক্স শেডার কম্পাইল করা
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderCode);
gl.compileShader(vertexShader);

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
    console.log("Error compiling vertex shader: " + gl.getShaderInfoLog(vertexShader));
}

// ফ্র্যাগমেন্ট শেডার কম্পাইল করা
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderCode);
gl.compileShader(fragmentShader);

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
    console.log("Error compiling fragment shader: " + gl.getShaderInfoLog(fragmentShader));
}

৩. শেডার প্রোগ্রাম লিঙ্ক করা

কোনো শেডার প্রোগ্রাম চালানোর জন্য, ভেরটেক্স এবং ফ্র্যাগমেন্ট শেডারগুলোকে একটি প্রোগ্রামে লিঙ্ক করতে হবে। এই কাজটি gl.createProgram, gl.attachShader, gl.linkProgram, এবং gl.getProgramParameter ফাংশন দিয়ে করা হয়।

শেডার প্রোগ্রাম লিঙ্ক উদাহরণ:

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

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
    console.log("Error linking shader program: " + gl.getProgramInfoLog(shaderProgram));
}

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

একবার শেডার প্রোগ্রাম লিঙ্ক হয়ে গেলে, আপনি gl.useProgram এর মাধ্যমে সেটি ব্যবহার করতে পারবেন। এরপর, আপনাকে শেডারের ইনপুট এবং ইউনিফর্ম ভেরিয়েবলগুলো সেট করতে হবে।

শেডার প্রোগ্রাম ব্যবহার উদাহরণ:

gl.useProgram(shaderProgram);

// অ্যাট্রিবিউট এবং ইউনিফর্মের অবস্থান
var positionLocation = gl.getAttribLocation(shaderProgram, "aPosition");
var colorLocation = gl.getAttribLocation(shaderProgram, "aColor");

// ইউনিফর্ম ভেরিয়েবল সেট করা
var modelViewMatrixLocation = gl.getUniformLocation(shaderProgram, "uModelViewMatrix");
var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "uProjectionMatrix");

৫. গ্রাফিক্স রেন্ডারিং

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

রেন্ডারিং উদাহরণ:

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // স্ক্রিন ক্লিয়ার করা

// ডাটা ব্যবহার করে রেন্ডারিং
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);

কাস্টম শেডার ব্যবহার করে বিভিন্ন ইফেক্টস

কাস্টম শেডার ব্যবহারের মাধ্যমে আপনি বিভিন্ন ধরণের গ্রাফিক্স ইফেক্টস তৈরি করতে পারেন, যেমন:

1. রিফ্লেকশন (Reflection): ৩ডি অবজেক্টের উপর রিফ্লেকশন ইফেক্ট তৈরি করা।
2. শেডিং ইফেক্টস: আলোর প্রভাব বা নরমাল ম্যাপিং (Normal Mapping) ইফেক্ট যোগ করা।
3. টেক্সচার ইফেক্টস: বিভিন্ন ধরনের টেক্সচার যেমন বাম্প ম্যাপিং (Bump Mapping) বা ডিজিটাল পেইন্টিং ইফেক্ট তৈরি করা।

উপসংহার

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