ওয়েবজিএল-এ প্রাথমিক জ্যামিতি তৈরি
ওয়েবজিএল (WebGL) ব্যবহার করে 3D গ্রাফিক্স তৈরি করার জন্য প্রাথমিক জ্যামিতির কাঠামো অত্যন্ত গুরুত্বপূর্ণ। সাধারণভাবে, ওয়েবজিএল-এ 3D মডেল তৈরি করার জন্য কিছু সাধারণ জ্যামিতি যেমন ত্রিভুজ (Triangle), বক্স (Box), এবং স্ফিয়ার (Sphere) ব্যবহৃত হয়। এই জ্যামিতিগুলোর সাহায্যে আমরা আমাদের 3D সিস্টেমের বেসিক শেপ তৈরি করতে পারি, যা পরবর্তীতে অন্যান্য জটিল অবজেক্ট তৈরি করার ভিত্তি হয়ে থাকে।
ত্রিভুজ (Triangle) তৈরি করা
তিনটি ভেরটেক্স (Vertex) ব্যবহার করে ত্রিভুজ তৈরি করা হয়, যা ওয়েবজিএল এর সবচেয়ে মৌলিক জ্যামিতি। একটি ত্রিভুজের প্রতিটি কোণ (corner) বা ভেরটেক্স 3D স্পেসে একটি পয়েন্টে অবস্থান করে এবং এটি একে অপরের সাথে যুক্ত হয়ে ত্রিভুজ গঠন করে।
// ত্রিভুজের ভেরটেক্স ডেটা
const vertices = [
// x, y, z
0.0, 1.0, 0.0, // শীর্ষ
-1.0, -1.0, 0.0, // বাম
1.0, -1.0, 0.0 // ডান
];
ওয়েবজিএল-এ এই ত্রিভুজের পয়েন্টগুলিকে একটি বাফার (buffer) ব্যবহার করে রেন্ডার করা হয়।
বক্স (Box) তৈরি করা
বক্স তৈরির জন্য একটি কিউবের ৮টি কোণ এবং মোট ৬টি পৃষ্ঠ (faces) তৈরি করা হয়। প্রতিটি পৃষ্ঠের জন্য একটি আলাদা ত্রিভুজের সেট ব্যবহার করা হয়।
// বক্সের ভেরটেক্স ডেটা
const vertices = [
// পৃষ্ঠ 1
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
-1.0, 1.0, -1.0,
// পৃষ্ঠ 2
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0
// আরও পৃষ্ঠ যোগ করা যাবে
];
এভাবে বক্সের প্রতিটি পৃষ্ঠ তৈরি করা হয়ে থাকে এবং এর পেছনে ওয়েবজিএল বাফার এবং শেডার কোড ব্যবহৃত হয়।
স্ফিয়ার (Sphere) তৈরি করা
স্ফিয়ার তৈরির জন্য একটি বেসিক টেকনিক হল সেগমেন্ট (segment) এবং রিং (ring) ব্যবহার করে একটি বৃত্তাকার আকার তৈরি করা। স্ফিয়ারের জন্য কূণাগুলি বা ভেরটেক্সগুলির জন্য সাইন (sine) এবং কসাইন (cosine) ফাংশন ব্যবহার করা হয়, যা গোলাকার গঠন তৈরি করতে সহায়তা করে।
// স্ফিয়ার তৈরি করতে সাইন ও কসাইন ব্যবহার
const radius = 1;
const slices = 30; // অনুভূমিক বিভাজন
const stacks = 30; // উল্লম্ব বিভাজন
for (let i = 0; i <= stacks; i++) {
const phi = i * Math.PI / stacks; // বৃত্তাকার কোণ
for (let j = 0; j <= slices; j++) {
const theta = j * 2 * Math.PI / slices; // অনুভূমিক কোণ
// ভেরটেক্স হিসাব
const x = radius * Math.sin(phi) * Math.cos(theta);
const y = radius * Math.sin(phi) * Math.sin(theta);
const z = radius * Math.cos(phi);
// এখানে x, y, z থেকে স্ফিয়ারের প্রতিটি ভেরটেক্স তৈরি হবে
}
}
এই কোড ব্যবহার করে স্ফিয়ারের পয়েন্টগুলো তৈরি হয় এবং ওয়েবজিএল-এ একটি স্ফিয়ার রেন্ডার করা সম্ভব হয়।
ওয়েবজিএল কোডিংয়ের মূল উপাদান
- ভেরটেক্স ডেটা (Vertex Data): সবার প্রথমে, বিভিন্ন জ্যামিতির পয়েন্ট বা ভেরটেক্স তৈরি করা হয়, যা পরবর্তী প্রক্রিয়ার জন্য ব্যবহৃত হয়।
- শেডার (Shader): ওয়েবজিএল-এর শেডার কোড ব্যবহার করে এই ভেরটেক্সগুলোর স্থানান্তর, আলোকসজ্জা এবং শেডিং কার্য সম্পন্ন হয়।
- বাফার (Buffer): ওয়েবজিএল-এ গ্রাফিক্স রেন্ডারিংয়ের জন্য ডেটা বাফার ব্যবহার করা হয়, যা ভেরটেক্স এবং অন্যান্য গ্রাফিক্স তথ্য ধারণ করে।
প্রাথমিক জ্যামিতি তৈরি করার জন্য ওয়েবজিএল ব্যবহার করা অত্যন্ত শক্তিশালী। ত্রিভুজ, বক্স এবং স্ফিয়ার এগুলোর মাধ্যমে আমরা 3D গ্রাফিক্স তৈরি করতে পারি, যা পরবর্তীতে আরও জটিল গ্রাফিক্যাল অবজেক্ট এবং সিমুলেশন তৈরির জন্য ভিত্তি তৈরি করে।
Read more
