BabylonJS বেসিকস গাইড ও নোট

Web Development - ব্যাবিলনজেএস (BabylonJS)

363

BabylonJS হল একটি শক্তিশালী ওপেন সোর্স 3D ইঞ্জিন যা JavaScript দিয়ে ওয়েব ব্রাউজারে 3D গ্রাফিক্স রেন্ডার করতে সাহায্য করে। এটি HTML5 এবং WebGL ব্যবহার করে 3D দৃশ্য তৈরি করতে পারে এবং গ্রাফিক্স, গেম, সিমুলেশন, এবং ইন্টারেক্টিভ 3D কন্টেন্ট তৈরি করার জন্য ব্যবহৃত হয়। এই গাইডে, আমরা BabylonJS এর বেসিক ধারণাগুলি সম্পর্কে জানব এবং কীভাবে এটি কাজ করে তা বুঝে নেব।

BabylonJS এর প্রধান উপাদানসমূহ

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

১. Engine (ইঞ্জিন)

BabylonJS ইঞ্জিন হল 3D রেন্ডারিংয়ের মূল উপাদান। এটি গ্রাফিক্স রেন্ডার করতে, ইন্টারঅ্যাক্টিভ 3D দৃশ্য তৈরি করতে, এবং ডিভাইসের GPU ব্যবহার করে সঠিকভাবে 3D অবজেক্ট রেন্ডার করতে সাহায্য করে। ইঞ্জিনটি সাধারণত একটি <canvas> এলিমেন্টের সাথে যুক্ত থাকে এবং এটি সেই এলিমেন্টে গ্রাফিক্স রেন্ডার করে।

var engine = new BABYLON.Engine(canvas, true);

২. Scene (দৃশ্য)

একটি scene হল BabylonJS এর কনটেইনার যেখানে সব 3D অবজেক্ট, ক্যামেরা, আলোর উৎস, এবং অন্যান্য উপাদান থাকে। এই দৃশ্যটি ইঞ্জিনের মাধ্যমে রেন্ডার করা হয়।

var scene = new BABYLON.Scene(engine);

৩. Camera (ক্যামেরা)

ক্যামেরা হল সেই উপাদান যা দর্শককে দৃশ্যটি দেখানোর জন্য ব্যবহার করা হয়। BabylonJS বিভিন্ন ধরনের ক্যামেরা অফার করে, যেমন:

ArcRotateCamera: ৩D দৃশ্যে একটি অবজেক্টের চারপাশে ঘুরে দেখানোর জন্য।
FreeCamera: একটি ফ্রি মুভিং ক্যামেরা যা 3D স্পেসে স্বাধীনভাবে চলাচল করতে পারে।

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

৪. Light (আলো)

আলোর উৎস হল 3D দৃশ্যের প্রধান উপাদান যা অবজেক্টগুলোর উপর আলো ফেলবে। BabylonJS এ অনেক ধরনের আলো রয়েছে, যেমন:

HemisphericLight: একটি সাধারণ আলো যা দৃশ্যের ওপর বেসিক আলোকিত প্রভাব তৈরি করে।
DirectionalLight: একটি শক্তিশালী আলো যা দৃশ্যে একটি নির্দিষ্ট দিক থেকে আলো প্রদান করে।

var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

৫. Mesh (অবজেক্ট)

Mesh হলো 3D অবজেক্ট যা আপনি দৃশ্যে তৈরি করেন। BabylonJS-এ বিভিন্ন ধরনের মেশ তৈরি করা যায়, যেমন বক্স, গোলক, পিরামিড ইত্যাদি। MeshBuilder API ব্যবহার করে সহজেই এই অবজেক্টগুলো তৈরি করা যায়।

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

BabylonJS বেসিক কোড উদাহরণ

নিচে একটি সাধারন উদাহরণ দেয়া হলো যেখানে একটি বক্স, ক্যামেরা, এবং আলো সহ একটি 3D দৃশ্য তৈরি করা হয়েছে।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First BabylonJS Project</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        // 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.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

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

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

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

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

Canvas: 3D দৃশ্য প্রদর্শনের জন্য একটি <canvas> ট্যাগ ব্যবহার করা হয়েছে।
Engine: BABYLON.Engine ব্যবহার করে 3D রেন্ডারিং ইঞ্জিন তৈরি করা হয়েছে।
Scene: BABYLON.Scene দিয়ে একটি নতুন দৃশ্য তৈরি করা হয়েছে।
Camera: ArcRotateCamera ব্যবহার করে একটি ক্যামেরা তৈরি করা হয়েছে যা বক্সটি ঘুরিয়ে দেখার সুবিধা দেয়।
Light: HemisphericLight দিয়ে দৃশ্যে আলো যোগ করা হয়েছে।
Box: MeshBuilder.CreateBox দিয়ে একটি বক্স তৈরি করা হয়েছে যা দৃশ্যে প্রদর্শিত হবে।
Render Loop: engine.runRenderLoop ব্যবহার করে দৃশ্যটি প্রতি ফ্রেমে রেন্ডার করা হচ্ছে।

আরও গুরুত্বপূর্ণ ধারণা

১. Meshes এবং Shapes

BabylonJS দিয়ে আপনি বিভিন্ন ধরনের 3D অবজেক্ট তৈরি করতে পারেন। কিছু সাধারণ মেশ শেপস:

Box (CreateBox)
Sphere (CreateSphere)
Cylinder (CreateCylinder)
Plane (CreatePlane)
Torus (CreateTorus)

২. Materials (উপকরণ)

BabylonJS-এ 3D অবজেক্টগুলোর জন্য বিভিন্ন ধরনের material ব্যবহার করা যায়, যেমন:

StandardMaterial: সাধারণ এবং সহজ একটি মেটেরিয়াল।
PBR (Physically Based Rendering) Material: বাস্তবসম্মত আলো এবং শেডিং জন্য ব্যবহার করা হয়।

৩. Textures (টেক্সচার)

আপনি 3D অবজেক্টে ছবি বা গ্রাফিক্স (টেক্সচার) যোগ করতে পারেন। এটি অবজেক্টকে আরো বাস্তবসম্মত এবং আকর্ষণীয় করে তোলে।

সারাংশ

BabylonJS হল একটি শক্তিশালী এবং সহজ ব্যবহারযোগ্য 3D ইঞ্জিন যা JavaScript এবং WebGL দিয়ে ওয়েব ব্রাউজারে 3D গ্রাফিক্স রেন্ডার করতে সক্ষম। এর প্রধান উপাদানগুলো হলো Engine, Scene, Camera, Light, এবং Meshes। এগুলোর মাধ্যমে আপনি 3D গেম, সিমুলেশন, এবং অন্যান্য ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরি করতে পারেন। আপনার প্রথম প্রজেক্টে এই বেসিক উপাদানগুলো ব্যবহার করে একটি 3D দৃশ্য তৈরি করা যাবে।

Content added By

SATT Academy

Scene এবং Camera এর ধারণা

304

BabylonJS একটি শক্তিশালী 3D ইঞ্জিন, যা 3D গ্রাফিক্স তৈরি এবং ওয়েব অ্যাপ্লিকেশন বা গেম ডেভেলপমেন্টে ব্যবহৃত হয়। 3D দৃশ্য তৈরি করতে এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করার জন্য দুটি গুরুত্বপূর্ণ উপাদান হল Scene এবং Camera। এই দুটি উপাদান মিলিতভাবে 3D দৃশ্যকে কার্যকরভাবে রেন্ডার করে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

Scene (দৃশ্য) এর ধারণা

Scene কি?

Scene হল একটি 3D দৃশ্য বা পরিবেশ যেখানে সমস্ত 3D অবজেক্ট, ক্যামেরা, আলো, মেশ এবং অন্যান্য উপাদান থাকে। এটি আপনার 3D জগতের মূল অবকাঠামো। যখন আপনি একটি BabylonJS প্রজেক্ট শুরু করেন, প্রথমে আপনাকে একটি দৃশ্য তৈরি করতে হয়। এই দৃশ্যের মধ্যে আপনি বিভিন্ন ধরনের অবজেক্ট তৈরি করবেন এবং ক্যামেরা ও আলো বসিয়ে সেটি রেন্ডার করবেন।

Scene তৈরি করা

একটি Scene তৈরি করতে, আপনাকে প্রথমে BabylonJS এর Engine ব্যবহার করতে হয়। তারপর Scene অবজেক্ট তৈরি করে, বিভিন্ন উপাদান যোগ করা হয়।

// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");

// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);

// Scene তৈরি করা
var scene = new BABYLON.Scene(engine);

Scene এর উপাদানসমূহ

Meshes: 3D অবজেক্ট যেমন বক্স, গোলক, পিরামিড ইত্যাদি।
Lights: দৃশ্যে আলো প্রদানকারী উপাদান।
Camera: দৃশ্যের দৃষ্টিকোণ নির্ধারণকারী উপাদান।
Material & Textures: 3D অবজেক্টের রঙ, টেক্সচার এবং অন্যান্য বৈশিষ্ট্য।
Animations: বিভিন্ন অবজেক্টের অ্যানিমেশন।

Scene এর কাজ

Object Rendering: দৃশ্যে উপস্থিত সব অবজেক্ট রেন্ডার করে।
Camera Movement: ক্যামেরা এবং দৃশ্যের ইন্টারঅ্যাকশনকে ম্যানেজ করে।
Lighting: আলোর উৎস এবং তার প্রভাব পরিচালনা করে।

Camera (ক্যামেরা) এর ধারণা

Camera কি?

Camera হল সেই উপাদান যা দৃশ্যকে ভিউ করতে সাহায্য করে। ক্যামেরা একটি নির্দিষ্ট পজিশন এবং রোটেশন দিয়ে দৃশ্যের দিকে নির্দেশনা প্রদান করে। এটি ব্যবহারকারীকে 3D দৃশ্যে ঘুরে দেখতে, প্যান করতে এবং জুম ইন/আউট করতে সাহায্য করে।

Camera এর বিভিন্ন ধরন

BabylonJS বিভিন্ন ধরনের ক্যামেরা সাপোর্ট করে, যার মধ্যে সবচেয়ে জনপ্রিয় হল:

ArcRotateCamera: এটি একটি রোটেটিং ক্যামেরা যা 3D দৃশ্যের চারপাশে ঘুরে দেখানোর সুবিধা দেয়।
FreeCamera: এটি একটি ফ্রি মুভিং ক্যামেরা, যা আপনাকে 3D পরিবেশে একটি নির্দিষ্ট জায়গায় অবাধে চলাচল করতে দেয়।
UniversalCamera: এটি একটি কাস্টম ক্যামেরা যা যেকোনো 3D অ্যাপ্লিকেশনের জন্য উপযোগী।

ArcRotateCamera ব্যবহার করা

// ArcRotateCamera তৈরি করা
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 এবং Math.PI / 2 হল ক্যামেরার কোণ (এখানে এটি 90° অবস্থানে থাকবে)।
10 হল ক্যামেরার দৃশ্য থেকে দূরত্ব।
BABYLON.Vector3.Zero() দৃশ্যের কেন্দ্র (origin) নির্দেশ করে, যেখানে ক্যামেরা তাকাবে।

FreeCamera ব্যবহার করা

// FreeCamera তৈরি করা
var camera = new BABYLON.FreeCamera("freeCamera", new BABYLON.Vector3(0, 5, -10), scene);
camera.attachControl(canvas, true);

এখানে:

"freeCamera" হল ক্যামেরার নাম।
new BABYLON.Vector3(0, 5, -10) ক্যামেরার অবস্থান, যেখানে X=0, Y=5, Z=-10।
camera.attachControl(canvas, true) ক্যামেরাকে মাউস বা কীবোর্ডের মাধ্যমে নিয়ন্ত্রণের অনুমতি দেয়।

Camera এর কাজ

দৃশ্যের দৃষ্টিকোণ প্রদান: ক্যামেরা দৃশ্যের দৃষ্টিকোণ এবং অভিমুখ নির্ধারণ করে।
ইন্টারঅ্যাকশন: ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন যেমন ঘুরিয়ে দেখানো, প্যান, জুম, রোটেট ইত্যাদি।
মুভমেন্ট: FreeCamera দিয়ে আপনি সম্পূর্ণ দৃশ্যে মুভ করতে পারবেন।

Scene এবং Camera এর সম্পর্ক

Scene এবং Camera একসাথে কাজ করে

Scene এবং Camera একে অপরের সাথে মিলে 3D পরিবেশ তৈরি করে। Scene সমস্ত অবজেক্ট, আলো, ক্যামেরা এবং অন্যান্য উপাদানকে ধারণ করে, এবং Camera সেই Scene কে ব্যবহারকারীর দৃষ্টিকোণ থেকে দেখানোর কাজ করে। এর মাধ্যমে একটি পূর্ণাঙ্গ 3D পরিবেশ তৈরি হয় যা ব্যবহারকারী ইন্টারঅ্যাক্ট করতে পারে।

Scene এবং Camera এর কাজগুলো হলো:

Scene সব অবজেক্টকে রেন্ডার করে এবং ইন্টারঅ্যাকশন পরিচালনা করে।
Camera সেই Scene কে বিভিন্ন কোণ থেকে দেখানোর কাজ করে।

যদি ক্যামেরা ঠিকভাবে সেট না করা হয়, তাহলে Scene-এ থাকা সব কিছুই অদৃশ্য হয়ে যাবে বা ব্যবহারকারী তা দেখতে পারবে না। অপরদিকে, যদি Scene তে কোনো অবজেক্ট না থাকে, তাহলে ক্যামেরা কোন দৃশ্য দেখাবে না।

সারাংশ

BabylonJS এ Scene এবং Camera হলো দুইটি মূল উপাদান যা একসাথে কাজ করে একটি 3D পরিবেশ তৈরি এবং রেন্ডার করার জন্য। Scene 3D অবজেক্ট, আলো এবং অন্যান্য উপাদানকে ধারণ করে, আর Camera সেই দৃশ্যকে দেখানোর জন্য ব্যবহৃত হয়। Scene এবং Camera এর সঠিক ব্যবহার আপনার 3D প্রোজেক্টে একটি বাস্তবসম্মত এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করতে সাহায্য করবে।

Content added By

SATT Academy

প্রথম 3D Object (Sphere, Cube) তৈরি

248

BabylonJS ব্যবহার করে প্রথম 3D অবজেক্ট তৈরি করার জন্য, আমরা দুটি সাধারণ অবজেক্ট—Sphere (গোলক) এবং Cube (বক্স)—তৈরি করব। এদের মাধ্যমে আপনি 3D মডেল তৈরি এবং প্রদর্শন করার প্রক্রিয়া শিখতে পারবেন।

১. প্রজেক্ট ফোল্ডার তৈরি

প্রথমে, আপনার একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করুন এবং সেখানে একটি index.html ফাইল তৈরি করুন।

২. HTML ফাইল তৈরি

নিচে একটি সিম্পল HTML কোড দেওয়া হলো, যা BabylonJS দিয়ে একটি Sphere এবং একটি Cube তৈরি করবে:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BabylonJS - 3D Objects</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
    <canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
    <script>
        // canvas এলিমেন্টটি পেতে
        var canvas = document.getElementById("renderCanvas");

        // BabylonJS ইঞ্জিন তৈরি করা
        var engine = new BABYLON.Engine(canvas, true);

        // BabylonJS দৃশ্য তৈরি করা
        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);

        // গোলক (Sphere) তৈরি করা
        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);
        sphere.position.x = -3;  // গোলকটিকে X-axis এ সরে নিয়ে আসা

        // বক্স (Cube) তৈরি করা
        var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
        box.position.x = 3;  // বক্সটিকে X-axis এ সরে নিয়ে আসা

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

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

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

Canvas এবং Engine: প্রথমে আমরা একটি <canvas> ট্যাগ ব্যবহার করে BabylonJS-এর জন্য রেন্ডারিং ক্যানভাস তৈরি করেছি। তারপর BABYLON.Engine ব্যবহার করে রেন্ডারিং ইঞ্জিন তৈরি করা হয়েছে।
Scene: BABYLON.Scene তৈরি করা হয়েছে যেখানে সব 3D অবজেক্ট এবং ক্যামেরা থাকবে।
Camera: ArcRotateCamera ক্যামেরা ব্যবহার করা হয়েছে, যা ব্যবহারকারীকে 3D দৃশ্য ঘুরিয়ে দেখতে সাহায্য করবে।
Light: HemisphericLight ব্যবহার করা হয়েছে, যা দৃশ্যে সাধারণ আলো যোগ করে। এটি একটি হালকা পরিবেশ সৃষ্টি করে।
Sphere (গোলক): BABYLON.MeshBuilder.CreateSphere ব্যবহার করে একটি গোলক তৈরি করা হয়েছে। গোলকটির ব্যাসার্ধ ২ নির্ধারণ করা হয়েছে এবং এটিকে X-অ্যাক্সিসে কিছুটা সরে দেওয়া হয়েছে যাতে এটি দৃশ্যে দৃশ্যমান হয়।
Box (বক্স): BABYLON.MeshBuilder.CreateBox ব্যবহার করে একটি বক্স তৈরি করা হয়েছে। বক্সটিকেও X-অ্যাক্সিসে কিছুটা সরে দেওয়া হয়েছে যাতে গোলক ও বক্স একে অপরের কাছে থাকে, কিন্তু তারা একে অপরের ওপর নেই।
Render Loop: engine.runRenderLoop দিয়ে দৃশ্যটি রেন্ডার করা হচ্ছে এবং প্রতি ফ্রেমে দৃশ্যটি আপডেট হবে।
Resize Event: ব্রাউজারের আকার পরিবর্তন হলে দৃশ্যটি ঠিকমতো রিসাইজ করার জন্য engine.resize() ব্যবহার করা হয়েছে।

৩. ব্রাউজারে প্রজেক্ট পরীক্ষা করা

এখন আপনি আপনার index.html ফাইলটি ওয়েব ব্রাউজারে খুলুন। আপনি একটি গোলক (Sphere) এবং একটি বক্স (Cube) দেখতে পাবেন, এবং আপনি মাউস দিয়ে এগুলি ঘুরিয়ে দেখতে পারবেন।

অতিরিক্ত বৈশিষ্ট্য যোগ করা

আপনার প্রথম 3D অবজেক্টে আরও বৈশিষ্ট্য যোগ করতে পারেন:

১. অ্যানিমেশন:

আপনি গোলক বা বক্সের জন্য অ্যানিমেশন যোগ করতে পারেন, যেমন রোটেশন বা মুভমেন্ট।

// গোলকটির রোটেশন অ্যানিমেশন
scene.registerBeforeRender(function () {
    sphere.rotation.y += 0.01;
});

২. টেক্সচার যোগ করা:

গোলক বা বক্সে টেক্সচার যোগ করলে তা আরও বাস্তবসম্মত দেখাবে। নিচের কোড দিয়ে একটি টেক্সচার যোগ করা যেতে পারে:

var texture = new BABYLON.Texture("https://www.babylonjs.com/assets/textures/wood.jpg", scene);
sphere.material = new BABYLON.StandardMaterial("sphereMaterial", scene);
sphere.material.diffuseTexture = texture;

৩. ব্যাকগ্রাউন্ড যোগ করা:

দৃশ্যে একটি ব্যাকগ্রাউন্ড যোগ করতে পারেন:

scene.clearColor = new BABYLON.Color4(0.8, 0.8, 1, 1);  // আকাশি রং

সারাংশ

এটি ছিল আপনার প্রথম BabylonJS প্রজেক্ট, যেখানে আমরা দুটি সাধারণ 3D অবজেক্ট—Sphere (গোলক) এবং Box (বক্স)—তৈরি করেছি। আপনি এই কোডের মাধ্যমে বুঝতে পারলেন কিভাবে BabylonJS ব্যবহার করে 3D মডেল তৈরি এবং রেন্ডার করা যায়। এই বেসিক ধারণার মাধ্যমে আপনি আরও জটিল 3D সেন্টার এবং গেম ডেভেলপমেন্টে এগিয়ে যেতে পারবেন।

Content added By

SATT Academy

Lighting এবং Shading

273

BabylonJS-এ lighting (আলো) এবং shading (ছায়া) 3D দৃশ্যের বাস্তবিকতা এবং গভীরতা তৈরি করার জন্য অত্যন্ত গুরুত্বপূর্ণ উপাদান। আলোর উৎস এবং শেডিং প্রযুক্তির মাধ্যমে 3D অবজেক্টগুলোর পার্শ্বপ্রতিক্রিয়া ও চেহারা আরও জীবন্ত হয়ে ওঠে। এই গাইডে, আমরা BabylonJS-এ আলোর উৎস এবং শেডিং কিভাবে কাজ করে তা বিস্তারিতভাবে জানব।

Lighting (আলো)

BabylonJS-এ আলোর উৎস ব্যবহারের মাধ্যমে দৃশ্যে বাস্তবসম্মত আভা এবং ছায়া তৈরি করা যায়। এখানে কিছু প্রধান ধরনের আলো আছে যা বিভিন্ন পরিস্থিতিতে ব্যবহৃত হতে পারে।

১. Hemispheric Light (হেমিস্ফেরিক লাইট)

HemisphericLight একটি সাধারণ প্রকারের আলো যা পুরো দৃশ্যে আলোর উৎস হিসেবে কাজ করে। এটি সাধারণত একটি উপরের দিক থেকে ছড়িয়ে পড়ে, এবং এটি একটি নরম আলো প্রদান করে।

var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);

প্যারামিটার ১: আলোর নাম
প্যারামিটার ২: আলোর দিক (যেমন, উপরের দিকে, নিচের দিকে বা অন্য কোন দিক)
প্যারামিটার ৩: দৃশ্যে আলো প্রেরণের স্থান

২. Point Light (পয়েন্ট লাইট)

PointLight হলো একটি আলো যা একটি নির্দিষ্ট বিন্দু থেকে সমস্ত দিকে ছড়িয়ে পড়ে, ঠিক যেমন একটি বাল্ব থেকে আলো বের হয়।

var light = new BABYLON.PointLight("pointLight", BABYLON.Vector3.Zero(), scene);

প্যারামিটার ১: আলোর নাম
প্যারামিটার ২: আলোর অবস্থান
প্যারামিটার ৩: দৃশ্যে আলো প্রেরণের স্থান

৩. Directional Light (ডিরেকশনাল লাইট)

DirectionalLight একটি প্রকারের আলো যা একদিক থেকে নির্দিষ্ট ভাবে ছড়ায়। এটি সাধারণত সূর্যের আলো বা কোন শক্তিশালী আলোর উৎসের প্রতিনিধিত্ব করে।

var light = new BABYLON.DirectionalLight("directionalLight", BABYLON.Vector3.Right(), scene);

প্যারামিটার ১: আলোর নাম
প্যারামিটার ২: আলোর দিক
প্যারামিটার ৩: দৃশ্যে আলো প্রেরণের স্থান

৪. Spot Light (স্পট লাইট)

SpotLight একটি সংকীর্ণ আলোর কন, যেটি একটি নির্দিষ্ট পয়েন্ট থেকে আলো সোজা একটি দিকে প্রচার করে, এবং আলোর বিস্তার ক্রমান্বয়ে কমে যায়।

var light = new BABYLON.SpotLight("spotLight", BABYLON.Vector3.Zero(), BABYLON.Vector3.Up(), Math.PI / 4, 2, scene);

প্যারামিটার ১: আলোর নাম
প্যারামিটার ২: আলোর অবস্থান
প্যারামিটার ৩: আলোর দিক
প্যারামিটার ৪: আলোর কন পিরামিডের কোণ (এটা কতটা বিস্তৃত হবে)
প্যারামিটার ৫: আলোর শক্তি

Shading (শেডিং)

Shading হল এক প্রক্রিয়া যার মাধ্যমে 3D অবজেক্টের পৃষ্ঠের উপর আলোর প্রভাব এবং অন্যান্য প্রাকৃতিক ঘটনাগুলোর প্রতিফলন তৈরি করা হয়। এটি একটি দৃশ্যকে আরো বাস্তবসম্মত এবং গভীর করে তোলে।

১. Phong Shading (ফং শেডিং)

Phong Shading হল এক ধরনের শেডিং টেকনিক যা একাধিক আলো উৎস এবং শক্তি নির্ধারণ করে। এটি সামগ্রিক আলো এবং ছায়ার মধ্যে সমন্বয় সাধন করে অবজেক্টের পৃষ্ঠের উপর আলোর প্রতিফলন তৈরি করে।

var material = new BABYLON.StandardMaterial("material", scene);
material.diffuseColor = BABYLON.Color3.Green(); // অবজেক্টের রঙ
box.material = material;

২. Lambertian Shading (ল্যাম্বার্টিয়ান শেডিং)

Lambertian Shading বা Diffuse Shading হল সোজা শেডিং প্রযুক্তি যা শুধু অবজেক্টের পৃষ্ঠের উপর আলোর তীব্রতা নির্ধারণ করে। এটি অধিকাংশ ক্ষেত্রেই ব্যবহৃত হয় যখন একধরনের নরম আলো প্রয়োজন হয়।

var material = new BABYLON.StandardMaterial("lambertMaterial", scene);
material.diffuseColor = BABYLON.Color3.Red();
box.material = material;

৩. Normal Map Shading (নরমাল ম্যাপ শেডিং)

Normal Maps একটি শেডিং টেকনিক যা অবজেক্টের পৃষ্ঠের ছোট বক্রতা বা টেক্সচার তৈরি করতে সাহায্য করে। এটি সাধারণত 3D মডেলগুলোর বিস্তারিত বৈশিষ্ট্য প্রদর্শন করার জন্য ব্যবহৃত হয়।

var material = new BABYLON.StandardMaterial("normalMaterial", scene);
material.diffuseTexture = new BABYLON.Texture("path_to_texture.jpg", scene);
material.bumpTexture = new BABYLON.Texture("path_to_normal_map.jpg", scene);
box.material = material;

Light and Shading এর সমন্বয়

BabylonJS-এ আলোর উৎস এবং শেডিং টেকনিক সমন্বিতভাবে ব্যবহার করা হয়, যাতে দৃশ্যটি আরো আকর্ষণীয় এবং বাস্তবসম্মত দেখায়। এখানে একটি উদাহরণ দেওয়া হলো যেখানে একটি বক্সে PointLight এবং Phong Shading ব্যবহৃত হয়েছে:

// 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.PointLight("light1", BABYLON.Vector3.Zero(), scene);

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

// শেডিং তৈরি করা
var material = new BABYLON.StandardMaterial("material", scene);
material.diffuseColor = BABYLON.Color3.Green();
box.material = material;

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

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

সারাংশ

BabylonJS-এ lighting এবং shading খুবই গুরুত্বপূর্ণ উপাদান যা 3D দৃশ্যের বাস্তবসম্মততা তৈরি করতে সাহায্য করে। আপনি বিভিন্ন ধরনের আলোর উৎস যেমন HemisphericLight, PointLight, DirectionalLight ইত্যাদি ব্যবহার করতে পারেন, এবং শেডিং টেকনিকের মাধ্যমে 3D অবজেক্টের পৃষ্ঠে আলোর প্রভাব এবং ছায়া তৈরি করতে পারেন। আলোর উৎস এবং শেডিং টেকনিকের সঠিক সমন্বয়ের মাধ্যমে আপনি সুন্দর, বাস্তবসম্মত 3D দৃশ্য তৈরি করতে পারবেন।

Content added By

SATT Academy

Basic Camera Movement (ArcRotate, FreeCamera)

356

BabylonJS-এ ক্যামেরা ব্যবহারের দুটি প্রধান পদ্ধতি হলো ArcRotateCamera এবং FreeCamera। এই দুটি ক্যামেরা ব্যবহার করে আপনি 3D দৃশ্যের মধ্যে কিভাবে মুভ করবেন, সেটি নিয়ন্ত্রণ করতে পারেন। এখানে আমরা এই দুটি ক্যামেরার মৌলিক মুভমেন্টের পদ্ধতি সম্পর্কে আলোচনা করব।

ArcRotateCamera

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

ArcRotateCamera সেটআপ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ArcRotateCamera 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); // ক্যামেরা কন্ট্রোল যুক্ত করা

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

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

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

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

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

ArcRotateCamera: এখানে ক্যামেরাটি ArcRotateCamera টাইপের। এটি নির্দিষ্ট একটি পয়েন্ট (এখানে BABYLON.Vector3.Zero()—অর্থাৎ (0,0,0)) এর চারপাশে ঘুরে চলবে। ক্যামেরার অবস্থান কোণ এবং দূরত্ব (angle and radius) দিয়ে কনফিগার করা হয়েছে।
attachControl: এটি ক্যামেরা কন্ট্রোল যুক্ত করে, যা মাউস বা টাচ ইন্টারফেসের মাধ্যমে ক্যামেরার পজিশন পরিবর্তন করতে দেয়।

এই ক্যামেরা মুভমেন্টের মাধ্যমে, ব্যবহারকারী মাউস দিয়ে 3D দৃশ্যের মধ্যে ক্যামেরাকে ঘুরিয়ে দেখতে পারবেন।

FreeCamera

FreeCamera একটি ফ্রি-মুভিং ক্যামেরা যা আপনার নির্দেশে 3D দৃশ্যে যেকোনো জায়গায় যেতে পারে। এটি একটি "মুক্ত" ক্যামেরা, যার কোনো নির্দিষ্ট পয়েন্টের চারপাশে ঘুরতে বাধ্য নয়। আপনি ওয়াকিং বা ফ্লাইং মুভমেন্টের মতো এই ক্যামেরাকে নিয়ন্ত্রণ করতে পারেন।

FreeCamera সেটআপ

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

        // FreeCamera তৈরি করা
        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
        camera.attachControl(canvas, true); // ক্যামেরা কন্ট্রোল যুক্ত করা

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

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

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

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

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

FreeCamera: এখানে ক্যামেরাটি FreeCamera টাইপের, যা সোজা একটি নির্দিষ্ট পয়েন্ট থেকে (0, 5, -10) থেকে শুরু হয়। এটি 3D দৃশ্যে যেকোনো জায়গায় যেতে পারে।
attachControl: এই ক্যামেরার কন্ট্রোলও attachControl মেথডের মাধ্যমে যুক্ত করা হয়েছে, যা ব্যবহারকারীকে কিবোর্ড এবং মাউস দিয়ে ক্যামেরার পজিশন নিয়ন্ত্রণ করতে সহায়তা করবে।

FreeCamera দিয়ে আপনি ওয়াকিং বা ফ্লাইং স্টাইলে 3D দৃশ্যে মুভ করতে পারবেন, যা গেম ডেভেলপমেন্টে বেশ উপকারী।

ArcRotateCamera vs FreeCamera

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

সারাংশ

ArcRotateCamera: 3D দৃশ্যের চারপাশে ঘুরে দেখানোর জন্য ব্যবহৃত হয়। এটি একটি নির্দিষ্ট পয়েন্টের চারপাশে ক্যামেরা ঘুরাতে দেয়।
FreeCamera: এটি একটি ফ্রি-মুভিং ক্যামেরা, যা ব্যবহারকারীর নিয়ন্ত্রণে 3D দৃশ্যে যেকোনো স্থানে যেতে পারে।

এই দুটি ক্যামেরা মুভমেন্ট আপনার 3D প্রজেক্টের ভিউ নিয়ন্ত্রণ করতে সাহায্য করবে।

Content added By

SATT Academy

BabylonJS পরিচিতি BabylonJS সেটআপ এবং পরিবেশ তৈরি Mesh এবং Material Camera এবং Lighting Animations

BabylonJS বেসিকস গাইড ও নোট

BabylonJS এর প্রধান উপাদানসমূহ

১. Engine (ইঞ্জিন)

২. Scene (দৃশ্য)

৩. Camera (ক্যামেরা)

৪. Light (আলো)

৫. Mesh (অবজেক্ট)

BabylonJS বেসিক কোড উদাহরণ

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

আরও গুরুত্বপূর্ণ ধারণা

১. Meshes এবং Shapes

২. Materials (উপকরণ)

৩. Textures (টেক্সচার)

সারাংশ

Scene এবং Camera এর ধারণা

Scene (দৃশ্য) এর ধারণা

Scene কি?

Scene তৈরি করা

Scene এর উপাদানসমূহ

Scene এর কাজ

Camera (ক্যামেরা) এর ধারণা

Camera কি?

Camera এর বিভিন্ন ধরন

ArcRotateCamera ব্যবহার করা

FreeCamera ব্যবহার করা

Camera এর কাজ

Scene এবং Camera এর সম্পর্ক

Scene এবং Camera একসাথে কাজ করে

সারাংশ

প্রথম 3D Object (Sphere, Cube) তৈরি

১. প্রজেক্ট ফোল্ডার তৈরি

২. HTML ফাইল তৈরি

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

৩. ব্রাউজারে প্রজেক্ট পরীক্ষা করা

অতিরিক্ত বৈশিষ্ট্য যোগ করা

১. অ্যানিমেশন:

২. টেক্সচার যোগ করা:

৩. ব্যাকগ্রাউন্ড যোগ করা:

সারাংশ

Lighting এবং Shading

Lighting (আলো)

১. Hemispheric Light (হেমিস্ফেরিক লাইট)

২. Point Light (পয়েন্ট লাইট)

৩. Directional Light (ডিরেকশনাল লাইট)

৪. Spot Light (স্পট লাইট)

Shading (শেডিং)

১. Phong Shading (ফং শেডিং)

২. Lambertian Shading (ল্যাম্বার্টিয়ান শেডিং)

৩. Normal Map Shading (নরমাল ম্যাপ শেডিং)

Light and Shading এর সমন্বয়

সারাংশ

Basic Camera Movement (ArcRotate, FreeCamera)

ArcRotateCamera

ArcRotateCamera সেটআপ

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

FreeCamera

FreeCamera সেটআপ

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

ArcRotateCamera vs FreeCamera

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!