مقدمه
سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. برای نوشتن یک برنامه WebGL مراحلی از جمله ایجاد بوم HTML5 ، دریافت webGL ، دریافت Canvas ID در WebGL و… را باید طی نمود. دراین بخش به نوشتن یک برنامه WebGL خواهیم پرداخت.
کانتکست در WebGL
برای نوشتن یک برنامه WebGL ،گام اول به دست آوردن context object رندر WebGL است. این شی با طراحی Buffer WebGL تعامل دارد و می تواند تمامی روش های WebGL را فراخوانی کند. عملیات زیر برای به دست آوردن context object انجام می شود .
ایجاد یک بوم HTML5
دریافت شناسه بوم
دریافت WebGL
ایجاد عنصر Canvas HTML-5
در فصل ۵، ما در مورد چگونگی ایجاد یک عنصر HTMLV5 می توانیم صحبت کنیم. درون سند HTML-5، یک بوم را بنویسیم، نام آن را بگذاریم و آن را به عنوان یک پارامتر به شناسه attribute ارسال کنیم. همچنین ما می توانیم ابعاد بوم را با استفاده از ویژگی های عرض و ارتفاع (اختیاری) تعریف کنید.
مثال برای نوشتن یک برنامه WebGL
مثال زیر نشان می دهد که چگونه می توان یک عنصر canvas با ابعاد ۵۰۰ × ۵۰۰ را ایجاد کرد. ما یک مرز را به بوم با استفاده از CSS برای دید ایجاد کردیم. کد زیر را در یک فایل با نام my_canvas.html کپی و پر می کنیم.
مثال :
| <!DOCTYPE HTML> <html> <head> <style> #mycanvas{border:1px solid blue;} </style> </head> <body> <canvas id = "mycanvas" width = "300" height = "300"></canvas> </body> </html> |
دریافت Canvas ID در WebGL
در زیر دریافت Canvas ID در WebGL رو داریم:
پس از ایجاد Canvas یا بوم، شما باید یک WebGL context را دریافت کنید. اولین چیزی که باید انجام دهید برای به دست آوردن یک context طراحی WebGL ، بدست آوردن شناسه عنصر Canvas کنونی است. Canvas ID با فراخوانی (Document Object Model) با استفاده از روش ()getElementById به دست می آید. این روش مقدار رشته را به عنوان پارامتر پذیرفته است، بنابراین نام canvas فعلی را به آن منتقل می کنیم.
برای مثال، اگر نام canvas به صورت my_canvas باشد، سپس دریافت Canvas ID در WebGL همانند زیر نشان داده می شود.
مثال :
| var canvas = document.getElementById('my_Canvas'); |
WebGL Context را دریافت کنید.
برای به دست آوردن Object WebGLRenderingContext (یا WebGL Drawing context object یا simply WebGL context)، روش ()getContext را از HTMLCanvasElement فعلی فراخوانی کنید. ساختار ()getContext به شرح زیر است .
مثال :
| canvas.getContext(contextType, contextAttributes); |
رشته webgl یا web-experiment-experimental را به عنوان contentType منتقل کنید. پارامتر contextAttributes اختیاری است. (با ادامه این مرحله، مطمئن شوید که مرورگر شما WebGL نسخه ۱ را اجرا می کند (OpenGL ES 2.0)).
قطعه کد زیر نشان می دهد چگونگی به دست آوردن context رندر WebGL. در این جا gl متغیر مرجع برای context object حاصل شده است.
مثال :
| var canvas = document.getElementById('my_Canvas'); var gl = canvas.getContext('experimental-webgl'); |
WebGLContextAttributes
پارامتر WebGLContextAttributes اجباری نیست این پارامتر گزینه های مختلفی را فراهم می کند که مقادیر بولین را همانطور که در زیر آورده شده می پذیرد.
| ردیف | ویژگی ها و شرح |
|---|
| ۱ | Alpha اگر مقدار آن درست باشد، یک بافر آلفا به canvas می دهد.
به طور پیش فرض، مقدار آن درست است. |
| ۲ | depth اگر مقدار آن درست باشد، شما یک بافر drawing که حاوی یک بافر depth حداقل ۱۶ بیت است، دریافت خواهید کرد.
به طور پیش فرض، مقدار آن درست است. |
| ۳ | stencil اگر مقدار آن درست باشد، یک بافر drawing را که شامل یک بافر استنسیل حداقل ۸ بیت است، دریافت خواهید کرد.
به طور پیش فرض، مقدار آن نادرست است. |
| ۴ | antialias اگر مقدار آن درست باشد، یک بافر drawing به دست می آورید که anti aliasing را انجام می دهد.
به طور پیش فرض، مقدار آن درست است. |
| ۵ | premultipliedAlpha اگر مقدار آن درست باشد، شما یک بافر drawing که حاوی رنگ با pre-multiplied alpha را دریافت خواهید کرد.
به طور پیش فرض، مقدار آن درست است. |
| ۶ | preserveDrawingBuffer اگر مقدار آن درست باشد، بافر ها پاک می شوند و ارزش های خود را حفظ می کنند تا زمانی که نویسنده آن را پاک کند یا آن را تغییر دهد.
به طور پیش فرض، مقدار آن نادرست است. |
قطعه کد زیر نشان می دهد که چطور می توان یک ساختار WebGL را با یک بافر استنسیل ایجاد کرد که آنتی aliasing را اجرا نخواهد کرد.
مثال :
| var canvas = document.getElementById('canvas1'); var context = canvas.getContext('webgl', { antialias: false, stencil: true }); |
در زمان ایجاد WebGLRenderingContext، یک بافر رسم یا drawing ایجاد شده است. Context object حالت OpenGL را مدیریت می کند و به بافر drawing رندر می کند.
WebGLRenderingContext
این رابط اصلی در WebGL است. این نشان دهنده ساختار WebGL است. این رابط شامل تمام روش هایی است که برای انجام وظایف مختلف در Buffer Drawing مورد استفاده قرار می گیرد. صفات این رابط در جدول زیر داده شده است.
| ردیف | ویژگی ها و شرح |
|---|
| ۱ | Canvas این اشاره به عنصر canvas دارد که این context را ایجاد کرده است. |
| ۲ | drawingBufferWidth این ویژگی نشان دهنده عرض فعلی بافر drawing است. این ممکن است متفاوت از ویژگی عرض HTMLCanvasElement باشد. |
| ۳ | drawingBufferHeight این ویژگی نشان دهنده ارتفاع فعلی بافر drawing است. ممکن است متفاوت از ویژگی ارتفاع HTMLCanvasElement باشد. |
کلام پایانی
دوستان عزیز متشکریم از همراهیتون با مجموعه آموزشی webGL .در ادامه مطالب جالب دیگری از WebGL رو خواهیم داشت.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
