HTML ফাইল তৈরি করা
ওয়েবজিএল ব্যবহার করে ওয়েব পেজে গ্রাফিক্স রেন্ডার করার জন্য প্রথমে একটি HTML ফাইল তৈরি করতে হবে। এখানে আমরা একটি বেসিক HTML ফাইল তৈরি করব, যাতে ওয়েবজিএল ক্যানভাস এলিমেন্ট (Canvas Element) থাকবে এবং এতে ওয়েবজিএল সাপোর্ট দেওয়া হবে।
১. HTML ফাইলের কাঠামো
প্রথমে একটি HTML ফাইল তৈরি করুন। উদাহরণস্বরূপ, "index.html" নামের একটি ফাইল তৈরি করা যেতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL Example</title>
</head>
<body>
<canvas id="webgl-canvas" width="500" height="500"></canvas>
<script type="text/javascript">
// ওয়েবজিএল কনটেক্সট প্রাপ্তি
var canvas = document.getElementById("webgl-canvas");
var gl = canvas.getContext("webgl");
if (!gl) {
console.log("WebGL is not supported in this browser.");
} else {
console.log("WebGL is supported!");
}
</script>
</body>
</html>
২. কোড বিশ্লেষণ
- HTML ক্যানভাস (Canvas):
<canvas id="webgl-canvas" width="500" height="500"></canvas>এই ট্যাগটি ওয়েবজিএল রেন্ডারিং এর জন্য একটি ক্যানভাস এলিমেন্ট তৈরি করে।- ক্যানভাসের
widthএবংheightঅ্যাট্রিবিউট দ্বারা এর আকার নির্ধারিত হয়, এখানে আমরা 500x500 পিক্সেল রেখেছি।
- জাভাস্ক্রিপ্ট কোড:
<script>ট্যাগের মধ্যে জাভাস্ক্রিপ্ট কোড রাখা হয়েছে, যা ওয়েবজিএল কনটেক্সট (WebGL Context) রিটার্ন করবে এবং সেই কনটেক্সট ব্যবহার করে গ্রাফিক্স রেন্ডারিং করতে সক্ষম হবে।var gl = canvas.getContext("webgl");এই কোডটি ওয়েবজিএল কনটেক্সট প্রাপ্তির জন্য ব্যবহৃত হয়।- যদি ওয়েবজিএল সমর্থিত না হয়, তবে "WebGL is not supported in this browser." মেসেজটি কনসোল-এ প্রদর্শিত হবে। অন্যথায়, "WebGL is supported!" মেসেজটি কনসোল-এ দেখা যাবে।
৩. কনটেক্সট চেক করা
ওয়েবজিএল কনটেক্সট প্রাপ্তির পর, আপনি গ্রাফিক্স রেন্ডারিং শুরু করতে পারেন। তবে, প্রথমে কনটেক্সট সফলভাবে প্রাপ্ত হয়েছে কিনা তা নিশ্চিত করা জরুরি।
এটি চেক করার জন্য, কনসোলের মাধ্যমে একটি মেসেজও দেওয়া হয় যাতে আপনি জানতে পারবেন ব্রাউজার ওয়েবজিএল সমর্থন করছে কিনা।
৪. পরবর্তী পদক্ষেপ
এখন যেহেতু HTML ফাইল এবং ওয়েবজিএল কনটেক্সট তৈরি করা হয়েছে, পরবর্তী পদক্ষেপে আপনি গ্রাফিক্স রেন্ডার করতে ওয়েবজিএল শেডার কোড (Shader Code) এবং অন্যান্য গ্রাফিক্স উপাদান যোগ করতে পারবেন।
এই প্রথম স্টেপটি ছিল ওয়েবজিএল-এর সঠিক কনফিগারেশন নিশ্চিত করা, যাতে ভবিষ্যতে জটিল গ্রাফিক্স অপারেশনগুলি সঠিকভাবে কাজ করতে পারে।
Read more
