ফ্রেমওয়ার্কে লাইটিং ইফেক্টস যোগ করা

ওয়েবজিএল এ লাইটিং ইফেক্টস কীভাবে কাজ করে?

ওয়েবজিএল (WebGL) এ লাইটিং ইফেক্টস মূলত ৩টি প্রধান অংশে বিভক্ত থাকে:

• লাইট সোর্স (Light Source): এটি একটি নির্দিষ্ট জায়গা থেকে আলো বের করে যা ৩ডি অবজেক্টের উপর পড়বে।
• নরমাল ভেক্টর (Normal Vector): এটি পৃষ্ঠের গঠন এবং তার প্রতিফলন (Reflection) নির্ধারণ করে।
• শেডিং (Shading): এটি রেন্ডারিংয়ের সময় আলো কিভাবে পৃষ্ঠে পড়বে এবং তাতে কিভাবে চেহারা পরিবর্তন হবে তা নির্ধারণ করে।

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

ওয়েবজিএল এ লাইটিং ইফেক্টস যোগ করার জন্য প্রয়োজনীয় উপাদান

ওয়েবজিএল এ লাইটিং ইফেক্টস যুক্ত করতে, নিচের উপাদানগুলির প্রয়োজন হবে:

1. লাইট পজিশন (Light Position): লাইট কোথা থেকে আসছে তা নির্ধারণ করতে হবে।
2. পৃষ্ঠের নরমাল (Surface Normal): প্রতিটি পৃষ্ঠের জন্য নরমাল ভেক্টর তৈরি করতে হবে, যা আলো এবং পৃষ্ঠের মধ্যে কোণ নির্ধারণ করবে।
3. এম্বিয়েন্ট লাইট (Ambient Light): এটি সেই আলো যা সব জায়গায় সমানভাবে পড়ে এবং প্রতিফলিত হয়।
4. ডিফিউস লাইট (Diffuse Light): এটি সোজাসুজি লাইট, যা পৃষ্ঠে সমানভাবে ছড়ায়।
5. স্পেকুলার লাইট (Specular Light): এটি একটি রিফ্লেক্টিভ (Reflective) আলো যা পৃষ্ঠের উপর চকচকে বা উজ্জ্বল দাগ তৈরি করে।

ওয়েবজিএল এ লাইটিং ইফেক্টস যুক্ত করার প্রক্রিয়া

১. লাইটিং প্যারামিটার সেটআপ

প্রথমে লাইটের প্যারামিটারগুলো যেমন লাইট পজিশন, কালার, শক্তি ইত্যাদি শেডারে পাঠাতে হবে। উদাহরণস্বরূপ:

var lightPosition = [1.0, 1.0, 1.0]; // লাইটের পজিশন
var lightColor = [1.0, 1.0, 1.0]; // আলো রঙ (সাদা)

২. লাইটিং শেডার কোড

শেডারে লাইটিং ইফেক্টস যোগ করার জন্য, আমরা সাধারণত নিম্নলিখিত অপারেশনগুলি ব্যবহার করি:

• এম্বিয়েন্ট লাইট: এটি পৃষ্ঠের প্রতিটি অংশে একসাথে সমানভাবে প্রভাব ফেলে।
• ডিফিউস লাইট: এটি পৃষ্ঠের উপর আলো প্রবাহিত হয়, যা কোণ এবং দূরত্ব অনুযায়ী পরিবর্তিত হয়।
• স্পেকুলার লাইট: এটি আলো প্রতিফলিত হওয়ার পর তীব্র উজ্জ্বলতা তৈরি করে, যেটি পৃষ্ঠের আঠালো বা চকচকে অংশে বেশি দেখা যায়।

শেডার কোড উদাহরণ:

// Vertex Shader

attribute vec3 aPosition;
attribute vec3 aNormal;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
uniform vec3 uLightPosition; // ইউনিফর্ম লাইট পজিশন

varying vec3 vNormal;
varying vec3 vLightDirection;

void main() {
    gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
    vNormal = normalize(mat3(uModelViewMatrix) * aNormal); // নরমাল ভেক্টর
    vLightDirection = normalize(uLightPosition - aPosition); // আলো এবং পজিশনের মধ্যে দিক
}

// Fragment Shader

precision mediump float;

uniform vec3 uLightColor; // লাইটের রঙ
uniform vec3 uAmbientLight; // এম্বিয়েন্ট লাইট

varying vec3 vNormal;
varying vec3 vLightDirection;

void main() {
    // নরমাল এবং আলো ডিরেকশনের সাথে ডট প্রোডাক্ট
    float diffuse = max(dot(vNormal, vLightDirection), 0.0);

    // এম্বিয়েন্ট লাইটের প্রভাব
    vec3 ambient = uAmbientLight;

    // আলো এবং পৃষ্ঠের প্রতিক্রিয়া
    vec3 diffuseColor = uLightColor * diffuse;

    // ফলস্বরূপ রঙ
    gl_FragColor = vec4(ambient + diffuseColor, 1.0);
}

এই কোডে:

• Vertex Shader: প্রতিটি পয়েন্টের জন্য লাইটের পজিশন এবং নরমাল ভেক্টর রেকর্ড করা হচ্ছে।
• Fragment Shader: আলো এবং নরমাল ভেক্টরের মধ্যে ডট প্রোডাক্টের মাধ্যমে ডিফিউস লাইট এবং এম্বিয়েন্ট লাইটের প্রভাব তৈরি হচ্ছে।

৩. লাইটিং ইফেক্টস রেন্ডারিং

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

// ওয়েবজিএল প্রোগ্রাম কম্পাইল এবং লাইটিং প্রোপার্টি সেট করা
gl.useProgram(program);
gl.uniform3fv(gl.getUniformLocation(program, "uLightPosition"), lightPosition);
gl.uniform3fv(gl.getUniformLocation(program, "uLightColor"), lightColor);
gl.uniform3fv(gl.getUniformLocation(program, "uAmbientLight"), [0.2, 0.2, 0.2]); // এম্বিয়েন্ট লাইট

এখানে, uLightPosition, uLightColor, এবং uAmbientLight সহ অন্যান্য প্যারামিটার শেডারে পাঠানো হচ্ছে।

ওয়েবজিএল এ লাইটিং ইফেক্টস ব্যবহারের সুবিধা

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

এইভাবে, ওয়েবজিএল ফ্রেমওয়ার্কে লাইটিং ইফেক্টস যোগ করে ৩ডি দৃশ্য বা গেমের ভিজ্যুয়াল অঙ্গগুলি বাস্তবসম্মত ও আকর্ষণীয় করা যায়।