Three.js এর ShaderMaterial এবং Custom Shaders
Three.js হল একটি শক্তিশালী JavaScript লাইব্রেরি যা 3D গ্রাফিক্স তৈরি করার জন্য ব্যবহৃত হয়। এটি WebGL এর ওপর ভিত্তি করে তৈরি এবং ওয়েব ব্রাউজারে 3D কন্টেন্ট রেন্ডার করতে সাহায্য করে। Three.js গ্রাফিক্সের বিভিন্ন দিক যেমন, 3D মডেল, টেক্সচার, আলো, ক্যামেরা এবং শেডার ইত্যাদি হ্যান্ডল করতে সক্ষম।
ShaderMaterial হল একটি Three.js উপাদান যা গ্রাফিক্সের শেডিং নিয়ন্ত্রণ করতে ব্যবহৃত হয়। শেডারস হল কোডের ব্লক যা গ্রাফিক্স কার্ডে চলে এবং পিক্সেল (fragment) এবং ভেক্টর (vertex) স্তরে গ্রাফিক্সের রেন্ডারিং প্রক্রিয়া পরিচালনা করে। Three.js ব্যবহার করে Custom Shaders তৈরি করার মাধ্যমে আপনি 3D দৃশ্যের জন্য খুবই কাস্টমাইজড গ্রাফিক্স তৈরি করতে পারেন।
এই গাইডে, আমরা ShaderMaterial এবং Custom Shaders তৈরি করার প্রক্রিয়া নিয়ে আলোচনা করব।
ShaderMaterial এবং Custom Shaders কি?
ShaderMaterial হল Three.js এর একটি মেটেরিয়াল টাইপ যা শেডার প্রোগ্রাম ব্যবহার করে মেটেরিয়ালের আচরণ কাস্টমাইজ করার জন্য ব্যবহৃত হয়।
Three.js এ shaders দুটি প্রধান ধরনের হয়:
- Vertex Shaders: এই শেডারটি জ্যামিতির ভেক্টরের সমন্বয় এবং রূপান্তর নিয়ন্ত্রণ করে।
- Fragment Shaders: এই শেডারটি পিক্সেল রেন্ডারিং এবং তাদের রঙ নির্ধারণে ব্যবহৃত হয়।
Custom Shaders তৈরি করে, আপনি গ্রাফিক্সের বিশেষ প্রভাব (যেমন ভিজ্যুয়াল ইফেক্টস, 3D মডেলিং, লাইটিং ইত্যাদি) নিয়ন্ত্রণ করতে পারেন এবং আপনার 3D দৃশ্যের পারফরম্যান্স এবং রেন্ডারিং উন্নত করতে পারবেন।
Three.js-এ ShaderMaterial এবং Custom Shaders তৈরি করা
১. প্রাথমিক সেটআপ
প্রথমে, আপনার Three.js প্রকল্পে একটি scene, camera, এবং renderer তৈরি করতে হবে। এরপর, আপনি ShaderMaterial ব্যবহার করে আপনার কাস্টম শেডার তৈরি করতে পারবেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Custom Shader Example</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
let scene, camera, renderer, cube;
// Set up the scene, camera, and renderer
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a cube with a custom shader material
const geometry = new THREE.BoxGeometry();
const material = new THREE.ShaderMaterial({
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
}
`
});
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Set camera position
camera.position.z = 5;
// Render loop
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
এখানে একটি বেসিক cube তৈরি করা হয়েছে যা একটি custom shader ব্যবহার করছে। শেডারটি খুবই সহজ: vertex shader কোডটি মডেলকে প্রদর্শনের জন্য প্রস্তুত করে এবং fragment shader কোডটি পিক্সেল রঙের জন্য।
২. Vertex Shader এবং Fragment Shader এর ব্যবহার
Vertex Shader এবং Fragment Shader হল দুটি প্রধান শেডার প্রোগ্রাম যা গ্রাফিক্স রেন্ডারিং প্রক্রিয়ায় অংশ নেয়।
- Vertex Shader: এটি পজিশন, নর্মাল, এবং অন্যান্য বৈশিষ্ট্যগুলির সাথে কাজ করে এবং 3D জ্যামিতি কোথায় এবং কিভাবে রেন্ডার হবে তা নির্ধারণ করে।
- Fragment Shader: এটি রঙ এবং টেক্সচার নির্ধারণে ব্যবহৃত হয়, এবং প্রতিটি পিক্সেল বা ফ্র্যাগমেন্টের জন্য কাজ করে।
Vertex Shader:
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
এখানে, gl_Position পজিশন ভেক্টরের জন্য ট্রান্সফর্মেশন পরিচালনা করছে।
Fragment Shader:
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
}
এখানে, gl_FragColor পিক্সেলের রঙ নির্ধারণ করছে। এটি RGB রঙের মান দেওয়া হয়েছে, যেটি রেড রঙ তৈরি করবে।
৩. টেক্সচার ব্যবহার করা (Texturing with Custom Shaders)
Custom shaders ব্যবহার করে আপনি টেক্সচার অ্যাপ্লাই করতে পারেন। নিচে একটি টেক্সচারিংয়ের উদাহরণ দেওয়া হলো:
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path_to_texture.jpg');
const material = new THREE.ShaderMaterial({
uniforms: {
texture: { type: 't', value: texture }
},
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform sampler2D texture;
void main() {
gl_FragColor = texture2D(texture, gl_PointCoord);
}
`
});
এখানে, একটি টেক্সচার লোড করা হয়েছে এবং এটি fragment shader-এ texture2D ফাংশন ব্যবহার করে গ্রাফিক্সে প্রয়োগ করা হয়েছে।
৪. Lighting Effects (শেডারের মাধ্যমে আলো প্রভাব)
Three.js শেডারের মাধ্যমে বিভিন্ন ধরনের আলো প্রভাবও প্রয়োগ করা সম্ভব। নিচে একটি লাইটিং ইফেক্টের উদাহরণ দেওয়া হলো:
const material = new THREE.ShaderMaterial({
uniforms: {
lightPosition: { type: 'v3', value: new THREE.Vector3(1, 1, 1) }
},
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 lightPosition;
void main() {
vec3 lightDir = normalize(lightPosition - gl_FragCoord.xyz);
float diff = max(dot(normalize(vec3(0.0, 0.0, 1.0)), lightDir), 0.0);
gl_FragColor = vec4(diff, diff, diff, 1.0); // Lighting effect
}
`
});
এখানে, fragment shader-এ lightPosition ব্যবহার করে আলো প্রভাব তৈরি করা হয়েছে।
৫. Animating Shaders (শেডার অ্যানিমেশন)
Custom shaders এর মাধ্যমে আপনি animation তৈরি করতে পারেন। এটির জন্য সাধারণত টাইম ভেরিয়েবল ব্যবহার করা হয় যা ফ্রেম প্রতি পরিবর্তন হয়। নিচে একটি উদাহরণ দেখানো হল যেখানে একটি অ্যানিমেশন প্রক্রিয়া তৈরি করা হয়েছে:
const material = new THREE.ShaderMaterial({
uniforms: {
time: { type: 'f', value: 0.0 }
},
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform float time;
void main() {
gl_FragColor = vec4(sin(time), cos(time), 0.0, 1.0); // Color animation based on time
}
`
});
function animate() {
material.uniforms.time.value += 0.01; // Increment the time for animation
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
এখানে, time ইউনিফর্ম ভেরিয়েবল পরিবর্তন করে, শেডারের রঙ অ্যানিমেট করা হচ্ছে।
সারাংশ
ShaderMaterial এবং Custom Shaders এর মাধ্যমে আপনি Three.js এ কাস্টম গ্রাফিক্স এবং বিশেষ ভিজ্যুয়াল এফেক্ট তৈরি করতে পারেন। Vertex এবং Fragment Shaders ব্যবহার করে আপনি জ্যামিতি এবং পিক্সেলের আচরণ নিয়ন্ত্রণ করতে পারবেন, এবং Eager Loading এর মতো ইফেক্টও সৃষ্টি করতে পারবেন। Custom Shaders ব্যবহার করে Lighting Effects, Texturing, এবং Animations তৈরি করা সম্ভব, যা Three.js এ উন্নত এবং দৃষ্টিনন্দন 3D দৃশ্য রেন্ডার করতে সাহায্য করে।
Read more
