جلسه ۰۳ : مبانی WebGL

• جزئیات
• نوع محتواآموزشی

مقدمه

سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. WebGL عمدتا یک API  سطح پایین است و نه یک API 3D. شما باید یک بردار را به نمایندگی از تصویر منتقل کنید. سپس بردار داده شده با استفاده از OpenGL SL به قالب پیکسل تبدیل می شود و تصویر را بر روی صفحه نمایش می دهد. نوشتن برنامه WebGL شامل مجموعه ای از مراحل است بنابراین ما در این فصل و در قسمت مبانی WebGL ، سیستم مختصات در WebGL را توضیح خواهیم داد.

مبانی WebGL

سیستم مختصات در WebGL

همانند هر سیستم ۳D دیگر، محورهای x، y و z در WebGL هم وجود دارد، جایی که محور Z عمق را نشان می دهد.

مختصات در WebGL محدود به (۱، ۱، ۱) و (-۱، -۱، – ۱) است. این بدان معنی است که اگر شما در صفحه نمایش گرافیکی WebGL را به عنوان یک مکعب در نظر بگیرید، یک گوشه مکعب (۱، ۱، ۱) و گوشه مقابل (-۱، -۱، -۱) خواهد بود. WebGL چیزی را نمایش نمی دهد که فراتر از این مرزها باشد.
نمودار زیر نقشه سیستم مختصات WebGL را نشان می دهد. محور Z نشان دهنده عمق است. مقدار مثبت z نشان می دهد که جسم نزدیک به صفحه نمایش یا بیننده است،

در حالی که یک مقدار منفی از z نشان می دهد که جسم دور از صفحه است. به همین ترتیب، مقدار مثبت x نشان می دهد که جسم در سمت راست صفحه است و مقدار منفی نشان می دهد که جسم در سمت چپ است.

به طور مشابه، مقادیر مثبت و منفی y نشان می دهد که آیا جسم در بالای صفحه یا در قسمت پایین صفحه قرار دارد.

مبانی WebGL – سیستم مختصات در WebGL

گرافیک WebGL

پس از گرفتن کانتکست WebGL از موضوع بوم، شما می توانید با استفاده از API WebGL در جاوا اسکریپت، عناصر گرافیکی را طراحی کنید.
در این جا برخی از اصطلاحات بنیادی که قبل از شروع با WebGL باید بدانید، وجود دارد.

Vertices

به طور کلی، برای کشیدن اشیاء مانند یک چند ضلعی، نقاطی را در صفحه علامت گذاری می کنیم و به چند ضلعی مورد نظر می رسیم. یک رأس یک نقطه است که اتصال لبه های یک شی ۳D را تعریف می کند. این با مقادیر سه نقطه شناور روی محور x، y، z به ترتیب محاسبه می شود.

مثال

در مثال زیر، ما در حال ساخت یک مثلث با ورتکس ها یا رأس های (۰٫۵، ۰٫۵)، (-۰٫۵، ۰٫۵)، (-۰٫۵، -۰٫۵) هستیم.

مبانی WebGL – سیستم مختصات در WebGL

توجه داشته باشید – ما باید این ورتکس ها را بصورت دستی با استفاده از آرایه های جاوا ذخیره کنیم و آن ها را به pipeline رندر WebGL با استفاده از بافر vertex منتقل کنیم.

Indices

در WebGL، مقادیر عددی برای شناسایی رأس ها استفاده می شود. این مقادیر عددی به عنوان شاخص ها شناخته می شوند. این شاخص ها برای رسم شبکه در WebGL استفاده می شود.

مبانی WebGL – سیستم مختصات در WebGL

توجه داشته باشید – درست مانند رأس، ما شاخص ها را با استفاده از آرایه های جاوا ذخیره می کنیم و آن ها را به pipeline رندر WebGL با استفاده از بافر شاخص هدایت می کنیم.

Arrays

بر خلاف OpenGL و JoGL، در WebGL هیچ روش از پیش تعریف شده وجود ندارد که به طور مستقیم رأس ها را ارائه دهد. ما باید آن ها را بصورت دستی با استفاده از آرایه های جاوا ذخیره کنیم.

مثال

Buffers

بافرها بخشهای حافظه ی WebGL هستند که داده ها را نگه می دارند. بافر های مختلفی از جمله bufer، buffer frame، bufer frame و bufer index وجود دارد. بافر حقیقی و بافر شاخص برای توصیف و پردازش هندسه مدل استفاده می شود.
اشیاء بافر Vertex اطلاعات مربوط به رأس ها را ذخیره می کنند، در حالی که اشیاء بافر Index، اطلاعات مربوط به شاخص ها را ذخیره می کنند. پس از ذخیره رأس ها به آرایه ها، ما آن ها را به pipeline گرافیکی WegGL با استفاده از این اشیاء Buffer منتقل می کنیم.
بافر قاب بخشی از حافظه گرافیکی است که اطلاعات صحنه را نگه می دارد. این بافر شامل جزئیاتی مانند عرض و ارتفاع سطح (در پیکسل)، رنگ هر پیکسل، عمق و بافرهای استنسیل است.

Mesh

برای رسم اشیاء ۲D یا ۳D دو روش به وسیله API WebGL  یعنی ()drawArrays و ()drawElements را فراهم می کند.

این دو روش پارامتری به نام mode را می پذیرند که با استفاده از آن شما می توانید جسم مورد نظر خود را انتخاب کنید. گزینه های ارائه شده توسط این فیلد به نقاط، خطوط و مثلث محدود می شود.
برای رسم یک شی ۳D با استفاده از این دو روش، ما باید یک یا چند چند ضلعی اولیه را با استفاده از نقاط، خطوط یا مثلث بسازیم.

پس از آن، با استفاده از این چند ضلعی های اولیه، می توانیم یک مش ایجاد کنیم.
یک شیء ۳D کشیده شده با استفاده از چند ضلعی اولیه یک مش نامیده می شود.

WebGL چندین راه برای زسم ۳D اشیا گرافیکی ارائه می دهد، با این حال کاربران به طور معمول ترجیح می دهند یک مش را بسازند.

مثال

در مثال زیر شما می توانید مشاهده کنید که ما یک مربع را با استفاده از دو مثلث → {۱، ۲، ۳} و {۴، ۱، ۳} کشیده ایم.

سیستم مختصات در WebGL – مبانی WebGL

Shader Programs

ما معمولا برای ساخت مش ها از مثلث استفاده می کنیم. از آنجایی که WebGL از محاسبات شتاب دهنده گرافیکی استفاده می کند، اطلاعات مربوط به این مثلث ها باید از پردازنده به GPU منتقل شود که مقدار زیادی سربار ارتباطات را می گیرد.
WebGL یک راه حل برای کاهش سربار ارتباطات را فراهم می کند.

از آنجایی که از (Embedded System Shader Language) استفاده می شود که روی GPU اجرا می شود، تمامی برنامه های مورد نیاز را برای رسم عناصر گرافیکی را در سیستم کلاینت با استفاده از برنامه های Shader (برنامه هایی که ما می نویسیم از استفاده از OpenGL ES Shading Language / GLSL استفاده می کند) می نویسیم.
این shaders برنامه هایی برای GPU هستند و زبان مورد استفاده برای نوشتن برنامه های shader ها GLSL است.

در این shader دقیقا مشخص می کنیم که چگونه رأس ها، تحولات، مواد، چراغها و دوربین با یکدیگر ارتباط برقرار می کنند تا یک تصویر خاص ایجاد کنند.
به طور خلاصه، این یک قطعه است که الگوریتم هایی را برای دریافت پیکسل برای یک مش استفاده می کند. ما در مورد Shader ها در فصل بعد بحث خواهیم کرد. دو نوع Shader وجود دارد. Vertex Shader و Fragment Shader .

Vertex Shader

Vertext shade کد برنامه ای است که در هر ورتکس نامیده می شود. این برای تبدیل (حرکت) هندسی (مثل: مثلث) از یک مکان به مکان دیگر استفاده می شود.

این داده های هر راس یا vertex (داده های هر راس) را  مانند مختصات رأس، عادی، رنگ ها و مختصات بافت را مدیریت می کند.
در کد ES GL سایه زن راس، برنامه نویسان باید مشخصه هایی را برای رسیدگی به داده ها تعریف کنند. این صفات به یک Object Buffer Vertex نوشته شده در جاوا اسکریپت اشاره دارد.
وظایف زیر را می توان با استفاده از Vertex Shader انجام داد.

انتقال ورتکس
انتقال عادی و عادی سازی
ساختار مختصات بافت
تبدیل مختصات بافت
روشنایی
اپلیکیشن مواد رنگ
ورتکس
خصوصیات

(Pixel Shader)

یک مش توسط چند مثلث تشکیل شده است، و سطح هر یک از مثلث ها به عنوان یک قطعه شناخته شده است. شبیه ساز قطعه کد است که بر روی تمام پیکسل های هر قطعه اجرا می شود. این برای محاسبه و پر کردن رنگ در پیکسل های مختلف نوشته شده است.
وظایف زیر می تواند با استفاده از شیدر Fragment انجام شود.
عملیات بر روی مقادیر بینابینی
دسترسی به بافت
نرم افزار بافت
مه
مجموع رنگ

Fragment Shader(Pixel Shader)

متغیرهای OpenGL ES SL

فرم کامل OpenGL ES SL OpenGL به شکل OpenGL Embedded System Shading Language است. ES SL برای اداره داده ها در برنامه های شیدر سه نوع متغیر را فراهم می کند. آنها به شرح زیر هستند .
Attributes – این متغیرها مقادیر ورودی برنامه شیدر رأس را نگه می دارند. Attributes به اشیاء بافر رأس اشاره دارند که حاوی داده های هر ورتکس است. هر بار که شیدر ورتکس فراخوانی می شود، attributes به VBO از ورتکس های مختلف اشاره می کنند.
Uniforms – این متغیرها داده های ورودی را که در شیدرهای ورتکس و fragment مشترکند مانند موقعیت نور، مختصات بافت و رنگ رایج ،نگه می دارد.
Varyings – اين متغيرها براي انتقال داده ها از شیدر ورتکس به شيدر fragment مورد استفاده قرار مي گيرند.

کلام پایانی

خب تا این جا مطالب رو راجع به مبانی WebGL و سیستم مختصات در WebGL می دونیم. دیدیم که سیستم مختصات در WebGL به مانند سایر اشکال سه بعدی شامل محورهای x، y و z می باشد.