Vertex এবং Fragment Shaders এর ব্যবহার

Vertex এবং Fragment Shaders এর ভূমিকা

Shaders হল ছোট প্রোগ্রাম যা গ্রাফিক্স কার্ডে (GPU) চালানো হয় এবং 3D গ্রাফিক্সের দৃশ্য তৈরি করতে সাহায্য করে। Vertex Shader এবং Fragment Shader হল দুটি প্রধান ধরণের শেডার যা Three.js সহ গ্রাফিক্স অ্যাপ্লিকেশনে ব্যবহৃত হয়। এগুলি OpenGL বা WebGL এর মতো গ্রাফিক্স API তে ব্যবহৃত হয় এবং জটিল গ্রাফিক্স ইফেক্টস তৈরি করতে সহায়তা করে।

• Vertex Shader: এটি 3D অবজেক্টের পয়েন্ট বা ভেরটেক্সকে স্ক্রিনের মধ্যে সঠিকভাবে অবস্থান নির্ধারণ করতে সাহায্য করে।
• Fragment Shader: এটি একটি পিক্সেলের রং বা অন্যান্য বৈশিষ্ট্য নির্ধারণ করে, যেমন টেক্সচার, শেডিং ইত্যাদি।

Vertex Shader

Vertex Shader হল একটি শেডার যা প্রতিটি ভেরটেক্সের (বিন্দু) জন্য চালানো হয় এবং সাধারণত গ্রাফিক্স কার্ডে পয়েন্টগুলির স্থানান্তর এবং রূপান্তর করার জন্য ব্যবহৃত হয়। এটি 3D ভেক্টরের অবস্থান নির্ধারণ করতে সাহায্য করে এবং 3D জ্যামিতি বা মডেলগুলির রূপান্তরের জন্য প্রয়োজনীয় গণনা পরিচালনা করে।

Vertex Shader এর উদাহরণ:

const vertexShader = `
  uniform float time;
  attribute vec3 position;
  attribute vec3 color;
  
  varying vec3 vColor;

  void main() {
    vColor = color; // Pass the color attribute to the fragment shader
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

এখানে, vertexShader কোডটি time নামক একটি ইউনিফর্ম ব্যবহার করছে যা ভেরটেক্সের অবস্থান এবং আকার পরিবর্তন করতে সাহায্য করে। gl_Position হল ভেরটেক্সের অবস্থান যা গ্রাফিক্স কার্ডে রেন্ডারিং করার জন্য প্রেরিত হয়।

Fragment Shader

Fragment Shader একটি শেডার যা পিক্সেলগুলোর রং নির্ধারণ করে। এটি 3D পিক্সেলের নানান বৈশিষ্ট্য যেমন লাইটিং, টেক্সচার এবং শেডিং নিয়ন্ত্রণ করে। Fragment Shader প্রোগ্রামটি একটি পিক্সেল বা ফ্র্যাগমেন্টে রং এবং অন্যান্য তথ্য পরিবর্তন করতে ব্যবহৃত হয়।

Fragment Shader এর উদাহরণ:

const fragmentShader = `
  varying vec3 vColor;
  
  void main() {
    gl_FragColor = vec4(vColor, 1.0); // Set the final color of the fragment
  }
`;

এখানে, fragmentShader কোডটি vColor ভেরিয়েবল গ্রহণ করে, যা vertex shader থেকে আসা রংয়ের তথ্য ধারণ করে এবং সেই অনুযায়ী পিক্সেলের রং সেট করে।

Three.js এ Shaders ব্যবহারের প্রক্রিয়া

Three.js ব্যবহার করে আপনি নিজের Vertex এবং Fragment Shaders তৈরি করতে পারেন এবং এগুলিকে ShaderMaterial এর মাধ্যমে রেন্ডার করতে পারেন। ShaderMaterial হল একটি কাস্টম মেটেরিয়াল যা আপনার শেডার কোড ব্যবহার করে মডেল রেন্ডার করতে সক্ষম।

Three.js এ Vertex এবং Fragment Shader ব্যবহার করা:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Vertex Shader and Fragment Shader code
const vertexShader = `
  attribute vec3 position;
  attribute vec3 color;
  varying vec3 vColor;
  
  void main() {
    vColor = color;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  varying vec3 vColor;
  
  void main() {
    gl_FragColor = vec4(vColor, 1.0);
  }
`;

// Define Geometry and Material using the shaders
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.ShaderMaterial({
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
  vertexColors: THREE.VertexColors // Enable vertex colors
});

// Create a mesh and add it to the scene
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

camera.position.z = 5;

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

কোড ব্যাখ্যা:

1. Scene, Camera, Renderer: Three.js এ একটি সীন তৈরি করা হয়েছে, যেখানে ক্যামেরা এবং রেন্ডারার নির্ধারণ করা হয়েছে।
2. Vertex Shader: ভেরটেক্সের জন্য একটি শেডার তৈরি করা হয়েছে, যেখানে পজিশন এবং রং প্রক্রিয়া করা হয়।
3. Fragment Shader: পিক্সেলের রং নির্ধারণ করা হচ্ছে, যা vColor থেকে আসা রংয়ের উপর ভিত্তি করে।
4. Geometry and ShaderMaterial: একটি SphereGeometry তৈরি করা হয়েছে এবং শেডার ব্যবহার করে মেটেরিয়াল অ্যাসাইন করা হয়েছে।
5. Rendering: সোজা করে বললে, রেন্ডারিং লুপে মডেলটি প্রদর্শন করা হচ্ছে।

Shaders এর ব্যবহার কিভাবে আরও উন্নত করা যায়?

1. Lighting Effects: আপনি Vertex এবং Fragment Shaders এ লাইটিং ইফেক্টস যোগ করতে পারেন, যেমন Phong shading বা Lambertian shading, যা অবজেক্টের উপর লাইটের প্রভাব উন্নত করতে সাহায্য করে।
2. Textures: টেক্সচার ম্যাপিংয়ের জন্য Fragment Shader এ টেক্সচার লোড করে পিক্সেলগুলির উপর প্রয়োগ করা যেতে পারে।
3. Displacement Mapping: Vertex Shader ব্যবহার করে অবজেক্টের পৃষ্ঠের উচ্চতা পরিবর্তন করা যায়, যা ভূতাত্ত্বিক বা অন্যান্য ডিটেইল তৈরি করতে সাহায্য করে।
4. Custom Animation: Vertex Shader এ টাইমের সাথে সম্পর্কিত অ্যানিমেশন প্রক্রিয়া করতে পারেন, যেমন সাইন ওয়েভ বা কোনো পরাবাস্তব গতি তৈরি করা।

সারাংশ

Vertex এবং Fragment Shaders গ্রাফিক্স প্রোগ্রামিংয়ের মেরুদণ্ড হিসেবে কাজ করে। Three.js ব্যবহার করে আপনি সহজেই কাস্টম শেডার তৈরি করতে পারেন যা আপনার 3D মডেল, টেক্সচার এবং রেন্ডারিংয়ের সম্পূর্ণ নিয়ন্ত্রণ দেয়। Vertex Shader অবজেক্টের পজিশন এবং আকার নিয়ন্ত্রণ করে, এবং Fragment Shader প্রতিটি পিক্সেলের রং ও বৈশিষ্ট্য নির্ধারণ করে। এই শেডারগুলির মাধ্যমে আপনি অত্যন্ত কাস্টমাইজড গ্রাফিক্স এবং 3D ইফেক্টস তৈরি করতে পারেন।