টেক্সচার লোডিং এবং প্রয়োগ

টেক্সচার কি?

টেক্সচার (Texture) হলো একটি ছবি বা গ্রাফিক্যাল কনটেন্ট যা 3D অবজেক্টের পৃষ্ঠে প্রয়োগ করা হয়। টেক্সচার প্রয়োগ করার মাধ্যমে, 3D মডেল বা ভেক্টরের পৃষ্ঠে আরো বিস্তারিত বা বাস্তবসম্মত দৃশ্য তৈরি করা যায়। ওয়েবজিএল-এর মাধ্যমে টেক্সচার লোড করা ও প্রয়োগ করা হয়, যা ব্রাউজারের মাধ্যমে 3D গ্রাফিক্সে বাস্তবসম্মত চিত্র প্রয়োগ করার জন্য ব্যবহৃত হয়।

টেক্সচার লোডিং এবং প্রয়োগের প্রক্রিয়া

টেক্সচার লোডিং এবং প্রয়োগের জন্য কয়েকটি ধাপ অনুসরণ করতে হয়। নিচে ধাপে ধাপে প্রক্রিয়াটি ব্যাখ্যা করা হলো:

১. টেক্সচার ইমেজ লোড করা

প্রথমে টেক্সচার হিসেবে ব্যবহার করতে চান এমন একটি ইমেজ লোড করতে হবে। ওয়েবজিএল-এর Image অবজেক্ট ব্যবহার করে ইমেজ লোড করা হয়। লোড করার পর ইমেজটিকে টেক্সচার হিসেবে ওয়েবজিএল কন্টেক্সটে ব্যবহার করা যাবে।

var image = new Image();
image.onload = function() {
    // টেক্সচার লোড হওয়ার পর একশন নেওয়া হবে
};
image.src = 'path_to_your_image.jpg';  // ইমেজ ফাইলের পাথ

২. টেক্সচার তৈরি করা

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

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);  // টেক্সচারটি 2D হিসেবে বাঁধা

// টেক্সচার ডাটা লোড করা
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

// টেক্সচার প্রপার্টি সেট করা
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

৩. শেডারে টেক্সচার পাঠানো

একবার টেক্সচার লোড হয়ে গেলে, এটি শেডারের মধ্যে পাঠানো প্রয়োজন। ওয়েবজিএল প্রোগ্রামে টেক্সচার ইউনিফর্ম হিসেবে ব্যবহৃত হয়।

var u_textureLocation = gl.getUniformLocation(program, "u_texture");  // শেডারে টেক্সচারের ইউনিফর্ম লোকেশন

// টেক্সচার ইউনিফর্মে টেক্সচার অ্যাসাইন করা
gl.activeTexture(gl.TEXTURE0);  // টেক্সচার স্লট নির্বাচন
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(u_textureLocation, 0);  // টেক্সচার স্লট 0

৪. টেক্সচার প্রয়োগ করা

একবার টেক্সচার শেডারে অ্যাসাইন হয়ে গেলে, তা 3D অবজেক্টের পৃষ্ঠে প্রয়োগ করা হবে। শেডারে টেক্সচার মাপ এবং টেক্সচার কো-অর্ডিনেটস ব্যবহৃত হয়। শেডারে টেক্সচার ব্যবহার করার জন্য আপনাকে কোর স্লোড, স্যাম্পলার ইত্যাদি ফাংশন ব্যবহার করতে হবে।

// Fragment Shader Example
precision mediump float;
uniform sampler2D u_texture;  // টেক্সচার ইউনিফর্ম
varying vec2 v_texCoord;      // টেক্সচার কো-অর্ডিনেট

void main() {
    gl_FragColor = texture2D(u_texture, v_texCoord);  // টেক্সচার প্রয়োগ
}

টেক্সচার প্রকার

ওয়েবজিএল-এ বিভিন্ন ধরনের টেক্সচার ব্যবহার করা হয়। এর মধ্যে কিছু প্রধান প্রকার হল:

• 2D টেক্সচার: সাধারণত ছবি বা 2D চিত্রের জন্য ব্যবহৃত হয়, যা 3D অবজেক্টের পৃষ্ঠে প্রয়োগ করা হয়।
• Cube Map: বিভিন্ন দিকের 6টি 2D টেক্সচার দিয়ে তৈরি একটি 3D টেক্সচার। এটি সাধারণত আকাশ, জল বা পরিবেশের রিফ্লেকশন (reflection) তৈরিতে ব্যবহৃত হয়।
• Render Target (FBO): বিশেষ ধরনের টেক্সচার, যা আপনি রেন্ডারিংয়ের জন্য তৈরি করেন এবং তা পরবর্তী প্রক্রিয়ার জন্য ব্যবহার করতে পারেন।

টেক্সচার ম্যানিপুলেশন

টেক্সচার ব্যবহারের সময় বিভিন্ন ধরনের প্রক্রিয়া প্রয়োগ করা যেতে পারে, যেমন:

• টেক্সচার রোটেশন: টেক্সচার কো-অর্ডিনেট পরিবর্তন করে টেক্সচার রোটেট করা।
• স্কেলিং এবং ট্রান্সলেশন: টেক্সচার আকার পরিবর্তন বা পজিশন পরিবর্তন করা।
• টেক্সচার মিাপিং (Mipmap): টেক্সচার রেন্ডারিংয়ের জন্য মিাপ (Mipmap) তৈরির মাধ্যমে গতি বৃদ্ধি করা।

টেক্সচার লোডিং এবং প্রয়োগের উদাহরণ

// ১. ইমেজ লোড করা
var image = new Image();
image.onload = function() {
    var texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    
    // ২. শেডারে টেক্সচার পাঠানো
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.uniform1i(u_textureLocation, 0);
    
    // ৩. টেক্সচার প্রয়োগ করা
    // ফ্র্যাগমেন্ট শেডারে টেক্সচার প্রয়োগ হবে
};
image.src = 'path_to_texture_image.jpg';  // ইমেজ পাথ

সারাংশ

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