Reflection (প্রতিফলন) এবং Refraction (অভ্যন্তরীণ প্রতিসরণ) হলো 3D গ্রাফিক্সের দুটি অত্যন্ত গুরুত্বপূর্ণ প্রক্রিয়া, যা দৃশ্যের বাস্তবতা এবং গভীরতা বাড়াতে সাহায্য করে। BabylonJS-এ এগুলো ব্যবহার করে আপনি আপনার 3D দৃশ্যে বেশ রিয়েলিস্টিক ইফেক্ট সৃষ্টি করতে পারবেন।
- Reflection: এটি একটি অবজেক্টের পৃষ্ঠে অন্য অবজেক্ট বা পরিবেশের প্রতিফলন তৈরি করে।
- Refraction: এটি সান্দ্র বা স্বচ্ছ পৃষ্ঠে আলোর পথ পরিবর্তন ঘটিয়ে দৃষ্টিভঙ্গি পরিবর্তন করে। সাধারণত এটি পানির বা কাচের মতো স্বচ্ছ উপকরণে দেখা যায়।
BabylonJS এ Reflection এবং Refraction সিস্টেমগুলি অত্যন্ত কার্যকরী এবং সহজেই ইমপ্লিমেন্ট করা যায়। এখানে চলুন, আমরা দেখবো কিভাবে আপনি Real-time Reflection এবং Refraction তৈরি করতে পারেন।
Real-time Reflection
Real-time Reflection তৈরি করার জন্য BabylonJS-এ CubeTexture এবং RenderTargetTexture ব্যবহার করা হয়। এগুলোর মাধ্যমে আপনি একটি Reflection Texture তৈরি করতে পারবেন যা সম্পূর্ণ দৃশ্যে রিপ্রডিউস করে এবং এটি রিয়েল টাইমে আপডেট হয়।
Reflection তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Reflection Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস তৈরি
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
light.intensity = 0.7;
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
// Reflection Plane তৈরি করা
var reflectionPlane = new BABYLON.Plane(0, -1, 0, 0);
var reflectionTexture = new BABYLON.RenderTargetTexture("reflection", { width: 512, height: 512 }, scene);
reflectionTexture.renderList = [box];
reflectionTexture.renderTargetTexture.hasAlpha = false;
// সাপোর্ট করার জন্য, ReflectionTexture পরবর্তীতে বক্সের মেটেরিয়াল এ অ্যাপ্লাই করা হবে
var material = new BABYLON.StandardMaterial("reflectionMaterial", scene);
material.reflectionTexture = reflectionTexture;
material.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE; // Skybox mode সেট করা
box.material = material;
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- RenderTargetTexture ব্যবহার করে একটি রেন্ডার টার্গেট টেক্সচার তৈরি করা হয় যা প্রতিফলন ধারণ করবে।
- reflectionTexture.renderList-এ box মেশ অ্যাড করা হয়েছে, যার মানে হল যে রেন্ডার টেক্সচারটি শুধুমাত্র এই বক্সের প্রতিফলন ধরবে।
- coordinatesMode = BABYLON.Texture.SKYBOX_MODE: এই কোডটি বলছে যে প্রতিফলনটি স্কাইবক্সের মতো হবে, অর্থাৎ পুরো দৃশ্যের প্রতিফলন হবে।
এটি বাস্তবসম্মত একটি Real-time Reflection তৈরি করবে যা বক্সের পৃষ্ঠে দৃশ্যের প্রতিফলন দেখাবে।
Real-time Refraction
Refraction সাধারণত জল, কাচ বা অন্য স্বচ্ছ উপকরণে দেখা যায় যেখানে আলোর রিফ্র্যাকশন ঘটে এবং ভিজ্যুয়াল পরিবর্তন আসে। BabylonJS-এ Refraction প্রক্রিয়া RefractionTexture ব্যবহার করে সম্পন্ন করা হয়।
Refraction তৈরি করা
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-time Refraction Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস তৈরি
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
light.intensity = 0.7;
// একটি সিলিন্ডার তৈরি করা
var cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {diameterTop: 3, diameterBottom: 3, height: 5}, scene);
cylinder.position.y = 2;
// RefractionTexture তৈরি করা
var refractionTexture = new BABYLON.RefractionTexture("refraction", 512, scene);
refractionTexture.renderList = [cylinder];
refractionTexture.refractionRatio = 0.7; // Refraction ইনটেনসিটি নিয়ন্ত্রণ করা
// মেটেরিয়াল সেট করা
var material = new BABYLON.StandardMaterial("refractionMaterial", scene);
material.refractionTexture = refractionTexture;
// সিলিন্ডারের মেটেরিয়ালে Refraction যোগ করা
cylinder.material = material;
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- RefractionTexture: এই টেক্সচারটি Refraction ইফেক্ট অ্যাপ্লাই করার জন্য ব্যবহৃত হয়। এখানে সিলিন্ডারের জন্য একটি রেফ্র্যাকশন টেক্সচার তৈরি করা হয়েছে।
- refractionRatio: এটি আলোর রিফ্র্যাকশনের মাত্রা নিয়ন্ত্রণ করে। যতো বেশি রিফ্র্যাকশন রেশিও, ততো বেশি স্বচ্ছতা এবং আলোর বিকৃতি হবে।
- renderList: এর মাধ্যমে আপনি যে অবজেক্টটি রেফ্র্যাকশন টেক্সচার হিসেবে চান, সেটি নির্ধারণ করতে পারেন।
এটি Real-time Refraction তৈরি করবে, যা সিলিন্ডারের মাধ্যমে আলোর রিফ্র্যাকশন প্রদর্শন করবে।
Reflection এবং Refraction এর পার্থক্য
- Reflection: এটি একটি অবজেক্টের পৃষ্ঠে পরিবেশ বা অন্যান্য অবজেক্টের প্রতিফলন তৈরি করে। এটি সাধারণত আয়না, জল বা কোনো ব্রাইট পৃষ্ঠের উপর দেখা যায়।
- Refraction: এটি আলোর গতি পরিবর্তন করে এবং স্বচ্ছ বা আংশিক স্বচ্ছ পৃষ্ঠের মাধ্যমে আলোর প্রতিফলন ঘটায়। এটি পানির বা কাচের মতো পৃষ্ঠে দেখা যায়, যেখানে দৃশ্যের অপটিক্যাল পরিবর্তন ঘটে।
সারাংশ
- Reflection এবং Refraction হলো দুইটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা 3D গ্রাফিক্সে বাস্তবসম্মত পরিবেশ তৈরি করতে সাহায্য করে। BabylonJS এ এই ইফেক্টগুলো RenderTargetTexture এবং RefractionTexture এর মাধ্যমে তৈরি করা যায়।
- Reflection সাধারণত পৃষ্ঠে অন্য অবজেক্ট বা পরিবেশের প্রতিফলন ঘটায়, এবং Refraction আলোর পথ পরিবর্তন করে স্বচ্ছ পৃষ্ঠের মাধ্যমে দেখায়।
- এই ইফেক্টগুলো ব্যবহার করে আপনি আপনার 3D দৃশ্যে আরও বাস্তবসম্মত এবং আকর্ষণীয় ভিজ্যুয়াল তৈরি করতে পারবেন।
Content added By
Read more
