BabylonJS একটি শক্তিশালী 3D গ্রাফিক্স ইঞ্জিন, যা 2D এবং 3D GUI (Graphical User Interface) ইলিমেন্টগুলো সহজেই ইন্টিগ্রেট করতে সাহায্য করে। 3D গেম বা অ্যাপ্লিকেশন তৈরি করার সময়, একটি ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস (UI) থাকা খুবই গুরুত্বপূর্ণ। BabylonJS এ, আপনি কাস্টম GUI ইলিমেন্ট যেমন বাটন, স্লাইডার, টেক্সট বক্স, এবং অন্যান্য ইন্টারঅ্যাকটিভ UI উপাদান তৈরি করতে পারেন, যা সরাসরি 3D দৃশ্যে রেন্ডার করা হয়।
এই গাইডে, আমরা দেখব কিভাবে 2D এবং 3D GUI ইলিমেন্টের সাথে কাজ করতে হয়।
১. 2D GUI ইলিমেন্ট ইন্টিগ্রেশন
2D GUI কি?
2D GUI ইলিমেন্টগুলো হল সাধারণ 2D উপাদান, যেমন বাটন, টেক্সট, ইমেজ ইত্যাদি, যা সাধারণত 2D স্ক্রীনে প্রদর্শিত হয়। এই ইলিমেন্টগুলো সাধারণত স্ক্রীনের উপরের দিকে বা কোণায় অবস্থান করে।
2D GUI ইলিমেন্ট তৈরি করা
উদাহরণ:
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);
// একটি নতুন দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);
// 2D GUI (AdvancedDynamicTexture) তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, scene);
// একটি Button তৈরি করা
var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
button.width = "200px";
button.height = "40px";
button.color = "white";
button.background = "green";
button.top = "-100px"; // স্ক্রীনের উপরে অবস্থান
button.left = "0px"; // স্ক্রীনের কেন্দ্রে অবস্থান
button.onPointerUpObservable.add(function() {
alert("Button clicked!");
});
// বাটনটি UI তে যোগ করা
advancedTexture.addControl(button);
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
কোডের ব্যাখ্যা:
- AdvancedDynamicTexture: এটি একটি বিশেষ ধরনের 2D GUI টেক্সচার যা একটি UI ইলিমেন্ট হিসেবে কাজ করে।
CreateFullscreenUIমেথডটি স্ক্রীনের পুরো আয়তনে UI তৈরি করে। - Button: এটি একটি সাধারণ বাটন তৈরি করে। বাটনের অবস্থান, আকার, রঙ ইত্যাদি কনফিগার করা যেতে পারে।
- onPointerUpObservable.add: বাটনে ক্লিক করার সময় এটি একটি ফাংশন কল করবে, যেটি এখানে একটি অ্যালার্ট দেখাবে।
2D GUI এর বৈশিষ্ট্য:
- সরল এবং দ্রুত UI উপাদান তৈরি করতে ব্যবহার হয়।
- স্ক্রীনের ওপর স্থায়ীভাবে প্রদর্শিত হয় এবং 2D গ্রাফিক্সের মতো কাজ করে।
- এটি সাধারণত গেমের HUD (Heads-Up Display) বা কন্ট্রোল প্যানেল তৈরি করতে ব্যবহৃত হয়।
২. 3D GUI ইলিমেন্ট ইন্টিগ্রেশন
3D GUI কি?
3D GUI ইলিমেন্টগুলো হল 3D স্পেসে স্থাপন করা UI উপাদান, যেমন বাটন, স্লাইডার, এবং টেক্সট যা 3D অবজেক্টের মতো দৃশ্যে অবস্থান করে এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করতে সক্ষম।
3D GUI ইলিমেন্ট তৈরি করা
উদাহরণ:
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS এর ইঞ্জিন তৈরি করা
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);
// 3D UI (Mesh & GUI) তৈরি করা
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(scene, camera);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
// একটি 3D বাটন তৈরি করা
var button3D = BABYLON.GUI.Button.CreateSimpleButton("button3D", "3D Button");
button3D.width = "150px";
button3D.height = "50px";
button3D.color = "white";
button3D.background = "blue";
button3D.onPointerUpObservable.add(function() {
alert("3D Button Clicked!");
});
// 3D বাটনটি বক্সের উপর স্থাপন করা
advancedTexture.addControl(button3D);
button3D.linkToMesh(box); // বক্সের সাথে যুক্ত করা
// দৃশ্য রেন্ডার করা
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
কোডের ব্যাখ্যা:
- CreateForMesh: এই ফাংশনটি 3D UI তৈরি করতে ব্যবহৃত হয়। এটি একটি 3D অবজেক্টের (যেমন বক্স বা কোনো অন্য মেশ) উপর UI উপাদানগুলোর সঞ্চালন পরিচালনা করে।
- linkToMesh: এটি একটি 3D UI উপাদানকে কোনো 3D অবজেক্টের সাথে সংযুক্ত করে, যার ফলে UI উপাদানটি সেই অবজেক্টের সঙ্গে চলতে থাকে।
- Button: 3D বাটনটি 3D মেশে যোগ করা হয়েছে। যখন আপনি বাটনে ক্লিক করবেন, তখন এটি একটি অ্যাকশন সম্পাদন করবে।
3D GUI এর বৈশিষ্ট্য:
- এটি 3D দৃশ্যে অবজেক্টের সাথে সম্পর্কিত UI উপাদান তৈরি করতে ব্যবহৃত হয়।
- UI উপাদান 3D স্পেসে অবস্থিত থাকে, যা ব্যবহারকারীকে আরও ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করে।
- আপনি 3D অবজেক্টগুলির মধ্যে বাটন, স্লাইডার, টেক্সট ইত্যাদি যুক্ত করতে পারেন।
৩. 2D এবং 3D GUI এর সমন্বয়
BabylonJS এ, আপনি 2D এবং 3D GUI উপাদান একসাথে ব্যবহার করতে পারেন, যা আপনাকে একটি পূর্ণাঙ্গ ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরির সুযোগ দেয়। উদাহরণস্বরূপ, আপনি 2D বাটন তৈরি করতে পারেন যা স্ক্রীনের কোণায় অবস্থান করবে এবং 3D UI উপাদান ব্যবহার করে 3D দৃশ্যে অ্যাকশন প্রদান করতে পারেন।
উদাহরণ:
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS এর ইঞ্জিন তৈরি করা
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);
// 2D GUI (AdvancedDynamicTexture) তৈরি করা
var advancedTexture2D = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI2D", true, scene);
// 2D বাটন তৈরি করা
var button2D = BABYLON.GUI.Button.CreateSimpleButton("button2D", "2D Button");
button2D.width = "150px";
button2D.height = "50px";
button2D.color = "white";
button2D.background = "red";
button2D.top = "150px";
button2D.onPointerUpObservable.add(function() {
alert("2D Button Clicked!");
});
advancedTexture2D.addControl(button2D);
// 3D GUI (AdvancedDynamicTexture) তৈরি করা
var advancedTexture3D = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(scene, camera);
var button3D = BABYLON.GUI.Button.CreateSimpleButton("button3D", "3D Button");
button3D.width = "150px";
button3D.height = "50px";
button3D.color = "white";
button3D.background = "green";
button3D.onPointerUpObservable.add(function() {
alert("3D Button Clicked!");
});
// 3D বাটনটি একটি বক্সের সাথে যুক্ত করা
var box = BABYLON
.MeshBuilder.CreateBox("box", {size: 2}, scene); button3D.linkToMesh(box); advancedTexture3D.addControl(button3D);
// দৃশ্য রেন্ডার করা engine.runRenderLoop(function () { scene.render(); });
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা window.addEventListener("resize", function () { engine.resize(); });
---
## সারাংশ
- **2D GUI**: স্ক্রীনের উপরে সরল ও ইন্টারঅ্যাকটিভ UI উপাদান তৈরি করা, যেমন বাটন, টেক্সট, স্লাইডার, যা সাধারণত HUD হিসেবে ব্যবহৃত হয়।
- **3D GUI**: 3D দৃশ্যে অবজেক্টের সঙ্গে যুক্ত করা UI উপাদান তৈরি করা, যা 3D স্পেসে অবস্থান করে এবং অবজেক্টের সঙ্গে সম্পর্কিত হয়।
- BabylonJS এ, আপনি সহজেই 2D এবং 3D GUI উপাদানগুলোর সমন্বয়ে একটি পূর্ণাঙ্গ ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন।
এই গাইডের মাধ্যমে আপনি বুঝতে পারবেন কিভাবে BabylonJS ব্যবহার করে আপনার 3D দৃশ্যে বিভিন্ন ধরনের UI উপাদান সহজে ইন্টিগ্রেট করা যায়।
Read more
