دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۵
  • اردیبهشت

جلسه ۰۴ : WebGL – آشنایی با Graphics Pipeline

  • دسته‌بندی‌ها :
جلسه ۰۴ : WebGL – آشنایی با Graphics Pipeline
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

      سلام درود خدمت همراهان همیشگی سایت پی وی لرن . با آموزش WebGL همراهتون هستیم. پایپ لاین گرافیک به سلسله‌ای از مراحل که برای ساختن صفحات دو بعدی و نمایان کردن صحنه‌های سه بعدی استفاده می‌شود گویند. به زبان ساده وقتی یک نگاره سه بعدی مانند تصاویری از یک بازی رایانه‌ای در رایانه ایجاد می‌گردد، Graphics Pipeline به مجموعه پردازش‌هایی که این تصویر را برای نمایشگر قابل دیدن می‌سازد گویند. در این قسمت مراحل آشنایی با Graphics Pipeline رو بررسی نموده و نمودار Pipeline گرافیکی WebGL رو خواهیم دید

      آشنایی با Graphics Pipeline

      برای ارائه گرافیک سه بعدی ما باید مراحل زیر را دنبال کنیم.

      این مراحل به عنوان graphics pipeline یا rendering pipeline شناخته می شوند. نمودار زیر نمودار Pipeline گرافیکی WebGL را نشان می دهد.

       

      نمودار زیر نمودار Pipeline گرافیکی WebGL - آشنایی با Graphics Pipeline

      نمودار زیر نمودار Pipeline گرافیکی WebGL – آشنایی با Graphics Pipeline

      در بخش های زیر، ما در مورد یکی از نقش های هر مرحله در Pipeline بحث می کنیم.

      JavaScript

      در حال توسعه برنامه های کاربردی WebGL، ما کد زبان شیدر را برای ارتباط با GPU می نویسیم. جاوا اسکریپت برای نوشتن کد کنترل برنامه استفاده می شود که شامل موارد زیر می باشد:
      Initialize WebGL – جاوا اسکریپت برای مقداردهی کردن کانتکست WebGL استفاده می شود.
      ایجاد آرایه ها – ما آرایه های جاوااسکریپت را برای نگه داری داده های هندسی ایجاد می کنیم.
      Buffer objects – با گذراندن آرایه ها به عنوان پارامترها، Buffer objects (ارقام و شاخص) ایجاد می کنیم.
      Shaders – Shaders ها را ما با استفاده از جاوا اسکریپت ایجاد، کامپایل و لینک می کنیم.
      Attributes – ما می توانیم ها Attributes ایجاد کنیم، آن ها را فعال کنیم و آن ها را با Buffer objects با استفاده از جاوااسکریپت مرتبط کنیم.
      Uniforms – ما همچنین می توانیم Uniforms را با استفاده از جاوا اسکریپت مرتبط کنیم.
      Transformation matrix– با استفاده از جاوا اسکریپت، ما می توانیم Transformation matrix را ایجاد کنیم.

      به طور ذاتی داده ها را برای هندسه مورد نیاز ایجاد می کنیم و آن ها را به shaders ها در فرم بافر ها انتقال می دهیم. خصیصه متغیر زبان shaders به اشیاء بافر اشاره دارد که به عنوان ورودی ها به شیدر vertex منتقل می شود.

      Vertex Shader

      هنگامی که فرایند رندر را با فراخوانی ()methods drawElements و ()drawArray آغاز می کنیم، ورتکس شیدر برای هر ورتکس ارائه شده در شیء ورتکس بافر اجرا می شود.  این موقعیت هر ورتکس یک چند ضلعی اولیه را محاسبه می کند و آن را در موقعیت متفاوت gl_position ذخیره می کند. همچنین ویژگی های دیگر مانند رنگ، مختصات بافت و ورتکس هایی که معمولا با یک ورتکس با هم مرتبط هستند، محاسبه می شود.

      Primitive Assembly

      پس از محاسبه موقعیت و سایر جزئیات هر یک از ورتکس ها، مرحله بعدی مرحله مونتاژ اولیه است. در این جا مثلث ها جمع شده و به rasterizer منتقل می شوند.

      Rasterization

      در مرحله شفاف سازی، پیکسل ها در تصویر نهایی ابتدایی تعیین می شوند. این دو مرحله دارد .
      Culling – در ابتدا جهت گیری  چند ضلعی تعیین می شود. تمام مثلث هایی که با جهت گیری نامناسب در ناحیه دید قابل مشاهده نیستند، از بین می روند. این فرآیند culling نامیده می شود.
      Clipping– اگر بخشی از یک مثلث در ناحیه دید باشد، قسمت خارج از ناحیه view حذف می شود. این فرایند به عنوان Clipping شناخته می شود.

      Fragment Shader

      fragment shader می شود:
      داده های ورتکس شیدر در متغیرهای مختلف
      ابتدا از مرحله rasterization، و سپس
      مقادیر رنگ برای هر پیکسل بین ورتکس ها را محاسبه کنید.
      شیدر fragment مقادیر رنگ هر پیکسل را در هر fragment ذخیره می کند.

      این مقادیر رنگی را می توان در طول عملیات fragment مشاهده کرد که ما در آینده آن را خواهیم دید.

      Fragment Operations

      Fragment Operations  پس از تعیین رنگ هر پیکسل در ابتدا انجام می شود. این عملیات Fragment ممکن است شامل موارد زیر باشد .
      عمق
      ترکیب بافر رنگ
      تقسیم
      هنگامی که تمام Fragment ها پردازش می شوند، یک تصویر ۲D شکل گرفته و روی صفحه نمایش داده می شود. بافر frame مقصد نهایی رندرینگ pipeline است.

       

      Frame Buffer

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

      این بافر حاوی اطلاعاتی از قبیل عرض و ارتفاع سطح (در پیکسل)، رنگ هر پیکسل و عمق و بافرهای استنسیل است.

      کلام پایانی

      در این قسمت مراحل آشنایی با Graphics Pipeline رو بررسی نموده و نمودار Pipeline گرافیکی WebGL رو مشاهده نمودیم.

      QR:  جلسه ۰۴ : WebGL – آشنایی با Graphics Pipeline
      به اشتراک بگذارید