Viewport হলো একটি দৃশ্যের নির্দিষ্ট অংশ যা দর্শক দেখতে পারে। এটি সাধারণত ক্যামেরার মাধ্যমে পরিচালিত হয়, এবং একে কনফিগারেশন করে বিভিন্ন দৃশ্য বা গেমের দৃশ্যের আঙ্গিক (perspective) বা স্কেল পরিবর্তন করা যেতে পারে। BabylonJS এ viewport কনফিগারেশন খুবই সহজ, এবং এটি আপনার দৃশ্যের ভিউ বা ক্যামেরার পজিশন নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়।
১. Viewport এর মৌলিক ধারণা
Viewport হল একটি দৃশ্যের যে অংশটি ক্যামেরা প্রদর্শন করে। যদি আপনার গেমে একাধিক দৃশ্য থাকে, তবে ভিউপোর্ট ব্যবহৃত হতে পারে প্রতিটি দৃশ্য বা অংশের জন্য আলাদা আলাদা সেটিংস ঠিক করতে।
BabylonJS-এ viewport নির্ধারণ করা হয় ক্যামেরা সেটিংসের মাধ্যমে। একটি ক্যামেরা আপনার দৃশ্যে যে অংশটি প্রদর্শন করবে তা নির্ধারণ করে, এবং viewport সেটিংস ব্যবহার করে আপনি সেই অংশের আকার এবং অবস্থান পরিবর্তন করতে পারেন।
২. Viewport কনফিগারেশন কিভাবে করবেন?
BabylonJS-এ viewport কনফিগার করতে হলে, ক্যামেরার জন্য viewport এর আকার নির্ধারণ করতে হবে। আপনি এটি ক্যামেরার viewport প্রোপার্টি ব্যবহার করে করতে পারেন।
উদাহরণ: Viewport কনফিগারেশন
// Canvas এবং Engine তৈরি করা
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
// Scene তৈরি করা
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);
// Viewport কনফিগারেশন: (x, y, width, height)
camera.viewport = new BABYLON.Viewport(0, 0, 0.5, 1); // বাম আধা অংশ প্রদর্শন হবে
// Render Loop
engine.runRenderLoop(function () {
scene.render();
});
// Resize Event
window.addEventListener("resize", function () {
engine.resize();
});
কোড ব্যাখ্যা:
- BABYLON.Viewport(x, y, width, height):
xএবংyহল ভিউপোর্টের শুরুর পজিশন (এগুলি 0 থেকে 1 এর মধ্যে থাকতে হবে)।widthএবংheightহল ভিউপোর্টের আকার (এগুলি 0 থেকে 1 এর মধ্যে থাকবে, যেখানে 1 মানে পুরো স্ক্রীন)।
উপরের উদাহরণে, viewport কনফিগার করা হয়েছে যাতে স্ক্রীনের বাম অর্ধেক (x=0, width=0.5) প্রদর্শিত হয় এবং পূর্ণ উচ্চতা (height=1) থাকে।
৩. একাধিক Viewport ব্যবহার
কিছু ক্ষেত্রে, আপনি একাধিক viewport ব্যবহার করতে পারেন, যেমন একটি গেমের মধ্যে একাধিক ক্যামেরা অথবা একই দৃশ্যে বিভিন্ন ভিউপোর্টের সাথে কাজ করার প্রয়োজন। BabylonJS-এ এই কাজটি multiple viewports এর মাধ্যমে করা যায়।
উদাহরণ: একাধিক Viewport কনফিগারেশন
// Scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা
var camera1 = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera1.attachControl(canvas, true);
// দ্বিতীয় ক্যামেরা তৈরি করা
var camera2 = new BABYLON.FreeCamera("camera2", new BABYLON.Vector3(0, 5, -10), scene);
// প্রথম ক্যামেরার জন্য viewport কনফিগারেশন
camera1.viewport = new BABYLON.Viewport(0, 0, 0.5, 1); // বাম আর্ধেক অংশ
// দ্বিতীয় ক্যামেরার জন্য viewport কনফিগারেশন
camera2.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1); // ডান আর্ধেক অংশ
// আলোর উৎস
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// Render Loop
engine.runRenderLoop(function () {
scene.render();
});
// Resize Event
window.addEventListener("resize", function () {
engine.resize();
});
কোড ব্যাখ্যা:
- এখানে দুটি ক্যামেরা ব্যবহৃত হয়েছে। camera1 এবং camera2 ভিউপোর্টের বাম এবং ডান অংশে আলাদা আলাদা দৃশ্য প্রদর্শন করবে।
- camera1.viewport = new BABYLON.Viewport(0, 0, 0.5, 1): প্রথম ক্যামেরাটি স্ক্রীনের বাম আর্ধেক প্রদর্শন করবে।
- camera2.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1): দ্বিতীয় ক্যামেরাটি স্ক্রীনের ডান আর্ধেক প্রদর্শন করবে।
এভাবে, আপনি একাধিক ক্যামেরা দিয়ে একাধিক ভিউপোর্ট তৈরি করতে পারেন।
৪. Viewport নিয়ে উন্নত কনফিগারেশন
যদি আপনি আরও উন্নত কনফিগারেশন চান, তবে কিছু অতিরিক্ত কনফিগারেশন ব্যবহার করতে পারেন:
- ভিউপোর্ট পরিবর্তন করা সময় ক্যামেরা পজিশন এবং রোটেশন: আপনি ভিউপোর্ট পরিবর্তন করার সময় ক্যামেরার অবস্থান (position) এবং রোটেশন (rotation) নিয়ন্ত্রণ করতে পারেন।
- একাধিক ক্যামেরার মধ্যে পরিবর্তন: আপনি বিভিন্ন ক্যামেরার মধ্যে দ্রুত পরিবর্তন করতে পারেন, যার ফলে দর্শক বিভিন্ন দিক থেকে দৃশ্য দেখতে পারে।
৫. Viewport এবং ফ্রেম রেট কনফিগারেশন
যদি আপনার গেমের জন্য নির্দিষ্ট ফ্রেম রেটের প্রয়োজন হয়, তবে সেটিও কনফিগার করা যেতে পারে। আপনি engine এর targetFrameRate প্রপার্টি ব্যবহার করে নির্দিষ্ট ফ্রেম রেট সেট করতে পারেন, যা ভিউপোর্ট রেন্ডারিংয়ের গতি প্রভাবিত করবে।
উদাহরণ: ফ্রেম রেট কনফিগারেশন
// ফ্রেম রেট কনফিগারেশন
engine.targetFrameRate = 60; // 60 FPS এ রান করবে
এটি আপনার দৃশ্যের রেন্ডারিং স্পিড নিয়ন্ত্রণ করবে।
সারাংশ
BabylonJS-এ viewport কনফিগারেশন ক্যামেরার মাধ্যমে দৃশ্যের প্রদর্শিত অংশ নিয়ন্ত্রণ করার একটি শক্তিশালী উপায়। আপনি বিভিন্ন ক্যামেরার জন্য একাধিক viewport ব্যবহার করতে পারেন এবং সেই অনুযায়ী দৃশ্যের আঙ্গিক পরিবর্তন করতে পারেন। এছাড়া, ভিউপোর্টের আকার এবং অবস্থান নিয়ন্ত্রণ করে, আপনি আপনার গেম বা অ্যাপ্লিকেশনটিকে আরও ইন্টারঅ্যাক্টিভ এবং ব্যবহারকারী-বান্ধব করতে পারেন।
Read more
