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

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 দৃশ্য তৈরি করতে পারবেন।