WebGl(Web Graphics Library) یک API جاوا اسکریپت برای ترسیم گرافیک های دوبعدی و سه بعدی، بدون استفاده از افزونه، در تمامی مرورگرهای سازگار می باشد.  WebGL این کار را با معرفی یک API بسیار شبیه به OpenGL ES2.0 انجام می دهد که توسط المان <canvas> در HTML5 مورد استفاده قرار می گیرد. همچنین المان <canvas> توسط Canvas API برای ترسیم گرافیک دوبعدی(۲D) در صفحات وب مورد استفاده قرار می گیرد.

شروع کار با WebGL:

برنامه های WebGL شامل کدهای نوشته شده توسط جاوااسکریپت است که در واحد پردازش گرافیکی یک کامپیوتر اجرا می شود. المان های WebGL می تواند با سایر المان های Html می تواند ترکیب شود.

آماده سازی برای ترسیم سه بعدی(۳D):

اولین چیز مورد نیاز برای استفاده از 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) را با رنگ مشکی پاک کردیم.

 

بنابراین شما اولین قدم برای یک طراحی و ترسیم اشکال دوبعدی یا سه بعدی در صفحه ی وب سایت خود برداشتید.

 

ادامه دارد…

 

برای دانلود فایل واردشوید
ورود ثبت نام

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.