Camera এবং Lighting গাইড ও নোট

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

ক্যামেরা (Camera) এর ভূমিকা

ক্যামেরা কি?

ক্যামেরা 3D দৃশ্যের মধ্যে সেই উপাদান যা ব্যবহারকারীর দৃষ্টিভঙ্গি (viewpoint) নির্ধারণ করে। BabylonJS বিভিন্ন ধরনের ক্যামেরা প্রদান করে যা ব্যবহারকারীদের ভিন্ন ভিন্ন দৃষ্টিকোণ থেকে 3D দৃশ্য দেখার সুযোগ দেয়।

ক্যামেরা টাইপসমূহ

১. ArcRotateCamera

ArcRotateCamera হল সবচেয়ে সাধারণ এবং জনপ্রিয় ক্যামেরা যা 3D দৃশ্যের চারপাশে ঘুরতে সাহায্য করে। এটি প্রধানত "অর্কিটাল" বা "রোটেট" ক্যামেরা হিসেবে পরিচিত, যেখানে ব্যবহারকারী দৃশ্যের চারপাশে ঘুরে দেখতে পারেন।

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

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

• "camera1": ক্যামেরার নাম
• Math.PI / 2: ক্যামেরার প্রাথমিক এঙ্গেল (এই কোডে 90°)
• 10: ক্যামেরার দূরত্ব (ক্যামেরা অবজেক্ট থেকে 10 ইউনিট)
• BABYLON.Vector3.Zero(): ক্যামেরার লক্ষ্যবস্তু (এখানে 3D দৃশ্যের কেন্দ্র)

২. FreeCamera

FreeCamera ব্যবহারকারীকে একটি ফ্রি মুভিং ক্যামেরা দেয় যা শুধুমাত্র ওয়াস বা আন্ডারগ্রাউন্ড ভিউ দেখানোর জন্য উপযোগী। এটি ব্যবহারকারীকে ক্যামেরা সরানোর পূর্ণ স্বাধীনতা প্রদান করে।

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

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

• ক্যামেরা 3D দৃশ্যের 0, 5, -10 পয়েন্ট থেকে শুরু হয়।
• camera.setTarget(BABYLON.Vector3.Zero()): ক্যামেরার লক্ষ্যবস্তু দৃশ্যের কেন্দ্র।

৩. UniversalCamera

UniversalCamera হলো FreeCamera এবং ArcRotateCamera এর মধ্যে একটি মিশ্রণ। এটি ব্যবহারকারীর অবজেক্ট বা দৃশ্যের চারপাশে ঘুরতে এবং ফ্রি মুভমেন্টে সহায়তা করে।

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

আলোকসজ্জা (Lighting) এর ভূমিকা

আলোকসজ্জা (Lighting) কি?

আলো বা লাইট 3D দৃশ্যের বর্ণনা এবং অনুভূতি নির্ধারণে প্রধান ভূমিকা পালন করে। এটি শ্যাডো, রিফ্লেকশন, এবং অবজেক্টের মুড তৈরিতে সহায়ক। BabylonJS বিভিন্ন ধরনের আলোর উৎস প্রদান করে, যা 3D দৃশ্যে ভিন্ন ভিন্ন আলোছায়ার প্রভাব সৃষ্টি করে।

আলোর টাইপসমূহ

১. HemisphericLight

HemisphericLight একটি সাধারণ আলোর উৎস যা একটি উপরের দিক থেকে আলো সরবরাহ করে। এটি 3D দৃশ্যে নরম এবং সমানভাবে ছড়িয়ে পড়া আলো তৈরি করে।

var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
light.intensity = 0.7;  // আলোয়ের ইনটেনসিটি (শক্তি)

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

• BABYLON.Vector3.Up(): আলো উপরের দিক থেকে আসবে (Up vector)
• light.intensity: আলোয়ের শক্তি নিয়ন্ত্রণ করা হয়।

২. PointLight

PointLight একটি পয়েন্ট থেকে আলো ছড়িয়ে দেয়, এটি সাধারণত একটি বাল্ব বা লাইট বাল্বের মতো আচরণ করে। এটি 3D দৃশ্যে একটা পয়েন্টের চারপাশে আলো তৈরি করে।

var light = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 5, 0), scene);
light.intensity = 1.0;

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

• new BABYLON.Vector3(0, 5, 0): পয়েন্টলাইটের অবস্থান।
• light.intensity: আলোয়ের শক্তি।

৩. DirectionalLight

DirectionalLight একটি নির্দিষ্ট দিক থেকে আলো সরবরাহ করে, এটি সূর্যের আলো বা অন্য কোন দূরবর্তী আলোর মতো। এটি দৃশ্যে একটি নির্দিষ্ট দিক থেকে আলো পাঠায়।

var light = new BABYLON.DirectionalLight("directionalLight", new BABYLON.Vector3(0, -1, 0), scene);
light.intensity = 0.8;

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

• new BABYLON.Vector3(0, -1, 0): আলোর দিক। এখানে আলোর উৎস নীচে (negative Y axis) থেকে আসছে।
• light.intensity: আলোয়ের শক্তি।

৪. SpotLight

SpotLight একটি কনিং কন কর্ণার বা স্নাতু্দ্রাল আলোর মতো কাজ করে, যেখানে আলো একটি নির্দিষ্ট কনসেনট্রেটেড অঞ্চল সৃষ্টি করে।

var light = new BABYLON.SpotLight("spotLight", new BABYLON.Vector3(0, 5, 0), new BABYLON.Vector3(0, -1, 0), Math.PI / 4, 2, scene);
light.intensity = 1.0;

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

• Math.PI / 4: আলোর কনসেনট্রেশন কোণ।
• new BABYLON.Vector3(0, -1, 0): আলোর দিক।

ক্যামেরা এবং লাইট সিস্টেমের মাধ্যমে একটি সিম্পল দৃশ্য তৈরি

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

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

        // HemisphericLight তৈরি
        var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
        light.intensity = 0.7;

        // বক্স তৈরি
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

        engine.runRenderLoop(function () {
            scene.render();
        });

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

সারাংশ

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

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

FreeCamera

ব্যাখ্যা:

FreeCamera হল একটি সাধারণ ক্যামেরা যা 3D দৃশ্যে কোনো নির্দিষ্ট পয়েন্টে ফোকাস না করে স্বাধীনভাবে চলতে পারে। এটি গেম বা সিমুলেশন যেখানে ক্যামেরার ফ্রি মুভমেন্ট প্রয়োজন, এমন ক্ষেত্রে উপযোগী।

বৈশিষ্ট্য:

• ব্যবহারকারী ক্যামেরাকে স্বাধীনভাবে 3D দৃশ্যে নড়াচড়া করতে পারে।
• সাধারণভাবে WASD কী দিয়ে ক্যামেরা চলানো যায় (বাইরে থেকে ব্যবহৃত কিবোর্ড ইনপুটের মাধ্যমে)।
• এই ক্যামেরা কোনো অবজেক্টের দিকে লক করা থাকে না, ফলে এটি পুরো দৃশ্যের মধ্যে যেতে পারে।

কোড উদাহরণ:

var camera = new BABYLON.FreeCamera("freeCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero()); // ক্যামেরা লক্ষ্য করবে দৃশ্যের কেন্দ্রকে
camera.attachControl(canvas, true); // মাউস এবং কিবোর্ডের মাধ্যমে ক্যামেরা নিয়ন্ত্রণ

এখানে FreeCamera এর setTarget মেথড দিয়ে ক্যামেরার লক্ষ্য স্থির করা হয়েছে, যাতে ক্যামেরা 3D দৃশ্যের কেন্দ্রকে লক্ষ্য করে চলে।

ArcRotateCamera

ব্যাখ্যা:

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

বৈশিষ্ট্য:

• ক্যামেরা নির্দিষ্ট একটি পয়েন্টের চারপাশে ঘুরে।
• ক্যামেরার অবস্থান এবং কোণ ম্যানুয়ালি নিয়ন্ত্রণ করা যায় (যেমন, উপরের থেকে নিচে বা ডান থেকে বামে)।
• সাধারণত ব্যবহারকারীর মাউস বা টাচপ্যাডের মাধ্যমে নিয়ন্ত্রণ করা হয় (যেমন ইনপুট হিসেবে ড্র্যাগ করা)।

কোড উদাহরণ:

var camera = new BABYLON.ArcRotateCamera("arcCamera", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true); // মাউস বা টাচপ্যাডের মাধ্যমে ক্যামেরা নিয়ন্ত্রণ

এখানে, ArcRotateCamera ক্যামেরার কোণ এবং দূরত্ব কনফিগার করা হয়েছে এবং দৃশ্যের কেন্দ্র BABYLON.Vector3.Zero() পয়েন্টে স্থির রাখা হয়েছে।

FollowCamera

ব্যাখ্যা:

FollowCamera হল একটি বিশেষ ধরনের ক্যামেরা যা একটি নির্দিষ্ট অবজেক্টকে অনুসরণ করে। এটি সাধারণত গেমস বা সিমুলেশন অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়, যেখানে ক্যামেরা একজন চরিত্র বা অবজেক্টের পেছনে চলতে থাকে, যেমন 3D গেমে একটি গাড়ি বা চরিত্রের পেছনে ক্যামেরা।

বৈশিষ্ট্য:

• ক্যামেরা একটি নির্দিষ্ট অবজেক্টকে অনুসরণ করে, সাধারণত 3D চরিত্র বা অন্যান্য ডাইনামিক অবজেক্ট।
• ক্যামেরা অবজেক্টটির গতি এবং অবস্থান অনুসরণ করতে পারে।
• সাধারণত ব্যবহারকারীর ক্যামেরা নিয়ন্ত্রণের জন্য অনেক কম ইন্টারঅ্যাকশন প্রয়োজন হয়।

কোড উদাহরণ:

var camera = new BABYLON.FollowCamera("followCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.lockedTarget = box; // ক্যামেরা 'box' অবজেক্টটি অনুসরণ করবে
camera.radius = 10; // ক্যামেরার দূরত্ব সেট করা
camera.heightOffset = 4; // ক্যামেরার উচ্চতা
camera.rotationOffset = 0; // ক্যামেরার রোটেশন
camera.attachControl(canvas, true);

এখানে, FollowCamera তৈরি করা হয়েছে এবং lockedTarget সেট করা হয়েছে, যাতে ক্যামেরাটি একটি নির্দিষ্ট অবজেক্ট (যেমন box) অনুসরণ করে।

ক্যামেরা বৈশিষ্ট্য তুলনা

সারাংশ

BabylonJS-এ তিনটি প্রধান ক্যামেরার ধরণ রয়েছে: FreeCamera, ArcRotateCamera, এবং FollowCamera। প্রতিটি ক্যামেরা আলাদা আলাদা পরিস্থিতিতে ব্যবহৃত হয়।

• FreeCamera ব্যবহারকারীকে স্বাধীনভাবে 3D দৃশ্যে চলতে দেয়।
• ArcRotateCamera ব্যবহারকারীর কাছে এক পয়েন্টকে কেন্দ্র করে দৃশ্যটি ঘুরে দেখানোর সুবিধা দেয়।
• FollowCamera একটি নির্দিষ্ট অবজেক্টের পেছনে চলতে থাকে, যা গেম ডেভেলপমেন্টে বিশেষভাবে কার্যকর।

আপনার প্রজেক্টের চাহিদা অনুযায়ী ক্যামেরা নির্বাচন করে 3D দৃশ্যে ভালো অভিজ্ঞতা তৈরি করতে পারবেন।

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

ক্যামেরার পজিশন সেট করা

১. ক্যামেরার পজিশন নির্ধারণ

ক্যামেরার পজিশন নির্ধারণ করতে, আমরা BABYLON.Vector3 ক্লাস ব্যবহার করি, যা 3D স্পেসে একটি পয়েন্ট বা ভেক্টর তৈরি করে। ক্যামেরার পজিশন সেট করার জন্য camera.position প্রপার্টি ব্যবহার করা হয়।

উদাহরণ:

var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.position = new BABYLON.Vector3(5, 5, -10);  // ক্যামেরার পজিশন (X, Y, Z)
camera.attachControl(canvas, true);

এখানে:

• camera.position: ক্যামেরার পজিশন নির্ধারণ করা হচ্ছে। Vector3(5, 5, -10) মানে ক্যামেরা X, Y, Z অক্ষের উপর (5, 5, -10) পজিশনে থাকবে।
• BABYLON.Vector3.Zero(): ক্যামেরার লক্ষ্যস্থল (target) হিসেবে 3D দৃশ্যে (0, 0, 0) পয়েন্ট বা জিরো পজিশন নির্ধারণ করা হয়েছে।

ক্যামেরার রোটেশন কনফিগার করা

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

ক্যামেরার রোটেশন (rotation) নির্ধারণ করার জন্য camera.rotation প্রপার্টি ব্যবহার করা হয়। এটি রেডিয়ান পদ্ধতিতে মান গ্রহণ করে। আপনি X, Y, এবং Z অক্ষের চারপাশে ক্যামেরাকে ঘোরাতে পারেন।

উদাহরণ:

var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.rotation = new BABYLON.Vector3(Math.PI / 4, Math.PI / 4, 0);  // ক্যামেরার রোটেশন
camera.attachControl(canvas, true);

এখানে:

• camera.rotation: ক্যামেরার রোটেশন নির্ধারণ করা হচ্ছে। এখানে Vector3(Math.PI / 4, Math.PI / 4, 0) দিয়ে ক্যামেরা X ও Y অক্ষের চারপাশে 45° (π/4 রেডিয়ান) ঘুরানো হচ্ছে।

ক্যামেরার মুভমেন্ট কনফিগার করা

৩. ক্যামেরার মুভমেন্ট (পজিশন এবং রোটেশন) কাস্টমাইজ করা

ক্যামেরার মুভমেন্ট বা পজিশন পরিবর্তন করার জন্য বিভিন্ন ধরনের কন্ট্রোল ব্যবহার করা যেতে পারে, যেমন:

• ArcRotateCamera: যা 3D দৃশ্যের চারপাশে ঘুরিয়ে দেখার জন্য ব্যবহৃত হয়।
• FreeCamera: যা ফ্রি মুভমেন্টে ক্যামেরাকে 3D স্পেসে চলতে সাহায্য করে।

ArcRotateCamera:

ArcRotateCamera ব্যবহার করার মাধ্যমে আপনি ক্যামেরাকে একটি নির্দিষ্ট পয়েন্টের চারপাশে ঘুরাতে পারেন, যেমন:

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

এখানে, ArcRotateCamera ক্যামেরা ব্যবহারকারীকে দৃশ্যের চারপাশে ঘুরানোর সুবিধা দেয়। attachControl ব্যবহার করে মাউস বা কীবোর্ডের মাধ্যমে ক্যামেরা কন্ট্রোল করা যায়।

FreeCamera:

FreeCamera ব্যবহার করলে ক্যামেরা 3D স্পেসে স্বাধীনভাবে মুভ করতে পারে, যেমন FPS গেমে দেখা যায়।

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

এখানে:

• FreeCamera: ক্যামেরা মুক্তভাবে চলতে সক্ষম, এবং এটি setTarget দ্বারা নির্দিষ্ট লক্ষ্য পয়েন্টের দিকে তাকাবে।
• camera.attachControl(canvas, true): এটি মাউস এবং কীবোর্ডের সাহায্যে ক্যামেরা কন্ট্রোল সক্ষম করে।

ক্যামেরার ফিল্ড অব ভিউ (Field of View, FOV)

৪. ক্যামেরার ফিল্ড অব ভিউ কনফিগার করা

ক্যামেরার ফিল্ড অব ভিউ (FOV) পরিবর্তন করা যায়। এটি ক্যামেরার দৃশ্যের চওড়া বা সংকীর্ণ হওয়া নির্ধারণ করে। FOV মান পরিবর্তন করে, আপনি ক্যামেরার দৃষ্টিকোণ পরিবর্তন করতে পারেন।

camera.fov = 0.8; // ফিল্ড অব ভিউ পরিবর্তন করা

এখানে, camera.fov 0 থেকে 1 পর্যন্ত মান গ্রহণ করে, যা ক্যামেরার দৃশ্যের চওড়া বা সংকীর্ণতা নির্ধারণ করে। ছোট মানে ক্যামেরার দৃশ্য সংকীর্ণ হবে, বড় মানে চওড়া হবে।

ক্যামেরা মুভমেন্টের জন্য কীবোর্ড ও মাউস কন্ট্রোল

৫. কীবোর্ড ও মাউস কন্ট্রোল যুক্ত করা

BabylonJS-এ ক্যামেরার মুভমেন্ট কীবোর্ড বা মাউসের মাধ্যমে কন্ট্রোল করা যেতে পারে। attachControl মেথড ব্যবহার করে আপনি এই কন্ট্রোল যুক্ত করতে পারেন।

var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);  // কীবোর্ড এবং মাউস কন্ট্রোল

এখানে, camera.attachControl(canvas, true) ক্যামেরাকে মাউস এবং কীবোর্ডের সাহায্যে নিয়ন্ত্রণ করার সুযোগ দেয়।

সারাংশ

• ক্যামেরার পজিশন: camera.position দিয়ে ক্যামেরার অবস্থান নির্ধারণ করা হয়।
• ক্যামেরার রোটেশন: camera.rotation দিয়ে ক্যামেরার রোটেশন কনফিগার করা হয়, যাতে আপনি ক্যামেরাকে নির্দিষ্ট অক্ষের চারপাশে ঘোরাতে পারেন।
• ক্যামেরার মুভমেন্ট: ArcRotateCamera ও FreeCamera ব্যবহার করে ক্যামেরার মুভমেন্ট কাস্টমাইজ করা যায়।
• কীবোর্ড ও মাউস কন্ট্রোল: attachControl ব্যবহার করে ক্যামেরাকে মাউস ও কীবোর্ডের মাধ্যমে নিয়ন্ত্রণ করা যায়।

এই সব কনফিগারেশন দিয়ে আপনি আপনার 3D দৃশ্যের ক্যামেরাকে খুব সহজেই কাস্টমাইজ করতে পারবেন, যা ব্যবহারকারীর অভিজ্ঞতা অনেক উন্নত করবে।

BabylonJS একটি শক্তিশালী 3D গ্রাফিক্স ইঞ্জিন, যা বিভিন্ন ধরনের লাইট সাপোর্ট করে, যা 3D দৃশ্যে আলোর প্রভাব সৃষ্টি করতে সাহায্য করে। লাইট সিস্টেম ব্যবহার করে, আপনি আপনার দৃশ্যকে আরও জীবন্ত এবং রিয়ালিস্টিক করতে পারেন। এই গাইডে আমরা HemisphericLight, PointLight, এবং DirectionalLight এই তিন ধরনের লাইটের ব্যবহারের উদাহরণ দেখব।

১. HemisphericLight

HemisphericLight কি?

HemisphericLight একটি বিশেষ ধরনের আলো, যা আকাশ এবং পৃথিবী থেকে আসা আলোর সমন্বয়ে তৈরি হয়। এটি সাধারণত একটি হালকা আলো প্রভাব তৈরি করতে ব্যবহৃত হয় এবং এটি সাধারণত স্কাই লাইটের মতো কাজ করে। এটি বেসিকভাবে একটি উপরের এবং নিচের আলোর উৎস তৈরি করে, যা দৃশ্যের আলো এবং ছায়া তৈরি করতে সাহায্য করে।

ব্যবহার:

// HemisphericLight তৈরি করা
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

// আলোর রঙ এবং শক্তি নির্ধারণ
light.diffuse = new BABYLON.Color3(1, 1, 1);  // সাদা আলো
light.specular = new BABYLON.Color3(0.5, 0.5, 0.5);  // ধূসর স্পেকুলার
light.groundColor = new BABYLON.Color3(0.2, 0.2, 0.2);  // পৃথিবী রঙ

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

• HemisphericLight: এটি একটি হালকা আলো তৈরি করে যা উপরের এবং নিচের দিকে আলোকিত করে।
• diffuse: এটি আলোর প্রধান রঙ নির্ধারণ করে।
• specular: এটি আলোর প্রতিফলন বা স্পেকুলার রঙ নির্ধারণ করে।
• groundColor: এটি পৃথিবী থেকে প্রতিফলিত আলো নির্ধারণ করে।

HemisphericLight এর বৈশিষ্ট্য:

• সাধারণত একটি হালকা এবং নরম আলো তৈরি করে।
• সূর্য বা আকাশের আলোকে সিমুলেট করতে ব্যবহৃত হয়।
• কোনো নির্দিষ্ট দিক থেকে আলো আসতে বাধ্য নয়, এটি সমগ্র দৃশ্যকে আলোকিত করতে পারে।

২. PointLight

PointLight কি?

PointLight একটি পয়েন্ট সাপোর্ট করা আলোর উৎস, যা এক জায়গা থেকে চারদিকে ছড়িয়ে পড়ে, যেমন একটি বাল্বের আলো। এটি একটি ছোট উৎস থেকে বের হয়ে সব দিকে আলো পাঠায়। এটি ব্যবহৃত হয় সুনির্দিষ্ট একটি জায়গায় আলো প্রদান করতে।

ব্যবহার:

// PointLight তৈরি করা
var light = new BABYLON.PointLight("pointLight", BABYLON.Vector3.Zero(), scene);

// আলোর রঙ এবং শক্তি নির্ধারণ
light.diffuse = new BABYLON.Color3(1, 1, 0);  // হলুদ আলো
light.intensity = 0.7;  // আলোর শক্তি

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

• PointLight: এটি এক স্থান থেকে চারদিকে আলো ছড়িয়ে দেয়। প্রথম প্যারামিটার হিসাবে আলোর নাম এবং দ্বিতীয় প্যারামিটার হিসেবে আলো যেখানে অবস্থিত সেই ভেক্টর দেওয়া হয় (এখানে BABYLON.Vector3.Zero() মানে (0, 0, 0) বা দৃশ্যের কেন্দ্র)।
• diffuse: আলো রঙ নির্ধারণ করে। এখানে হলুদ রঙ দেওয়া হয়েছে।
• intensity: আলোর শক্তি নির্ধারণ করে, যা আলো কতটা উজ্জ্বল হবে তা নিয়ন্ত্রণ করে।

PointLight এর বৈশিষ্ট্য:

• আলোর উৎস একটি নির্দিষ্ট অবস্থানে থাকে।
• আলো চারদিকে সমানভাবে ছড়িয়ে পড়ে।
• ছোট এলাকা আলোকিত করতে ব্যবহৃত হয়, যেমন ঘরের আলো বা পথের আলো।

৩. DirectionalLight

DirectionalLight কি?

DirectionalLight একটি দিকনির্দেশিত আলো, যা একটি নির্দিষ্ট দিক থেকে আসে এবং সমস্ত দৃশ্যে সমানভাবে পৌঁছে যায়। এটি প্রধানত সূর্যের আলো বা বড় আলোর উৎসের মতো কাজ করে, যেখানে আলো একটি নির্দিষ্ট দিক থেকে আসে এবং দৃশ্যের পুরো অংশ আলোকিত করে।

ব্যবহার:

// DirectionalLight তৈরি করা
var light = new BABYLON.DirectionalLight("directionalLight", BABYLON.Vector3.Down(), scene);

// আলোর রঙ এবং শক্তি নির্ধারণ
light.diffuse = new BABYLON.Color3(1, 1, 1);  // সাদা আলো
light.specular = new BABYLON.Color3(0.5, 0.5, 0.5);  // ধূসর স্পেকুলার
light.intensity = 1;  // আলোর শক্তি

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

• DirectionalLight: এই আলো নির্দিষ্ট একটি দিক থেকে আসে। দ্বিতীয় প্যারামিটার হিসেবে BABYLON.Vector3.Down() দেওয়া হয়েছে, যা নির্দেশ করে যে আলো আকাশ থেকে নিচে আসবে।
• diffuse: আলো রঙ নির্ধারণ করে। এখানে সাদা আলো দেওয়া হয়েছে।
• specular: এটি প্রতিফলিত আলো নির্ধারণ করে।
• intensity: আলোর শক্তি, যা দৃশ্যের উজ্জ্বলতা নিয়ন্ত্রণ করে।

DirectionalLight এর বৈশিষ্ট্য:

• এটি একটি নির্দিষ্ট দিক থেকে আলোর রশ্মি পাঠায়।
• আলো সারা দৃশ্যে একরকমভাবে ছড়িয়ে পড়ে।
• এটি প্রধানত বড় আকারের আলো উৎস, যেমন সূর্য বা মেঘে ঢাকা আলো হিসেবে ব্যবহৃত হয়।

সারাংশ

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

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

Shadows (ছায়া) এবং Real-time Lighting (রিয়েল-টাইম আলোকসজ্জা) হল 3D গ্রাফিক্সের দুটি গুরুত্বপূর্ণ উপাদান যা দৃশ্যের বাস্তবতা এবং গভীরতা বৃদ্ধি করতে সাহায্য করে। BabylonJS এর মাধ্যমে আপনি সিমুলেটেড শেডো এবং আলোকসজ্জা ব্যবহার করে 3D দৃশ্যগুলোকে আরও জীবন্ত এবং ইন্টারঅ্যাক্টিভ করতে পারেন। এই গাইডে আমরা দেখব কীভাবে Shadows এবং Real-time Lighting তৈরি করা যায়।

১. Shadows (ছায়া)

Shadows কী?

Shadows হল আলোর অবতরণ এবং অবজেক্টের মধ্যে বাধা সৃষ্টি করে একটি দৃশ্যের অংশ হিসেবে ছায়া তৈরি করা। 3D দৃশ্যে ছায়া আলোর প্রভাবে তৈরি হয় এবং এটি দৃশ্যকে আরো বাস্তবসম্মত ও ডাইনামিক করে তোলে। BabylonJS এ, আপনি বিভিন্ন ধরনের শেডো তৈরি করতে পারেন যেমন shadow maps এবং soft shadows।

Shadows যোগ করা:

উদাহরণ:

// 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);

// আলোর উৎস তৈরি করা
var light = new BABYLON.DirectionalLight("light1", BABYLON.Vector3.Down(), scene);

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// ছায়া তৈরি করার জন্য ShadowGenerator ব্যবহার করা
var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
shadowGenerator.addShadowCaster(box);

// বক্সের জন্য একটি ম্যাটেরিয়াল তৈরি করা
var material = new BABYLON.StandardMaterial("boxMaterial", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);  // রেড
box.material = material;

// একটি গ্রাউন্ড তৈরি করা
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
ground.receiveShadows = true;

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

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

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

• ShadowGenerator: এটি একটি ক্লাস যা আলোর উৎস থেকে ছায়া তৈরি করার কাজ করে। এখানে 1024 হচ্ছে শ্যাডো মানচিত্রের রেজোলিউশন।
• addShadowCaster: এই ফাংশনটি দিয়ে কোনো অবজেক্টকে "shadow caster" হিসাবে নির্ধারণ করা হয়, অর্থাৎ এটি ছায়া তৈরি করবে।
• receiveShadows: ground অবজেক্টের জন্য এই অপশনটি True করা হয়েছে, যাতে এটি ছায়া গ্রহণ করতে পারে।

Shadows এর বৈশিষ্ট্য:

• Shadow Maps: আপনি সিম্পল শ্যাডো ম্যাপস তৈরি করতে পারেন, যেখানে লাইটের দিক থেকে তৈরি হওয়া ছায়াগুলি 2D ম্যাপে রেন্ডার হয়।
• Soft Shadows: এই শ্যাডোগুলোর প্রান্ত স্পষ্ট না হয়ে মোলায়েম থাকে, যা একটি নরম আলোর প্রভাব সৃষ্টি করে।

২. Real-time Lighting (রিয়েল-টাইম আলোকসজ্জা)

Real-time Lighting কি?

Real-time Lighting হলো একটি প্রক্রিয়া যেখানে 3D দৃশ্যে আলোর উৎসগুলোর প্রভাব সরাসরি এবং অতি দ্রুত রেন্ডার হয়, যা ব্যবহারকারী যেভাবে দৃশ্যের সাথে ইন্টারঅ্যাক্ট করবে সেভাবে আলো পরিবর্তন হতে থাকে। এটি গেম বা ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশনের জন্য খুবই গুরুত্বপূর্ণ, কারণ এতে দৃশ্যের রিয়েল-টাইম রেন্ডারিং সম্পাদিত হয়।

Real-time Lighting যোগ করা:

উদাহরণ:

// 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);

// একটি Directional Light তৈরি করা (রিয়েল-টাইম আলো)
var light = new BABYLON.DirectionalLight("light1", BABYLON.Vector3.Down(), scene);

// আলোর রঙ এবং শক্তি নির্ধারণ করা
light.diffuse = new BABYLON.Color3(1, 1, 0);  // হলুদ আলো
light.specular = new BABYLON.Color3(1, 1, 1); // সাদা স্পেকুলার
light.intensity = 0.7;  // আলো শক্তি

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// বক্সের জন্য ম্যাটেরিয়াল তৈরি করা
var material = new BABYLON.StandardMaterial("boxMaterial", scene);
material.diffuseColor = new BABYLON.Color3(1, 0, 0);  // রেড
box.material = material;

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

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

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

• DirectionalLight: একটি দিকনির্দেশিত আলো তৈরি করা হয়েছে, যা দৃশ্যের সমগ্র অংশে আলো প্রবাহিত করবে।
• light.intensity: আলোর শক্তি বা উজ্জ্বলতা নিয়ন্ত্রণ করে। এটি রিয়েল-টাইমে পরিবর্তিত হতে পারে, যেমন গেমে সময় পরিবর্তন হলে বা ব্যবহারকারী ইন্টারঅ্যাক্ট করলে।
• light.diffuse & specular: আলোর রঙ এবং প্রতিফলন নিয়ন্ত্রণ করে।

Real-time Lighting এর বৈশিষ্ট্য:

• Dynamic Lighting: রিয়েল-টাইম আলো পরিবর্তনশীল, যা আপনার 3D দৃশ্যকে আরো ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে।
• Light Animation: আপনি আলোর উৎসকে অ্যানিমেট করতে পারেন, যেমন সূর্য ডুবে যাচ্ছে বা একটি বাতি জ্বলছে।

৩. Shadows এবং Lighting একত্রে ব্যবহার

Shadows এবং Real-time Lighting একত্রে ব্যবহারের মাধ্যমে আপনি বাস্তবসম্মত দৃশ্য তৈরি করতে পারেন, যেখানে আলোর প্রভাব এবং ছায়া একে অপরের সাথে ইন্টারঅ্যাক্ট করবে। এই উদাহরণে, আমরা একটি দৃশ্যে Directional Light এবং ShadowGenerator ব্যবহার করব, যাতে বক্সটির ছায়া দৃশ্যমান হয়।

উদাহরণ:

// 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);

// Directional Light তৈরি করা
var light = new BABYLON.DirectionalLight("light1", BABYLON.Vector3.Down(), scene);

// ShadowGenerator তৈরি করা
var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
shadowGenerator.addShadowCaster(box);

// একটি গ্রাউন্ড তৈরি করা এবং শ্যাডো গ্রহণ করা
var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
ground.receiveShadows = true;

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

// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
    engine.resize();
});

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

• Directional Light & Shadows: আমরা একটি DirectionalLight ব্যবহার করেছি এবং তার সাথে ShadowGenerator যোগ করেছি। এটি শ্যাডো ম্যাপ তৈরি করে এবং বক্সটির ছায়া সিমুলেট করে।
• Ground: একটি গ্রাউন্ড তৈরি করা হয়েছে যেটি ছায়া গ্রহণ করবে।

সারাংশ

• Shadows: ছায়া 3D দৃশ্যে আলোর প্রতিফলন তৈরি করে এবং একটি দৃশ্যের গভীরতা

এবং বাস্তবতা বৃদ্ধি করে।

• Real-time Lighting: এটি 3D দৃশ্যে আলোর উৎসের প্রভাব রিয়েল-টাইমে পরিবর্তন করে, যা একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ পরিবেশ তৈরি করে।
• BabylonJS ব্যবহার করে আপনি এই দুটি উপাদান সহজেই যোগ করতে পারেন এবং আপনার 3D প্রজেক্টে আলোর প্রভাব এবং ছায়া বাস্তবসম্মতভাবে প্রয়োগ করতে পারেন।

Shadows এবং Real-time Lighting এর সঠিক ব্যবহারের মাধ্যমে আপনি আপনার 3D দৃশ্যকে আরও বাস্তবসম্মত এবং আকর্ষণীয় করতে পারবেন।