Advanced Camera Techniques গাইড ও নোট

BabylonJS-এ ক্যামেরা হলো 3D দৃশ্যে ব্যবহারকারীর দৃষ্টিভঙ্গি নিয়ন্ত্রণের একটি গুরুত্বপূর্ণ উপাদান। ক্যামেরার মাধ্যমে দৃশ্যের ভিউ পরিবর্তন করা, জুম ইন/আউট, প্যানিং, রোটেটিং, এবং অন্যান্য ইন্টারঅ্যাকশন করা সম্ভব। এবার, আমরা অ্যাডভান্সড ক্যামেরা টেকনিক্স নিয়ে আলোচনা করব, যা আপনার 3D অ্যাপ্লিকেশন বা গেমে আরও উন্নত ক্যামেরা নিয়ন্ত্রণ প্রদান করবে।

ক্যামেরার ধরন

১. ArcRotateCamera

ArcRotateCamera সবচেয়ে বেশি ব্যবহৃত ক্যামেরা টাইপ, যা আপনাকে দৃশ্যের চারপাশে ঘুরে দেখার সুযোগ দেয়। এটি সাধারণত মডেল প্রিভিউ বা 3D গেমের জন্য ব্যবহার করা হয়।

ArcRotateCamera তৈরি করার উদাহরণ:

var camera = new BABYLON.ArcRotateCamera("arcCamera", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

এখানে:

• Math.PI / 2: ক্যামেরার শুরু অবস্থান (অ্যাঙ্গেল) নির্ধারণ করা হয়েছে।
• BABYLON.Vector3.Zero(): ক্যামেরার লক্ষ্য পয়েন্ট (target) নির্ধারণ করা হয়েছে।

২. UniversalCamera

UniversalCamera সাধারণত 2D বা 3D অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয় যেখানে আপনাকে প্রথম ব্যক্তির দৃষ্টিভঙ্গি (First-Person View) অথবা স্বাধীনভাবে দৃশ্যে চলাচল করার সুযোগ দিতে হয়। এটি প্যানেল, গেম, এবং রিয়েল-টাইম সিমুলেশনে ব্যাপকভাবে ব্যবহৃত হয়।

UniversalCamera তৈরি করার উদাহরণ:

var camera = new BABYLON.UniversalCamera("universalCamera", new BABYLON.Vector3(0, 1, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, true);

এখানে:

• setTarget(BABYLON.Vector3.Zero()): ক্যামেরার লক্ষ্য স্থির করা হয়েছে 3D দৃশ্যের কেন্দ্রস্থলে।

৩. FreeCamera

FreeCamera আপনাকে একেবারে স্বাধীনভাবে দৃশ্যে ঘুরে বেড়ানোর ক্ষমতা দেয়, প্রায় গেমের প্রথম ব্যক্তি ক্যামেরার মতো। আপনি এটিকে "ফ্লাই-থ্রু" ক্যামেরা হিসেবে ব্যবহার করতে পারেন, যেখানে ব্যবহারকারী বা গেম চরিত্র কোনো বাধা ছাড়াই দৃশ্যে চলাচল করতে পারে।

FreeCamera তৈরি করার উদাহরণ:

var camera = new BABYLON.FreeCamera("freeCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.attachControl(canvas, true);

Advanced Camera Techniques

১. Camera Zoom (জুম)

Zoom হল ক্যামেরার ফিল্ড অফ ভিউ (FOV) বা ক্যামেরার দূরত্বের মাধ্যমে দৃশ্যের প্রতি ব্যবহারকারীর দৃষ্টিভঙ্গি পরিবর্তন করা। BabylonJS-এ ক্যামেরার ফিল্ড অফ ভিউ পরিবর্তন করে আপনি জুম ইন বা আউট করতে পারেন।

Zoom করার উদাহরণ:

camera.fov = 0.8;  // ক্যামেরার FOV কমানোর মাধ্যমে জুম ইন
camera.fov = 1.5;  // ক্যামেরার FOV বাড়ানোর মাধ্যমে জুম আউট

এছাড়া, আপনি camera.radius দিয়ে ArcRotateCamera এর ক্যামেরার দূরত্বও নিয়ন্ত্রণ করতে পারেন।

২. Camera Follow (ক্যামেরা অনুসরণ)

ক্যামেরা যদি কোনও অবজেক্ট বা চরিত্রকে অনুসরণ করতে চায়, তবে সেটি camera.target বা camera.lockedTarget ব্যবহার করে করা যায়। এটি বিশেষ করে গেমে বা সিমুলেশনে ব্যবহৃত হয়, যেখানে ক্যামেরা একটি চরিত্র বা গাড়ি, বা অন্য কোন ডাইনামিক অবজেক্টকে অনুসরণ করে।

ক্যামেরা অনুসরণের উদাহরণ:

var car = BABYLON.MeshBuilder.CreateBox("car", {size: 2}, scene);
var camera = new BABYLON.FollowCamera("followCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.lockedTarget = car;

এখানে:

• camera.lockedTarget = car;: ক্যামেরা car মডেলটিকে অনুসরণ করবে।

৩. Camera Rotation (ক্যামেরা রোটেশন)

ক্যামেরা রোটেশন একটি অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য, বিশেষ করে গেম এবং সিমুলেশনগুলিতে। আপনি ক্যামেরার অবস্থানকে রোটেট করতে পারেন অথবা কোনো লক্ষ্যবস্তুর চারপাশে ক্যামেরা ঘুরাতে পারেন।

ক্যামেরা রোটেট করার উদাহরণ:

camera.alpha += 0.01;  // ক্যামেরা ঘুরানোর জন্য alpha ভ্যালু পরিবর্তন
camera.beta += 0.01;   // ক্যামেরার উল্লম্ব ঘূর্ণন

এছাড়া, ArcRotateCamera ব্যবহার করলে আপনি তার alpha এবং beta ভ্যালুর মাধ্যমে ক্যামেরার রোটেশন নিয়ন্ত্রণ করতে পারেন।

৪. Camera Shake (ক্যামেরার শেক)

Camera Shake গেমগুলিতে ব্যবহৃত একটি খুব জনপ্রিয় প্রভাব, যা বিশেষত সংঘর্ষ, বিস্ফোরণ বা শক্তিশালী ইফেক্টের পরে দৃশ্যে একটি শেক বা কম্পন তৈরি করতে ব্যবহৃত হয়।

ক্যামেরা শেক করার উদাহরণ:

var shakeIntensity = 0.05;
var shakeDuration = 1000;  // 1 সেকেন্ডের জন্য শেক

camera.position.x += Math.random() * shakeIntensity;
camera.position.y += Math.random() * shakeIntensity;
camera.position.z += Math.random() * shakeIntensity;

এই কোডটি ক্যামেরার অবস্থান এলোমেলোভাবে পরিবর্তন করবে, যার ফলে একটি শেকের ইফেক্ট তৈরি হবে।

৫. Camera Speed Adjustment (ক্যামেরার গতির সমন্বয়)

গেমের মধ্যে ক্যামেরার গতি পরিবর্তন করা খুবই দরকারি। আপনি ক্যামেরার গতির অনুভূতিকে camera.speed অথবা camera.angularSpeed দিয়ে নিয়ন্ত্রণ করতে পারেন।

ক্যামেরার গতির সমন্বয়ের উদাহরণ:

camera.speed = 0.1;  // ক্যামেরার চলাচলের গতি সমন্বয়
camera.angularSpeed = 0.05;  // ক্যামেরার রোটেশন গতি সমন্বয়

৬. Camera Smoothing (ক্যামেরার স্মুথিং)

Smoothing হল ক্যামেরার চলাচলের মসৃণতা, যা গেমের অভিজ্ঞতাকে আরও বাস্তবসম্মত করে তোলে। BABYLON.Camera.FollowCamera এর মধ্যে স্মুথিং ইনপুট করা যেতে পারে।

স্মুথিং প্রভাব প্রয়োগের উদাহরণ:

camera.cameraAcceleration = 0.05;
camera.maxCameraSpeed = 10;

এখানে, cameraAcceleration ক্যামেরার গতি বৃদ্ধি পেতে সাহায্য করবে এবং maxCameraSpeed ক্যামেরার সর্বাধিক গতির সীমা নির্ধারণ করবে।

সারাংশ

• ArcRotateCamera, UniversalCamera, এবং FreeCamera-এর মাধ্যমে আপনি বিভিন্ন ধরনের ক্যামেরা নিয়ন্ত্রণ করতে পারেন।
• Camera Zoom ব্যবহার করে আপনি ফিল্ড অফ ভিউ পরিবর্তন করতে পারেন, যা দৃশ্যের জুম ইন বা আউট করে।
• Camera Follow প্রভাবটি ব্যবহার করে একটি অবজেক্ট বা চরিত্রকে ক্যামেরা অনুসরণ করতে পারেন।
• Camera Rotation এবং Camera Shake গেমের মধ্যে একটি বাস্তবসম্মত অভিজ্ঞতা তৈরি করতে ব্যবহৃত হয়।
• Camera Speed এবং Camera Smoothing ব্যবহার করে আপনি ক্যামেরার গতিকে সমন্বয় করতে এবং স্মুথে করতে পারেন।

এই অ্যাডভান্সড ক্যামেরা টেকনিক্সগুলি আপনার 3D দৃশ্য বা গেমে আরো ইন্টারঅ্যাকটিভ, মসৃণ এবং বাস্তবসম্মত অভিজ্ঞতা প্রদান করবে।

BabylonJS এ Multi-camera ব্যবস্থাপনা একটি শক্তিশালী ফিচার, যা বিভিন্ন ক্যামেরা ব্যবহার করে একই সময়ে 3D দৃশ্যের বিভিন্ন দৃষ্টিকোণ থেকে ভিউ প্রদান করতে সাহায্য করে। এটি বিশেষভাবে গুরুত্বপূর্ণ যখন আপনি 3D অ্যাপ্লিকেশন বা গেমে একাধিক ক্যামেরা ব্যবহারের প্রয়োজন পড়ে, যেমন প্রথম-পাত্র দৃশ্য (first-person view), তৃতীয়-পাত্র দৃশ্য (third-person view), অথবা একটি টপ-ডাউন ভিউ।

BabylonJS এ একাধিক ক্যামেরা পরিচালনা করা সহজ এবং সরল। আপনি একাধিক ক্যামেরা তৈরি করতে পারেন, এবং যেকোনো সময় ক্যামেরার ভিউ পরিবর্তন করতে পারবেন।

Multi-camera ব্যবস্থাপনা

১. ক্যামেরা তৈরি করা

একাধিক ক্যামেরা ব্যবহারের জন্য, প্রথমে আপনাকে বিভিন্ন ধরনের ক্যামেরা তৈরি করতে হবে। একাধিক ক্যামেরা তৈরি করতে, আপনি BABYLON.ArcRotateCamera, BABYLON.FreeCamera, অথবা অন্যান্য ক্যামেরা ব্যবহার করতে পারেন।

উদাহরণ:

// প্রথম ক্যামেরা: ArcRotateCamera
var camera1 = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera1.attachControl(canvas, true);

// দ্বিতীয় ক্যামেরা: FreeCamera
var camera2 = new BABYLON.FreeCamera("camera2", new BABYLON.Vector3(0, 5, -10), scene);
camera2.setTarget(BABYLON.Vector3.Zero());
camera2.attachControl(canvas, true);

এখানে, camera1 একটি ArcRotateCamera, যা একটি নির্দিষ্ট পয়েন্ট (যেমন BABYLON.Vector3.Zero()) থেকে দৃশ্যের চারপাশে ঘোরে। camera2 একটি FreeCamera, যা আপনার কীবোর্ড এবং মাউসের মাধ্যমে পুরো দৃশ্যে স্বাধীনভাবে চলাফেরা করতে পারে।

২. ক্যামেরা সোইচ করা

BabylonJS এ একাধিক ক্যামেরা সক্রিয় করার জন্য scene.activeCamera প্রপার্টি ব্যবহার করা হয়। আপনি যেকোনো ক্যামেরাকে সক্রিয় করতে পারেন এবং দৃশ্যের ভিউ পরিবর্তন করতে পারেন।

উদাহরণ:

// প্রথম ক্যামেরা সেট করা
scene.activeCamera = camera1;

// দ্বিতীয় ক্যামেরা সেট করা
scene.activeCamera = camera2;

এটি ক্যামেরা সোইচ করার সহজ উপায়, যেখানে camera1 বা camera2 যে কোন একটি ক্যামেরা অ্যাক্টিভ হবে, এবং দৃশ্যের দৃষ্টিকোণ পরিবর্তিত হবে।

৩. ক্যামেরা সোইচ করার জন্য কীবোর্ড বা মাউস কন্ট্রোল ব্যবহার করা

আপনি ক্যামেরা সোইচ করার জন্য ইউজার ইন্টারফেস বা কীবোর্ড ইনপুটও ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ব্যবহারকারী যদি কোনো বিশেষ কী প্রেস করে, তাহলে ক্যামেরা পরিবর্তন হবে।

উদাহরণ:

window.addEventListener("keydown", function(evt) {
    if (evt.key === "1") {
        scene.activeCamera = camera1;  // ক্যামেরা 1 সক্রিয় হবে
    }
    if (evt.key === "2") {
        scene.activeCamera = camera2;  // ক্যামেরা 2 সক্রিয় হবে
    }
});

এখানে, ব্যবহারকারী যদি 1 কী প্রেস করে, ক্যামেরা 1 সক্রিয় হবে, এবং যদি 2 প্রেস করে, ক্যামেরা 2 সক্রিয় হবে।

৪. ক্যামেরার ভিউপোর্ট (Viewport) ব্যবহার

কখনও কখনও আপনি চান যে, একাধিক ক্যামেরার দৃশ্য একই সময় প্রদর্শিত হোক। এর জন্য viewport ব্যবহার করা হয়। একটি viewport নির্ধারণ করে আপনি প্রতিটি ক্যামেরার জন্য একটি নির্দিষ্ট অংশে দৃশ্য প্রদর্শন করতে পারেন।

উদাহরণ:

// প্রথম ক্যামেরা সম্পূর্ণ দৃশ্য প্রদর্শন করবে
camera1.viewport = new BABYLON.Viewport(0, 0, 1, 1); 

// দ্বিতীয় ক্যামেরা স্ক্রীনের একটি নির্দিষ্ট অংশে দৃশ্য প্রদর্শন করবে
camera2.viewport = new BABYLON.Viewport(0.5, 0, 0.5, 1);

এখানে, প্রথম ক্যামেরা পুরো স্ক্রীন জুড়ে দৃশ্য প্রদর্শন করবে, এবং দ্বিতীয় ক্যামেরা স্ক্রীনের ডান দিকে 50% অংশে দৃশ্য প্রদর্শন করবে।

৫. ক্যামেরার ট্রানজিশন (Transition) ইফেক্ট

কখনও কখনও আপনি চাইবেন ক্যামেরা সোইচ করার সময় একটি মসৃণ ট্রানজিশন বা অ্যানিমেশন তৈরি করতে। এর জন্য আপনি ক্যামেরার ফিল্ড অফ ভিউ (FOV), পজিশন বা টার্গেট পরিবর্তন করতে পারেন।

উদাহরণ:

// ক্যামেরার পজিশন পরিবর্তন করে ট্রানজিশন তৈরি করা
var targetPosition = new BABYLON.Vector3(0, 5, -10);
var animation = new BABYLON.Animation("cameraAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
var keyFrames = []; 

keyFrames.push({
    frame: 0,
    value: camera1.position
});

keyFrames.push({
    frame: 100,
    value: targetPosition
});

animation.setKeys(keyFrames);
camera1.animations.push(animation);
scene.beginAnimation(camera1, 0, 100, false);

এখানে, camera1 এর পজিশনটি 0 থেকে targetPosition পর্যন্ত মসৃণভাবে পরিবর্তিত হবে, একটি ট্রানজিশন প্রভাব তৈরি করবে।

সারাংশ

BabylonJS এ multi-camera ব্যবস্থাপনা সহজ এবং কার্যকরী। আপনি একাধিক ক্যামেরা তৈরি করতে পারেন এবং বিভিন্ন ক্যামেরার মধ্যে সোইচ করতে পারেন। ক্যামেরার ভিউপোর্ট ব্যবহার করে একাধিক ক্যামেরার দৃশ্য একই সময়ে প্রদর্শন করা সম্ভব, এবং কীবোর্ড বা মাউস ইনপুট ব্যবহার করে ক্যামেরা পরিবর্তন করা যায়। এছাড়া, ক্যামেরার ট্রানজিশন তৈরি করে মসৃণ পরিবর্তন নিশ্চিত করা সম্ভব। এই ফিচারগুলো 3D গেম বা অ্যাপ্লিকেশন ডিজাইন করার জন্য খুবই উপযোগী।

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 ব্যবহার করতে পারেন এবং সেই অনুযায়ী দৃশ্যের আঙ্গিক পরিবর্তন করতে পারেন। এছাড়া, ভিউপোর্টের আকার এবং অবস্থান নিয়ন্ত্রণ করে, আপনি আপনার গেম বা অ্যাপ্লিকেশনটিকে আরও ইন্টারঅ্যাক্টিভ এবং ব্যবহারকারী-বান্ধব করতে পারেন।

BabylonJS 3D গেম এবং অ্যাপ্লিকেশন তৈরি করতে একটি শক্তিশালী ইঞ্জিন। এই ইঞ্জিনে ক্যামেরার মাধ্যমে ব্যবহারকারীদের দৃশ্যে বিভিন্ন দৃষ্টিকোণ প্রদর্শন করা হয়। এর মধ্যে First-person (FP) ক্যামেরা এবং Third-person (TP) ক্যামেরা অত্যন্ত গুরুত্বপূর্ণ এবং জনপ্রিয়।

• First-person ক্যামেরা: এই ক্যামেরাতে ব্যবহারকারী ক্যামেরার দৃষ্টিকোণ থেকে দৃশ্য দেখতে পায়, অর্থাৎ ক্যামেরার অবস্থান ব্যবহারকারীর চরিত্রের মধ্যে থাকে এবং ক্যামেরা ব্যবহারের মাধ্যমে খেলোয়াড় পরিবেশের সাথে সরাসরি ইন্টারঅ্যাক্ট করতে পারে।
• Third-person ক্যামেরা: এই ক্যামেরাতে ব্যবহারকারী ক্যামেরা পিছনে রেখে তার চরিত্রকে দেখে, অর্থাৎ ক্যামেরা চরিত্রের পেছনে থাকে এবং ব্যবহারকারী তার চরিত্রকে সারা পরিবেশের মধ্যে পরিচালনা করতে পারে।

First-person ক্যামেরা

First-person ক্যামেরার মধ্যে, আপনি সাধারণত একটি UniversalCamera ব্যবহার করেন যা মাউস বা কীবোর্ড ইনপুটের মাধ্যমে ব্যবহারকারীর দৃষ্টিকোণ নিয়ন্ত্রণ করতে সাহায্য করে। এর মাধ্যমে ব্যবহারকারী দৃশ্যে পুরোপুরি এক হয়ে যায়।

First-person ক্যামেরা সেটআপ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS First-person Camera</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);

        // First-person ক্যামেরা তৈরি
        var camera = new BABYLON.UniversalCamera("FP_Camera", 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);
        box.position.z = 5;  // বক্সটিকে সামনে রাখা

        // দৃশ্য রেন্ডার করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

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

• UniversalCamera: এটি First-person ক্যামেরার জন্য ব্যবহৃত হয়। ক্যামেরার অবস্থান সাধারণত ব্যবহারকারীর চরিত্রের সাথে সম্পর্কিত।
• camera.attachControl(canvas, true): এই ফাংশনটি ক্যামেরা ইনপুট (মাউস বা কীবোর্ড) থেকে নিয়ন্ত্রণ গ্রহণ করতে সক্ষম করে।

এটি ব্যবহারকারীর দৃষ্টিকোণ সরাসরি পরিবেশে রাখে এবং তিনি চারপাশের দৃশ্য দেখতে পারেন এবং ইন্টারঅ্যাক্ট করতে পারেন।

Third-person ক্যামেরা

Third-person ক্যামেরার মধ্যে, ব্যবহারকারী চরিত্রের পিছনে বা কিছুটা দূরত্বে অবস্থান করে। এটি সাধারণত গেমের মতো অ্যাপ্লিকেশনে ব্যবহৃত হয় যেখানে ব্যবহারকারী তার চরিত্রকে নির্দেশনা দেয় এবং ক্যামেরা চরিত্রের পিছনে বা কাছাকাছি অবস্থান নেয়।

Third-person ক্যামেরা সেটআপ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS Third-person Camera</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);

        // ক্যামেরা তৈরি (Third-person ক্যামেরা)
        var camera = new BABYLON.FollowCamera("FollowCamera", BABYLON.Vector3.Zero(), scene);
        camera.radius = 10;  // ক্যামেরার দূরত্ব
        camera.heightOffset = 2;  // ক্যামেরার উচ্চতা
        camera.rotationOffset = 180;  // ক্যামেরার ঘূর্ণন
        camera.cameraAcceleration = 0.05;  // ক্যামেরার গতি
        camera.maxCameraSpeed = 10;  // সর্বোচ্চ গতি

        // আলোর উৎস তৈরি
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
        light.intensity = 0.7;

        // একটি বক্স তৈরি করা (এই বক্সটি ক্যামেরার লক্ষ্য)
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        box.position.y = 1;  // বক্সটিকে উপরে রাখা

        // ক্যামেরা বক্সটিকে অনুসরণ করবে
        camera.lockedTarget = box;

        // দৃশ্য রেন্ডার করা
        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

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

• FollowCamera: এটি Third-person ক্যামেরার জন্য ব্যবহৃত হয়। ক্যামেরা চরিত্রকে অনুসরণ করে এবং এর চারপাশে ঘোরে।
• camera.radius: ক্যামেরার চরিত্র থেকে দূরত্ব নির্ধারণ করে।
• camera.lockedTarget = box: ক্যামেরা বক্সটি (অথবা অন্য কোনো মেশ) অনুসরণ করবে। এই উদাহরণে, ক্যামেরা বক্সটিকে লক্ষ্য করে।

এটি ব্যবহারকারীর চরিত্র বা অবজেক্টকে অনুসরণ করে এবং ব্যবহারকারী তার চারপাশের পরিবেশ দেখতে এবং ক্যামেরার অবস্থান নিয়ন্ত্রণ করতে পারেন।

First-person এবং Third-person ক্যামেরার মধ্যে পার্থক্য

• First-person ক্যামেরা: ক্যামেরা ব্যবহারকারীর চরিত্রের মধ্যে থাকে এবং ব্যবহারকারী দৃশ্যের মধ্যে পূর্ণভাবে উপস্থিত থাকে। এটি বিশেষভাবে শুটার গেম বা মুভমেন্ট সিমুলেশন জন্য উপযুক্ত।
• Third-person ক্যামেরা: ক্যামেরা ব্যবহারকারীর চরিত্রের পেছনে থাকে এবং ব্যবহারকারী চরিত্রটি পরিচালনা করে। এটি অ্যাডভেঞ্চার গেম বা RPG গেমের জন্য উপযুক্ত যেখানে ব্যবহারকারী তার চরিত্রকে বিভিন্নভাবে পরিচালনা করে।

সারাংশ

BabylonJS এ First-person এবং Third-person ক্যামেরা সিস্টেম খুবই সহজে সেটআপ করা যায়। First-person ক্যামেরা সরাসরি ব্যবহারকারীর দৃষ্টিকোণ থেকে দৃশ্য দেখায়, যেখানে Third-person ক্যামেরা ব্যবহারকারীর চরিত্রকে পিছন থেকে অনুসরণ করে। এই ক্যামেরা সিস্টেমগুলোর মাধ্যমে 3D গেম বা অ্যাপ্লিকেশনগুলোর ইন্টারঅ্যাকশন এবং অভিজ্ঞতা আরও উন্নত করা সম্ভব।

BabylonJS-এ ক্যামেরা একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান, যা 3D দৃশ্যের ভিতরে ব্যবহারকারীর দৃষ্টিভঙ্গি নিয়ন্ত্রণ করে। ডিফল্টভাবে, BabylonJS বিভিন্ন ধরনের ক্যামেরা প্রোভাইড করে, যেমন ArcRotateCamera, UniversalCamera, এবং FreeCamera। তবে, আপনি ক্যামেরার কন্ট্রোল এবং আচরণ কাস্টমাইজ করতে পারেন, যাতে ব্যবহারকারীদের জন্য আরও স্বাচ্ছন্দ্যময় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি হয়।

এই টিউটোরিয়ালে আমরা ক্যামেরার কন্ট্রোল কাস্টমাইজ করার বিভিন্ন পদ্ধতি আলোচনা করব।

১. ক্যামেরার ধরন

১.১ ArcRotateCamera

ArcRotateCamera হল একটি ক্যামেরা, যা দৃশ্যের চারপাশে একটি নির্দিষ্ট পয়েন্টের দিকে ফোকাস করতে সক্ষম। এটি সাধারণত ব্যবহারকারীর ইনপুট (মাউস বা টাচ) এর মাধ্যমে ঘুরানো হয়।

var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

১.২ UniversalCamera

UniversalCamera হল একটি ক্যামেরা যা 3D দৃশ্যে চলাচলের জন্য ব্যবহার করা হয়, যা প্রথম ব্যক্তি (First-Person) বা তৃতীয় ব্যক্তি (Third-Person) মত অনুভূতি দিতে সক্ষম।

var camera = new BABYLON.UniversalCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.attachControl(canvas, true);

১.৩ FreeCamera

FreeCamera ব্যবহারকারীকে 3D স্পেসের মধ্যে অবাধে চলাচল করতে দেয়। এটি বিশেষ করে গেম বা সিমুলেশনে কাজে আসে।

var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.attachControl(canvas, true);

২. ক্যামেরা কন্ট্রোল কাস্টমাইজেশন

২.১ মাউস ইনপুট কাস্টমাইজ করা

BabylonJS তে মাউস ইনপুট ব্যবহার করে ক্যামেরার প্যান, রোটেট বা জুম কন্ট্রোল করা যায়। আপনি এই ইনপুটগুলিকে কাস্টমাইজ করতে পারেন, যেমন: মাউসের বাটন বা মুভমেন্ট স্পীড নিয়ন্ত্রণ।

রোটেশন স্পিড কাস্টমাইজ করা:

camera.panningSensibility = 1000; // ক্যামেরার প্যানিং সেন্সিটিভিটি নির্ধারণ
camera.angularSensibilityX = 1000; // X-অক্ষের জন্য সেন্সিটিভিটি
camera.angularSensibilityY = 1000; // Y-অক্ষের জন্য সেন্সিটিভিটি

ক্যামেরা মুভমেন্ট স্পিড কাস্টমাইজ করা:

camera.speed = 1.5; // ক্যামেরার চলাচল গতি
camera.inertia = 0.9; // ইনটার্ক্টিভ গতি

২.২ কী-বোর্ড ইনপুট কাস্টমাইজ করা

ক্যামেরার চলাচল বা জুম করতে আপনি কী-বোর্ডের কন্ট্রোল ব্যবহার করতে পারেন। BabylonJS তে ক্যামেরা কাস্টম কী-বোর্ড ইনপুট সেটআপ করতে নিম্নলিখিত পদ্ধতি ব্যবহার করতে পারেন:

scene.onKeyboardObservable.add(function (kbInfo) {
    if (kbInfo.type === BABYLON.KeyboardEventTypes.KEYDOWN) {
        if (kbInfo.event.key === "w") {
            camera.position.z += 0.1; // W কী দিয়ে ক্যামেরা সামনে নিয়ে আসা
        }
        if (kbInfo.event.key === "s") {
            camera.position.z -= 0.1; // S কী দিয়ে ক্যামেরা পেছনে নিয়ে আসা
        }
    }
});

২.৩ মাউস প্যান কাস্টমাইজেশন

আপনি মাউস প্যানিং ফাংশন কাস্টমাইজ করতে পারেন, যেমন কী-বোর্ড ব্যবহার করে ক্যামেরা প্যানিং করানো অথবা বিশেষ ধরনের ইনপুট (যেমন টাচ স্ক্রীন) ব্যবহার করে প্যানিং নিয়ন্ত্রণ করা।

camera.panningSensibility = 500;  // মাউস প্যানিং সেন্সিটিভিটি বাড়ানো

২.৪ জুম কাস্টমাইজেশন

জুম ইন এবং আউট কন্ট্রোল করার জন্য, আপনি wheelDeltaPercentage বা zoomOnPointer কাস্টমাইজ করতে পারেন।

camera.wheelPrecision = 50; // মাউস হুইল দিয়ে জুম করার জন্য সেন্সিটিভিটি নিয়ন্ত্রণ
camera.fov = 0.8; // ক্যামেরার ফিল্ড অফ ভিউ নিয়ন্ত্রণ

৩. ক্যামেরা সীমা নির্ধারণ

ক্যামেরা সীমা নির্ধারণ করা হলে, আপনি কন্ট্রোল সীমাবদ্ধ করে রাখতে পারবেন। যেমন, ক্যামেরা দৃশ্যের বাইরে চলে যাওয়ার আগে সীমা নির্ধারণ করা।

camera.lowerBetaLimit = 0.2; // ক্যামেরার কম বেটা (Y-axis) সীমা
camera.upperBetaLimit = Math.PI / 1.5; // ক্যামেরার উপরের বেটা (Y-axis) সীমা
camera.lowerRadiusLimit = 5; // ক্যামেরার কম রেডিয়াস সীমা
camera.upperRadiusLimit = 50; // ক্যামেরার উপরের রেডিয়াস সীমা

৪. ক্যামেরার চিত্তাকর্ষক আচরণ

৪.১ ক্যামেরার মুভমেন্ট লজিক পরিবর্তন

কিছু সময়, ক্যামেরা মুভমেন্টের জন্য আপনি বিশেষ ধরনের আচরণ তৈরি করতে চাইবেন, যেমন ক্যামেরা কোনো নির্দিষ্ট অবস্থানে বা ভিউ-এ পৌঁছানোর জন্য ইন্টারপোলেশন।

var target = new BABYLON.Vector3(0, 5, 0); // লক্ষ্যবস্তু পয়েন্ট
camera.setTarget(target); // ক্যামেরাকে লক্ষ্যবস্তুতে ফোকাস করা

৪.২ সেকেন্ডারি ক্যামেরা ব্যবহার

আপনি একাধিক ক্যামেরা ব্যবহার করতে পারেন এবং তাদের মধ্যে স্যুইচ করতে পারেন। সাধারণত, একটি সেকেন্ডারি ক্যামেরা ব্যবহার করা হয় যখন আপনি একটি ভিন্ন ভিউ বা কার্যাবলী দেখাতে চান।

var secondaryCamera = new BABYLON.ArcRotateCamera("secondaryCamera", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
scene.activeCameras.push(secondaryCamera); // সেকেন্ডারি ক্যামেরা অ্যাকটিভ করা

৫. ক্যামেরার অ্যানিমেশন

BabylonJS তে ক্যামেরার অবস্থান বা দৃষ্টিভঙ্গি অ্যানিমেট করা যেতে পারে, যেমন আপনি ক্যামেরাকে নির্দিষ্ট পথে বা কোনো বিশেষ অক্ষরের চারপাশে ঘোরাতে পারেন।

var animation = new BABYLON.Animation("cameraAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
var keyFrames = [];

keyFrames.push({
    frame: 0,
    value: camera.position
});
keyFrames.push({
    frame: 100,
    value: new BABYLON.Vector3(0, 10, 0)  // ক্যামেরার নতুন অবস্থান
});

animation.setKeys(keyFrames);
camera.animations.push(animation);
scene.beginAnimation(camera, 0, 100, true);

সারাংশ

• ক্যামেরা কাস্টমাইজেশন: BabylonJS-এ বিভিন্ন ধরনের ক্যামেরা ব্যবহার করে 3D দৃশ্যের ভিতরে ক্যামেরার দৃষ্টিভঙ্গি এবং চলাচল কাস্টমাইজ করা যায়।
• মাউস, কী-বোর্ড, এবং জুম কন্ট্রোল: মাউস, কী-বোর্ড ইনপুট এবং জুমিং স্পিড কাস্টমাইজ করা সম্ভব।
• ক্যামেরার সীমা এবং আচরণ: ক্যামেরার প্যান, রোটেশন এবং রেডিয়াস সীমা নির্ধারণ করা যেতে পারে।
• অ্যানিমেশন: ক্যামেরার অবস্থান বা দৃষ্টিভঙ্গি অ্যানিমেট করে আরো চিত্তাকর্ষক অভিজ্ঞতা তৈরি করা যায়।

এই কাস্টমাইজেশনগুলির মাধ্যমে, আপনি আপনার 3D দৃশ্যের ক্যামেরা কন্ট্রোলকে আরও ইন্টারঅ্যাকটিভ এবং প্রভাবশালী করতে পারবেন।