Collision Detection এবং Picking গাইড ও নোট

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

263

Collision Detection এবং Picking হলো 3D গেম এবং অ্যাপ্লিকেশন ডিজাইন করার সময় গুরুত্বপূর্ণ দুটি বিষয়। Collision Detection ব্যবহৃত হয় যখন দুটি অবজেক্ট একে অপরকে স্পর্শ বা সংঘর্ষ (collision) করে, এবং Picking ব্যবহৃত হয় যখন ব্যবহারকারী মাউস ক্লিক করে কোন 3D অবজেক্ট নির্বাচন (pick) করেন। BabylonJS-এ এই দুটি পদ্ধতি খুব সহজে ইমপ্লিমেন্ট করা যায়, যা আপনাকে ইন্টারঅ্যাকটিভ 3D অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

১. Collision Detection

Collision Detection ব্যবহার করে, আপনি দুটি বা তার বেশি অবজেক্টের মধ্যে সংঘর্ষ চেক করতে পারেন। যখন দুটি অবজেক্ট একে অপরকে স্পর্শ করবে, তখন আপনি কোন কিছুর প্রতিক্রিয়া দেখতে পাবেন, যেমন অবজেক্টটি থেমে যাবে, বাউন্স করবে, বা অন্য কোন ইফেক্ট প্রয়োগ হবে।

Collision Detection প্রয়োগের পদ্ধতি:

BabylonJS এ Collision Detection সক্ষম করতে হলে, আপনাকে প্রথমে checkCollisions বৈশিষ্ট্যটি চালু করতে হবে এবং প্রতিটি অবজেক্টের জন্য collisionMask এবং checkCollisions ফ্ল্যাগ সেট করতে হবে।

কোড উদাহরণ:

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

        // ক্যামেরা তৈরি করা
        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 box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
        box1.position.x = -3;
        box1.checkCollisions = true;  // কলিশন চেক করার জন্য ফ্ল্যাগ সেট করা

        var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 2}, scene);
        box2.position.x = 3;
        box2.checkCollisions = true;  // কলিশন চেক করার জন্য ফ্ল্যাগ সেট করা

        // সেটআপ: বক্সগুলোর জন্য কলিশন মাস্ক নির্ধারণ
        box1.ellipsoid = new BABYLON.Vector3(1, 1, 1);  // এলিপসয়েড শেপ দিয়ে কলিশন সিস্টেম সেট করা
        box2.ellipsoid = new BABYLON.Vector3(1, 1, 1);

        // গ্রাউন্ড তৈরি করা (যার সাথে অবজেক্টগুলোর কলিশন হবে)
        var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 20, height: 20}, scene);
        ground.checkCollisions = true; // গ্রাউন্ডের জন্য কলিশন সক্রিয় করা

        // রেন্ডার লুপ
        engine.runRenderLoop(function () {
            scene.render();
        });

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

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

Collision Detection সক্রিয় করা: box1.checkCollisions = true এবং box2.checkCollisions = true ফ্ল্যাগগুলো দ্বারা কলিশন চেক করা হয়েছে।
Ellipsoid ব্যবহার: কলিশন সিস্টেমের জন্য ellipsoid ব্যবহার করা হয়েছে, যা অবজেক্টের সঠিক আকারের ভিত্তিতে কলিশন চেক করতে সাহায্য করে।
গ্রাউন্ড তৈরি করা: একটি গ্রাউন্ড তৈরি করা হয়েছে যা কলিশনের জন্য কাজ করবে।

ফলাফল:

এখন, যখন বক্স দুটি একে অপরের সাথে বা গ্রাউন্ডের সাথে সংঘর্ষ করবে, তখন সিস্টেম তা শনাক্ত করবে।

২. Picking (Object Selection)

Picking হলো একটি পদ্ধতি যার মাধ্যমে ব্যবহারকারী মাউস দিয়ে কোনো 3D অবজেক্ট নির্বাচন (pick) করতে পারেন। এটি সাধারণত গেম বা 3D অ্যাপ্লিকেশনগুলিতে ব্যবহার হয়, যেখানে ইউজারকে বিভিন্ন অবজেক্টের সাথে ইন্টারঅ্যাক্ট করার সুযোগ দেওয়া হয়।

BabylonJS-এ Picking ব্যবহার করা খুব সহজ। আপনি scene.pick ফাংশন ব্যবহার করে কোন অবজেক্ট নির্বাচন করেছেন তা চেক করতে পারেন।

কোড উদাহরণ:

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

        // ক্যামেরা তৈরি করা
        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);
        box.position.x = 0;

        // পিকিং ফাংশন
        canvas.addEventListener("pointerdown", function (evt) {
            var pickResult = scene.pick(evt.clientX, evt.clientY);
            if (pickResult.hit) {
                alert("Picked object: " + pickResult.pickedMesh.name);
            }
        });

        // রেন্ডার লুপ
        engine.runRenderLoop(function () {
            scene.render();
        });

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

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

Picking Event Listener: canvas.addEventListener("pointerdown", function(evt) {...}) দিয়ে মাউস ক্লিক করলে পিকিং ফাংশন ট্রিগার হবে।
Picking Logic: scene.pick(evt.clientX, evt.clientY) ব্যবহার করে আমরা মাউস ক্লিকের স্থান থেকে অবজেক্ট পিক করতে পারি। যদি কোন অবজেক্ট ক্লিক করা হয়, তাহলে pickResult.hit সত্য হবে এবং আমরা পিক করা অবজেক্টের নাম দেখাবো।

ফলাফল:

মাউস ক্লিক করলে, আপনি বক্সটিকে নির্বাচন (pick) করতে পারবেন এবং এটি একটি পপ-আপের মাধ্যমে অবজেক্টের নাম দেখাবে।

সারাংশ

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

Content added By

SATT Academy

কোলিশন ডিটেকশন কি এবং কিভাবে কাজ করে

309

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

কোলিশন ডিটেকশন ব্যবহারের মাধ্যমে, আপনি দৃশ্যের অবজেক্টগুলির মধ্যে সংঘর্ষ বা ট্যাপিং চেক করতে পারেন এবং সেই অনুযায়ী উপযুক্ত কার্যক্রম (যেমন অবজেক্টের গতিবিধি বা আঙুলে ক্লিক হওয়া) পরিচালনা করতে পারেন। এটি বিশেষভাবে গেম বা সিমুলেশন ডেভেলপমেন্টে খুবই কার্যকরী, যেখানে অবজেক্টগুলোকে একে অপরের সঙ্গে ইন্টারঅ্যাক্ট করতে হয়।

কোলিশন ডিটেকশন কিভাবে কাজ করে

কোলিশন ডিটেকশন সাধারণভাবে দুটি প্রক্রিয়ায় কাজ করে: বৌদ্ধিক (logical) কোলিশন এবং ভৌতিক (physical) কোলিশন। BabylonJS এ কোলিশন ডিটেকশন প্রথমে নির্দিষ্ট অবজেক্টগুলির মধ্যে সংঘর্ষ শনাক্ত করার জন্য কিছু গাণিতিক পদ্ধতি ব্যবহার করে।

১. কোলিশন ডিটেকশন প্রক্রিয়া

বেসিকভাবে কোলিশন ডিটেকশন বিভিন্ন ধরনের জ্যামিতিক আকৃতির মাধ্যমে সংঘর্ষ শনাক্ত করতে পারে, যেমন বক্স, গোলক, সিলিন্ডার ইত্যাদি। BabylonJS এই ধরনের কোলিশন ডিটেকশনকে সমর্থন করে।

Axis-Aligned Bounding Box (AABB): এখানে একটি অবজেক্টের চারপাশে একটি বক্স বা কিউব তৈরি করা হয়, যা তার সীমানাগুলির মধ্যে সংঘর্ষ শনাক্ত করতে সহায়তা করে।
Bounding Sphere: গোলকের মাধ্যমে সংঘর্ষ নির্ধারণ করা হয়, যেখানে গোলকটি অবজেক্টের চারপাশে একটি সিলিন্ড্রিক শেপের মতো কাজ করে।
Raycasting: রে কাস্টিংয়ের মাধ্যমে, একটি রেখা বা রে পাঠানো হয় এবং সেটি কোথায় আঘাত করবে, তা চেক করা হয়।

২. কোলিশন চেকিং

BabylonJS আপনাকে সহজে কোলিশন চেক করতে দেয়। এটি কোলিশন ডিটেকশন সক্রিয় করার জন্য কিছু নির্দিষ্ট পদ্ধতি প্রদান করে, যা অবজেক্টের পজিশন, আকৃতি এবং গতি অনুযায়ী সংঘর্ষ শনাক্ত করে।

BabylonJS এ কোলিশন ডিটেকশন কিভাবে সক্ষম করা যায়

১. কোলিশন সক্রিয় করা

BabylonJS এ কোলিশন ডিটেকশন সক্রিয় করতে হলে প্রথমে আপনাকে কিছু প্রপার্টি সেট করতে হবে। এর মধ্যে প্রধান দুটি প্রপার্টি হলো:

checkCollisions: একটি অবজেক্টের এই প্রপার্টি true সেট করলে কোলিশন চেকিং চালু হয়।
collisionMask এবং collisionGroup: এগুলি ব্যবহার করে আপনি নির্দিষ্ট গ্রুপ বা মাস্কের মধ্যে কোলিশন চেক করতে পারেন।

২. কোলিশন ডিটেকশন সক্রিয় করা - কোড উদাহরণ

// scene এবং engine তৈরি
var canvas = document.getElementById("renderCanvas");
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 box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
box1.position = new BABYLON.Vector3(0, 1, 0);
box1.checkCollisions = true; // কোলিশন চেকিং সক্রিয়

// আরেকটি বক্স তৈরি
var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 2}, scene);
box2.position = new BABYLON.Vector3(2, 1, 0);
box2.checkCollisions = true; // কোলিশন চেকিং সক্রিয়

// ক্যামেরা এবং বক্সগুলোর মধ্যে সংঘর্ষ নির্ধারণ
scene.onBeforeRenderObservable.add(function() {
    if (box1.intersectsMesh(box2, false)) {
        console.log("Boxes collided!");
    }
});

// রেন্ডার লুপ
engine.runRenderLoop(function () {
    scene.render();
});

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

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

checkCollisions: এখানে box1 এবং box2 অবজেক্টে checkCollisions প্রপার্টি true সেট করা হয়েছে, যার মাধ্যমে আমরা কোলিশন চেকিং সক্রিয় করেছি।
intersectsMesh(): এই মেথডের মাধ্যমে দুটি অবজেক্টের মধ্যে কোলিশন চেক করা হয়েছে। যদি দুটি অবজেক্ট একে অপরের সাথে সংঘর্ষ ঘটায়, তাহলে কনসোলে "Boxes collided!" মেসেজটি প্রদর্শিত হবে।

৩. কোলিশন ডিটেকশনের জন্য কিছু টিপস

Collision Mask: নির্দিষ্ট অবজেক্টগুলির মধ্যে কোলিশন চেক করতে collision mask ব্যবহার করা যেতে পারে। এটি আপনাকে কোনো নির্দিষ্ট অবজেক্টের জন্য কোলিশন নির্ধারণের সুযোগ দেয়।
বিভিন্ন ধরনের কোলিশন শেপ: বাস্তবসম্মত কোলিশন ডিটেকশন চালানোর জন্য, বিভিন্ন আকৃতির (বক্স, গোলক, সিলিন্ডার ইত্যাদি) কোলিশন শেপ ব্যবহার করা যেতে পারে।
Physics Engine: যদি আপনি আরও উন্নত কোলিশন ডিটেকশন চাচ্ছেন, তখন BabylonJS এর Physics Engine (যেমন Cannon.js) ব্যবহার করতে পারেন, যা আরও বাস্তবসম্মত সংঘর্ষ এবং গতির হিসাব করে।

কোলিশন ডিটেকশন এবং ফিজিক্স ইঞ্জিন

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

ফিজিক্স ইঞ্জিন ব্যবহার করার জন্য উদাহরণ:

var gravityVector = new BABYLON.Vector3(0, -9.81, 0);
var physicsPlugin = new BABYLON.CannonJSPlugin();
scene.enablePhysics(gravityVector, physicsPlugin);

এখানে, CannonJSPlugin ব্যবহার করে ফিজিক্স চালু করা হয়েছে, যা কোলিশন ডিটেকশন ও বাস্তবসম্মত গতি হিসাব করতে সাহায্য করবে।

সারাংশ

BabylonJS এ কোলিশন ডিটেকশন একটি গুরুত্বপূর্ণ ফিচার যা 3D দৃশ্যের অবজেক্টগুলির মধ্যে সংঘর্ষ শনাক্ত করতে সহায়তা করে। এটি AABB, Bounding Sphere, Raycasting এবং অন্যান্য কৌশল ব্যবহার করে কাজ করে। আপনি সহজেই checkCollisions প্রপার্টি ব্যবহার করে কোলিশন সক্রিয় করতে পারেন এবং intersectsMesh() মেথড দিয়ে সংঘর্ষ শনাক্ত করতে পারেন। আরও উন্নত কোলিশন ডিটেকশন জন্য Physics Engine ব্যবহার করা যেতে পারে।

Content added By

SATT Academy

Object Picking (Mouse বা Touch এর মাধ্যমে)

336

BabylonJS-এ Object Picking বা Raycasting এর মাধ্যমে আপনি 3D দৃশ্যে অবজেক্ট সিলেক্ট করতে পারেন, যা মাউস বা টাচ ইন্টারঅ্যাকশন দিয়ে কার্যকরী হয়। এই টেকনিক্যালিটি ব্যবহার করে, আপনি অবজেক্টের উপর ক্লিক বা টাচ করলে সেই অবজেক্টটি সিলেক্ট করতে পারেন এবং বিভিন্ন একশন সম্পাদন করতে পারেন।

Object Picking কিভাবে কাজ করে?

Object picking মূলত রে কাস্টিং (Ray Casting) ভিত্তিক একটি প্রক্রিয়া। যখন ব্যবহারকারী মাউস বা টাচ স্ক্রিনে ক্লিক করেন, তখন একটি রে দৃশ্যের মধ্যে শুরু হয় এবং এটি যেকোনো 3D অবজেক্টের সাথে সংযোগ স্থাপন করতে পারে। অবজেক্টটির উপর ক্লিক করলে, সেই অবজেক্টকে শনাক্ত করে আপনি কার্যকরী একশন পরিচালনা করতে পারেন।

Object Picking কনফিগার করা

১. রে কাস্টিং ব্যবহার করা

Object picking এর জন্য scene.pick() মেথড ব্যবহার করা হয়। এটি 2D কোঅর্ডিনেট (যেমন, মাউস পয়েন্ট) থেকে রে কাস্ট করে এবং যদি কোনো 3D অবজেক্টের সাথে সেই রে ক্রস করে, তবে সেটি সিলেক্ট করে।

উদাহরণ:

// 3D 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 box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// রে কাস্টিং ইভেন্ট
canvas.addEventListener("click", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY);

    if (pickResult.hit) {
        var pickedMesh = pickResult.pickedMesh;
        console.log("Picked Mesh: ", pickedMesh.name);
        pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
        pickedMesh.material.diffuseColor = BABYLON.Color3.Red();  // রঙ পরিবর্তন করা
    }
});

এখানে:

scene.pick(x, y): এখানে x এবং y হল ক্লিক করা পয়েন্টের স্ক্রীন কোঅর্ডিনেট। এটি রে কাস্ট করে এবং যদি কোনো অবজেক্ট পাওয়া যায়, তবে তা শনাক্ত করা হয়।
pickResult.hit: যদি কোনো অবজেক্ট নির্বাচিত হয়, তবে hit মানটি true হয়ে যাবে।
pickedMesh: নির্বাচিত অবজেক্টটি পাওয়া যাবে।

২. টাচ স্ক্রিনের জন্য Object Picking

এটি মাউস কন্ট্রোলের মতোই কাজ করে, তবে টাচ ইভেন্টের জন্য "touchstart" বা "touchend" ইভেন্ট ব্যবহার করা হয়।

উদাহরণ (টাচ স্ক্রিন):

canvas.addEventListener("touchstart", function (evt) {
    var pickResult = scene.pick(evt.touches[0].clientX, evt.touches[0].clientY);

    if (pickResult.hit) {
        var pickedMesh = pickResult.pickedMesh;
        console.log("Picked Mesh (Touch): ", pickedMesh.name);
        pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
        pickedMesh.material.diffuseColor = BABYLON.Color3.Green();  // রঙ পরিবর্তন করা
    }
});

এখানে:

evt.touches[0].clientX এবং evt.touches[0].clientY: টাচ স্ক্রিনের প্রথম টাচ পয়েন্টের কোঅর্ডিনেট পাওয়া যায় এবং সেই পয়েন্ট থেকে রে কাস্ট করা হয়।

৩. Multiple Object Picking (একাধিক অবজেক্ট নির্বাচন)

একাধিক অবজেক্ট নির্বাচনের জন্য, আপনি scene.pick() এর পাশাপাশি scene.multiPick() মেথড ব্যবহার করতে পারেন, যা একযোগভাবে একাধিক অবজেক্ট নির্বাচন করতে সাহায্য করে।

উদাহরণ (Multiple Object Picking):

canvas.addEventListener("click", function (evt) {
    var pickResults = scene.multiPick(evt.clientX, evt.clientY);

    if (pickResults.length > 0) {
        pickResults.forEach(function (result) {
            if (result.hit) {
                var pickedMesh = result.pickedMesh;
                console.log("Picked Mesh (Multi): ", pickedMesh.name);
                pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
                pickedMesh.material.diffuseColor = BABYLON.Color3.Blue();  // রঙ পরিবর্তন করা
            }
        });
    }
});

এখানে:

scene.multiPick(x, y): এটি একটি রে কাস্ট করে এবং দৃশ্যের সমস্ত অবজেক্টের সাথে মিলানোর চেষ্টা করে, যা একাধিক অবজেক্ট নির্বাচন করতে সাহায্য করে।

৪. Object Picking-এ Custom Action যোগ করা

Object Picking এর মাধ্যমে আপনি কাস্টম একশনও যুক্ত করতে পারেন, যেমন অবজেক্টের ওপর ক্লিক করলে কোনো পরিবর্তন ঘটানো, অথবা কোনো ইন্টারঅ্যাকটিভ একশন করা।

উদাহরণ:

canvas.addEventListener("click", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY);

    if (pickResult.hit) {
        var pickedMesh = pickResult.pickedMesh;

        if (pickedMesh.name === "box") {
            pickedMesh.scaling = new BABYLON.Vector3(2, 2, 2);  // বক্সের আকার বড় করা
            pickedMesh.material = new BABYLON.StandardMaterial("pickedMaterial", scene);
            pickedMesh.material.diffuseColor = BABYLON.Color3.Yellow();  // রঙ পরিবর্তন
        }
    }
});

এখানে:

pickedMesh.scaling: অবজেক্টটির আকার পরিবর্তন করা হয়েছে।
pickedMesh.material.diffuseColor: অবজেক্টটির রঙ পরিবর্তন করা হয়েছে।

সারাংশ

Object Picking হচ্ছে একটি প্রক্রিয়া যা মাউস বা টাচের মাধ্যমে 3D দৃশ্যে অবজেক্ট নির্বাচন করার জন্য ব্যবহৃত হয়।
scene.pick() এবং scene.multiPick() ব্যবহার করে আপনি এক বা একাধিক অবজেক্ট নির্বাচন করতে পারেন।
আপনি scene.pick() দ্বারা নির্বাচিত অবজেক্টের উপর কাস্টম একশন যেমন রঙ পরিবর্তন, আকার পরিবর্তন বা অন্যান্য ইন্টারঅ্যাকশন করতে পারেন।

এই Object Picking ফিচারের মাধ্যমে, আপনার 3D অ্যাপ্লিকেশনে আরও ইন্টারঅ্যাকটিভিটি যোগ করা সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতা অনেক উন্নত করবে।

Content added By

SATT Academy

Raycasting এবং Picking Events

255

Raycasting এবং Picking Events হল 3D গ্রাফিক্সের অত্যন্ত গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারী ইন্টারঅ্যাকশন এবং ডাইনামিক অবজেক্ট সিলেকশন সহজ করে তোলে। এই টেকনোলজিগুলোর মাধ্যমে আপনি ব্যবহারকারীর ক্লিক বা টাচ থেকে সঠিক অবজেক্ট নির্বাচন করতে পারেন, যা গেম এবং ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশনে কার্যকরী।

BabylonJS এ Raycasting এবং Picking Events ব্যবহার করা অত্যন্ত সহজ এবং শক্তিশালী। এই গাইডে, আমরা বুঝে নেব কিভাবে Raycasting এবং Picking Events কাজ করে এবং কীভাবে এগুলো BabylonJS-এ ব্যবহার করা যায়।

১. Raycasting কী?

Raycasting হল একটি প্রযুক্তি যেখানে একটি "রশ্মি" (ray) 3D স্পেসে একটি নির্দিষ্ট দিক বা স্থান থেকে ছোড়া হয় এবং এটি পথের মধ্যে আসা অবজেক্টের সাথে সংঘর্ষ (collision) পরীক্ষা করে। সাধারণত, রশ্মিটি কোনো স্পেসিফিক পজিশন বা ক্যামেরা থেকে নির্দিষ্ট দিকের দিকে ছোড়া হয় এবং এটি ক্লিক বা টাচ ইন্টারঅ্যাকশন সনাক্ত করার জন্য ব্যবহৃত হয়।

Raycasting সাধারণত ব্যবহৃত হয়:

অবজেক্ট নির্বাচন (Picking)
ক্যামেরা বা লাইটের দিক নির্ধারণ
কাস্টম ইন্টারঅ্যাকশন এবং কন্ট্রোল

Raycasting উদাহরণ:

// 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 box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);

// Raycasting (রশ্মি পাঠানো)
var ray = new BABYLON.Ray(camera.position, camera.getTarget().subtract(camera.position).normalize());
var hit = scene.pickWithRay(ray);

// যদি রশ্মি কোনো অবজেক্টকে হিট করে
if (hit.pickedMesh) {
    console.log("Hit: ", hit.pickedMesh.name);
}

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

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

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

Ray: BABYLON.Ray ব্যবহার করা হয়েছে, যা একটি রশ্মি তৈরি করে যা ক্যামেরার অবস্থান থেকে নির্দিষ্ট দিকের দিকে চলে।
pickWithRay: এই ফাংশনটি রশ্মির পথের মধ্যে কোনো অবজেক্ট আছে কিনা তা পরীক্ষা করে।
hit.pickedMesh: যদি কোনো অবজেক্ট হিট হয়, তবে এটি সিলেক্টেড অবজেক্টকে রিটার্ন করবে।

২. Picking Events কী?

Picking Events হল এমন ইন্টারঅ্যাকশন যেখানে ব্যবহারকারী ক্লিক বা টাচ করে 3D দৃশ্যের কোনো নির্দিষ্ট অবজেক্ট নির্বাচন করতে পারে। Picking এর মাধ্যমে, আপনি ক্লিক বা টাচের মাধ্যমে কোন অবজেক্টে কাজ করতে চান তা নির্ধারণ করতে পারবেন।

Picking Events উদাহরণ:

// 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 box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
box.position.y = 1; // বক্সের অবস্থান

// Picking Event (ক্লিক ইভেন্ট)
canvas.addEventListener("pointerdown", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY); // পিকিং রেজাল্ট
    if (pickResult.pickedMesh) {
        // যদি কোনো মেশ পিক হয়
        alert("Picked Mesh: " + pickResult.pickedMesh.name);
    }
});

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

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

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

scene.pick: এই ফাংশনটি ব্যবহারকারী ক্লিকের অবস্থান থেকে দৃশ্যের মধ্যে একটি "পিক" অপারেশন চালায় এবং এটি কোন অবজেক্ট নির্বাচিত হয়েছে তা নির্ধারণ করে।
evt.clientX, evt.clientY: ক্লিকের স্থান (এক্স এবং ওয়াই) কে সনাক্ত করে, যেখানে পিকিং করতে হবে।
pickResult.pickedMesh: এটি নির্বাচিত মেশকে রিটার্ন করবে, যদি ক্লিক করা হয়।

৩. Raycasting এবং Picking Event এর মধ্যে পার্থক্য

Raycasting: একটি নির্দিষ্ট রশ্মি থেকে চলমান অবজেক্টের সাথে সংঘর্ষ নির্ধারণ করে। এটি মূলত একটি লজিক্যাল প্রক্রিয়া, যা সাধারনত ক্যামেরার দিক থেকে অবজেক্ট সিলেক্ট করার জন্য ব্যবহৃত হয়।
Picking Events: এটি ব্যবহারকারীর ক্লিক বা টাচ ইন্টারঅ্যাকশনের মাধ্যমে দৃশ্যের অবজেক্ট নির্বাচন করতে ব্যবহৃত হয়। Picking সাধারণত সরাসরি ইউজার ইন্টারঅ্যাকশন (যেমন ক্লিক) ঘটায় এবং এটি রিয়েল-টাইমে কাজ করে।

৪. Raycasting এবং Picking এর উন্নত ব্যবহার

Multiple Objects Picking:

যদি একাধিক অবজেক্ট থাকে এবং আপনি প্রতিটি অবজেক্টের জন্য পৃথক ইভেন্ট করতে চান, তবে আপনি Picking ইভেন্ট ব্যবহার করতে পারেন যাতে বিভিন্ন অবজেক্টে আলাদা কাজ করা যায়।

// 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 box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
box1.position.x = -3;

var box2 = BABYLON.MeshBuilder.CreateBox("box2", {size: 2}, scene);
box2.position.x = 3;

// Picking Event (ক্লিক ইভেন্ট)
canvas.addEventListener("pointerdown", function (evt) {
    var pickResult = scene.pick(evt.clientX, evt.clientY); // পিকিং রেজাল্ট
    if (pickResult.pickedMesh) {
        // যদি কোনো মেশ পিক হয়
        alert("Picked Mesh: " + pickResult.pickedMesh.name);
    }
});

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

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

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

এখানে দুটি বক্স তৈরি করা হয়েছে এবং ব্যবহারকারী যেকোনো একটি বক্সে ক্লিক করলে সেই বক্সের নাম দেখা যাবে।

সারাংশ

Raycasting: একটি রশ্মি পাঠানো হয় এবং এটি 3D স্পেসে অবজেক্টের সাথে সংঘর্ষ পরীক্ষা করে। এটি সাধারণত ক্যামেরা দিক থেকে ব্যবহারকারীর নির্বাচন নির্ধারণ করতে ব্যবহৃত হয়।
Picking Events: এটি ইউজারের ক্লিক বা টাচের মাধ্যমে 3D দৃশ্যের অবজেক্ট নির্বাচন করতে সাহায্য করে।
BabylonJS এ Raycasting এবং Picking ইভেন্ট খুবই শক্তিশালী টুলস যা আপনাকে 3D গ্রাফিক্সে ইন্টারঅ্যাকটিভিটি যোগ করতে সাহায্য করে।

Content added By

SATT Academy

Collision Response এবং Interaction

324

BabylonJS-এ Collision Detection এবং Collision Response ব্যবহৃত হয় 3D অবজেক্টের মধ্যে সংঘর্ষ (collision) চিহ্নিত এবং সেগুলির প্রতিক্রিয়া (response) তৈরি করার জন্য। যখন দুটি 3D অবজেক্ট একে অপরকে স্পর্শ করে বা ধাক্কা দেয়, তখন Collision Detection ব্যবহৃত হয় তাদের সংঘর্ষ সনাক্ত করতে এবং Collision Response ব্যবহৃত হয় তাদের আচরণ নিয়ন্ত্রণ করতে।

এছাড়াও, Interaction বা ইন্টারঅ্যাকশন হল ব্যবহারকারীর অ্যাকশন (যেমন ক্লিক বা পয়েন্টিং) এর প্রতিক্রিয়া, যা আমরা Collision Detection-এর মাধ্যমে সঠিকভাবে পরিচালনা করতে পারি। এই গাইডে Collision এবং Interaction ব্যবস্থাপনা দেখানো হবে।

১. Collision Detection

Collision Detection হল সেই প্রক্রিয়া যেখানে আমরা পরীক্ষা করি দুটি 3D অবজেক্ট একে অপরকে স্পর্শ করছে কিনা। BabylonJS-এ collisionMask এবং checkCollisions পদ্ধতি ব্যবহার করে আমরা এই কাজটি করতে পারি।

উদাহরণ:

// 3D দৃশ্য তৈরি করা
var scene = new BABYLON.Scene(engine);

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

// বক্স 1 কে কিছুটা সরানো
box1.position.x = 3;

// বক্স 2 কে কিছুটা সরানো
box2.position.x = 0;

// Collision Detection সক্রিয় করা
box1.checkCollisions = true;
box2.checkCollisions = true;

// ক্যামেরা তৈরি করা
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);

// Collision Response সক্ষম করা
scene.registerBeforeRender(function() {
    if (box1.intersectsMesh(box2, false)) {
        console.log("Collision detected!");
    }
});

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

এখানে:

checkCollisions প্যারামিটারকে true করা হয়েছে, যাতে বক্সগুলি সংঘর্ষ সনাক্ত করতে পারে।
intersectsMesh() পদ্ধতি ব্যবহার করা হয়েছে, যা পরীক্ষণ করে দুটি অবজেক্ট একে অপরকে স্পর্শ করছে কিনা।

২. Collision Response

Collision Response হল সংঘর্ষের পর অবজেক্টের প্রতিক্রিয়া কেমন হবে তা নিয়ন্ত্রণ করা। যখন দুটি অবজেক্ট সংঘর্ষে আসবে, তখন BabylonJS স্বয়ংক্রিয়ভাবে তাদের Position এবং Velocity আপডেট করতে পারে।

উদাহরণ: বক্সের সাথে সংঘর্ষের পরে প্রতিক্রিয়া

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

box1.position.x = 3;
box2.position.x = 0;

// physics engine চালু করা
var physicsEngine = scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.CannonJSPlugin());

// physics system যুক্ত করা
box1.physicsImpostor = new BABYLON.PhysicsImpostor(box1, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);
box2.physicsImpostor = new BABYLON.PhysicsImpostor(box2, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);

// বক্স 1 কে গতি দেওয়া
box1.physicsImpostor.setLinearVelocity(new BABYLON.Vector3(-5, 0, 0));

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

এখানে:

physicsImpostor ব্যবহার করে Physics Engine চালু করা হয়েছে, যার মাধ্যমে অবজেক্টের মধ্যে সংঘর্ষ এবং প্রতিক্রিয়া সঠিকভাবে হ্যান্ডল করা হয়।
setLinearVelocity ব্যবহার করে একটি বক্সকে গতিশীল করা হয়েছে, যাতে এটি অন্য বক্সটির সঙ্গে সংঘর্ষে আসবে।

৩. Interaction এবং Event Handling

ব্যবহারকারীর ইনপুট (যেমন ক্লিক, পয়েন্টিং বা ড্র্যাগ) গ্রহণ করার জন্য BabylonJS GUI ব্যবহার করা যায়। এটি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন এবং Collision Response কন্ট্রোল করতে সাহায্য করে।

উদাহরণ: মাউস ক্লিক দিয়ে Collision Detection

var box1 = BABYLON.MeshBuilder.CreateBox("box1", {size: 2}, scene);
box1.position.x = 0;

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

// মাউস ক্লিক ইভেন্টে বক্সের সাথে সংঘর্ষ পরীক্ষা
scene.onPointerDown = function (evt, pickResult) {
    if (pickResult.hit && pickResult.pickedMesh === box1) {
        console.log("Clicked on the box!");
    }
};

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

এখানে:

scene.onPointerDown ইভেন্ট ব্যবহার করা হয়েছে, যা ব্যবহারকারী যখন বক্সে ক্লিক করবেন, তখন সাড়া দিবে।

৪. গ্রাভিটি এবং রিগিড বডি

BabylonJS-এ গ্রাভিটি এবং রিগিড বডি ইমপোস্টরের মাধ্যমে আমরা 3D অবজেক্টের বাস্তবসম্মত আচার-আচরণ তৈরি করতে পারি, যা সংঘর্ষ এবং প্রতিক্রিয়ায় আরও সঠিক আচরণ সৃষ্টি করে।

উদাহরণ: গ্রাভিটি ব্যবহার করে ফিজিক্স সিমুলেশন

// Physics সিস্টেম সক্রিয় করা
scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLON.CannonJSPlugin());

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

// বক্সে ফিজিক্স ইমপোস্টর যোগ করা
box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, {mass: 1}, scene);

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

এখানে:

গ্রাভিটি সক্রিয় করা হয়েছে, যার ফলে বক্সটি নিচের দিকে পড়বে।

সারাংশ

BabylonJS-এ Collision Detection এবং Collision Response বাস্তবসম্মত এবং ইন্টারঅ্যাকটিভ 3D অভিজ্ঞতা তৈরি করার জন্য গুরুত্বপূর্ণ ভূমিকা পালন করে। Physics Engine ব্যবহারের মাধ্যমে, আপনি অবজেক্টের গতি, অবস্থান এবং অন্যান্য বৈশিষ্ট্যগুলো সংঘর্ষের সময় সঠিকভাবে নিয়ন্ত্রণ করতে পারবেন। এর মাধ্যমে ব্যবহারকারীদের সঙ্গে ইনপুট ইন্টারঅ্যাকশন এবং অবজেক্টের মধ্যে সংঘর্ষ এবং তাদের প্রতিক্রিয়া বাস্তবসম্মতভাবে হ্যান্ডল করা যায়।

Content added By

SATT Academy

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

Collision Detection এবং Picking গাইড ও নোট

১. Collision Detection

Collision Detection প্রয়োগের পদ্ধতি:

কোড উদাহরণ:

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

ফলাফল:

২. Picking (Object Selection)

কোড উদাহরণ:

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

ফলাফল:

সারাংশ

কোলিশন ডিটেকশন কি এবং কিভাবে কাজ করে

কোলিশন ডিটেকশন কিভাবে কাজ করে

১. কোলিশন ডিটেকশন প্রক্রিয়া

২. কোলিশন চেকিং

BabylonJS এ কোলিশন ডিটেকশন কিভাবে সক্ষম করা যায়

১. কোলিশন সক্রিয় করা

২. কোলিশন ডিটেকশন সক্রিয় করা - কোড উদাহরণ

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

৩. কোলিশন ডিটেকশনের জন্য কিছু টিপস

কোলিশন ডিটেকশন এবং ফিজিক্স ইঞ্জিন

ফিজিক্স ইঞ্জিন ব্যবহার করার জন্য উদাহরণ:

সারাংশ

Object Picking (Mouse বা Touch এর মাধ্যমে)

Object Picking কিভাবে কাজ করে?

Object Picking কনফিগার করা

১. রে কাস্টিং ব্যবহার করা

উদাহরণ:

২. টাচ স্ক্রিনের জন্য Object Picking

উদাহরণ (টাচ স্ক্রিন):

৩. Multiple Object Picking (একাধিক অবজেক্ট নির্বাচন)

উদাহরণ (Multiple Object Picking):

৪. Object Picking-এ Custom Action যোগ করা

উদাহরণ:

সারাংশ

Raycasting এবং Picking Events

১. Raycasting কী?

Raycasting উদাহরণ:

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

২. Picking Events কী?

Picking Events উদাহরণ:

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

৩. Raycasting এবং Picking Event এর মধ্যে পার্থক্য

৪. Raycasting এবং Picking এর উন্নত ব্যবহার

Multiple Objects Picking:

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

সারাংশ

Collision Response এবং Interaction

১. Collision Detection

উদাহরণ:

২. Collision Response

উদাহরণ: বক্সের সাথে সংঘর্ষের পরে প্রতিক্রিয়া

৩. Interaction এবং Event Handling

উদাহরণ: মাউস ক্লিক দিয়ে Collision Detection

৪. গ্রাভিটি এবং রিগিড বডি

উদাহরণ: গ্রাভিটি ব্যবহার করে ফিজিক্স সিমুলেশন

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!