WebGl(Web Graphics Library) یک API جاوا اسکریپت برای ترسیم گرافیک های دوبعدی و سه بعدی، بدون استفاده از افزونه، در تمامی مرورگرهای سازگار می باشد. WebGL این کار را با معرفی یک API بسیار شبیه به OpenGL ES2.0 انجام می دهد که توسط المان <canvas> در HTML5 مورد استفاده قرار می گیرد. همچنین المان <canvas> توسط Canvas API برای ترسیم گرافیک دوبعدی(۲D) در صفحات وب مورد استفاده قرار می گیرد.
شروع کار با WebGL:
برنامه های WebGL شامل کدهای نوشته شده توسط جاوااسکریپت است که در واحد پردازش گرافیکی یک کامپیوتر اجرا می شود. المان های WebGL می تواند با سایر المان های Html می تواند ترکیب شود.
اولین چیز مورد نیاز برای استفاده از WebGL برای ترسیم شکل <canvas> است. قطعه کد HTML زیر یک canvas را برای ترسیم ارائه می دهد.
<body>
<canvas id="glCanvas" width="۴۵۰" height="۴۸۰"></canvas>
</body>
آماده سازی محتوای WebGL:
تابع main() در کد جاوا اسکریپت زیر، زمانی که اسکریپت اجرا می شود، فراخوانی می شود و هدف آن اجرای محتوای WebGL و شروع ترسیم است.
main();
//
// start here
//
function main() {
const canvas = document.querySelector("#glCanvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (gl === null) {
alert("Unable to initialize WebGL. Your browser or machine may not support it.");
return;
}
// Set clear color to black, fully opaque
gl.clearColor(۰.۰, ۰.۰, ۰.۰, ۱.۰);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
}
در این کد، اولین کاری که انجام دادیم این است که یک ارتباط با المان canvas ایجاد و آن را به یک متغیر به نام canvas نسبت دادیم. سپس با استفاده از فراخوانی تابع getContext و قراردادن یک مقدار ورودی از نوع string در آن، یک WebGLRenderingContext برای آن می گیریم.
اگر مرورگر WebGL را پشتیبانی نکند، مقدار متغیر gl تهی می شود و ما یک پیغام به کاربر نمایش می دهیم. و اگر gl تهی نباشد، حاوی نمونه ای از WebGLRenderingContext خواهد بود و در اینجا ما با دستور clearcolor محتوا(context) را با رنگ مشکی پاک کردیم.
بنابراین شما اولین قدم برای یک طراحی و ترسیم اشکال دوبعدی یا سه بعدی در صفحه ی وب سایت خود برداشتید.
ادامه دارد…