ওয়েবজিএল কন্টেক্সট তৈরি
ওয়েবজিএল কন্টেক্সট তৈরি করার জন্য, প্রথমে HTML5 ক্যানভাস এলিমেন্টে ওয়েবজিএল কন্টেক্সট (WebGL Context) ইনিশিয়ালাইজ করতে হয়। এটি মূলত ব্রাউজারের মধ্যে ওয়েবজিএল API ব্যবহার করার জন্য একটি এনভায়রনমেন্ট তৈরি করে।
ক্যানভাস এলিমেন্টে ওয়েবজিএল কন্টেক্সট তৈরি করতে নিচের জাভাস্ক্রিপ্ট কোড ব্যবহার করা যেতে পারে:
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl"); // ওয়েবজিএল কন্টেক্সট তৈরি
if (!gl) {
console.log("WebGL সমর্থিত নয়, এক্সএমএল/Canvas এর পরিবর্তে ব্যবহার করুন!");
}
</script>
এই কোডে:
- প্রথমে HTML5 ক্যানভাস তৈরি করা হয়েছে, যার আয়তন ৫০০x৫০০ পিক্সেল।
- তারপর
getContext("webgl")পদ্ধতি ব্যবহার করে ওয়েবজিএল কন্টেক্সট ইনিশিয়ালাইজ করা হয়েছে। - যদি ব্রাউজার ওয়েবজিএল সমর্থন না করে, তবে একটি বার্তা দেখানো হবে।
ক্যানভাস (Canvas) এন্টিটি সেটআপ
ক্যানভাস হলো একটি ২D বা ৩D গ্রাফিক্স রেন্ডারিং সেকশন যেখানে ওয়েবজিএল বা ২D ক্যানভাস এপিআই ব্যবহার করে গ্রাফিক্স তৈরি করা হয়। এটি HTML5 এর একটি অত্যন্ত গুরুত্বপূর্ণ উপাদান।
ক্যানভাস এলিমেন্টটি সাধারণত নিচেরভাবে তৈরি করা হয়:
<canvas id="myCanvas" width="500" height="500"></canvas>
এটি একটি canvas ট্যাগ যা HTML ডকুমেন্টে গ্রাফিক্স রেন্ডারিংয়ের জন্য ব্যবহৃত হবে। ক্যানভাসের আকার নির্ধারণ করা যায় width এবং height অ্যাট্রিবিউট দিয়ে।
ক্যানভাস সেটআপ এবং ওয়েবজিএল রেন্ডারিং
ওয়েবজিএল কন্টেক্সট তৈরির পর, ক্যানভাসের মধ্যে গ্রাফিক্স রেন্ডার করতে প্রয়োজনীয় ফাংশনগুলো ব্যবহার করা যায়। সাধারণত, ক্যানভাসে গ্রাফিক্স রেন্ডারিং শুরু করার জন্য নিম্নলিখিত কোড ব্যবহার করা হয়:
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
if (!gl) {
alert("WebGL সমর্থিত নয়!");
} else {
// ওয়েবজিএল কন্টেক্সট পাওয়ার পর গ্রাফিক্স রেন্ডারিং শুরু করা যেতে পারে
gl.clearColor(0.0, 0.0, 0.0, 1.0); // ব্যাকগ্রাউন্ড কালার সেট করা
gl.clear(gl.COLOR_BUFFER_BIT); // ক্যানভাস ক্লিয়ার করা
}
</script>
এই কোডে:
clearColorফাংশনটি ক্যানভাসের ব্যাকগ্রাউন্ড কালার সেট করে (এখানে কালো কালার দেওয়া হয়েছে)।clearফাংশনটি ক্যানভাসের বর্তমান কনটেন্ট ক্লিয়ার করে নতুন রেন্ডারিংয়ের জন্য প্রস্তুত করে।
ওয়েবজিএল কন্টেক্সট এবং ক্যানভাসের ইন্টিগ্রেশন
ওয়েবজিএল কন্টেক্সট তৈরি ও ক্যানভাস সেটআপের পর, আরও বিভিন্ন গ্রাফিক্স অপারেশন যেমন শেডার প্রোগ্রাম, বাফার বাইনিং ইত্যাদি করার মাধ্যমে 3D গ্রাফিক্স তৈরি করা সম্ভব। ওয়েবজিএল API এর সাহায্যে ক্যানভাসে বিভিন্ন শেপ, টেক্সচার, মডেল ইত্যাদি রেন্ডার করা যায়, যা ইন্টারঅ্যাকটিভ এবং জটিল দৃশ্য তৈরি করতে ব্যবহৃত হয়।
এইভাবে, ওয়েবজিএল কন্টেক্সট তৈরি এবং ক্যানভাস এন্টিটি সেটআপের মাধ্যমে ওয়েব পেজে থ্রি-ডি গ্রাফিক্স রেন্ডারিং করা সম্ভব।
Read more
