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



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

جلسه ۰۷ : آشنایی با Geometry در WebGL

  • دسته‌بندی‌ها :
جلسه ۰۷ : آشنایی با Geometry در WebGL
    • جزئیات
    • نوع محتواآموزشی

      مقدمه

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

      آشنایی با Geometry در WebGL

      پس از به دست آوردن WebGL context شما باید Geometry را در ابتدا (شی که می خواهید رسم کنید) تعریف کنید و آن را ذخیره کنید. در WebGL، جزئیات Geometry را تعریف می کنیم. به عنوان مثال، رأس، شاخص ها، رنگ اولیه را با استفاده از آرایه های جاوااسکریپت تعریف می کنیم. برای انتقال این جزئیات به برنامه های شیدر، ما باید اشیای بافر را ایجاد کنیم و آرایه های جاوا اسکریپت را که حاوی داده ها در بافر های مربوطه است، ذخیره کنیم (پیوست).
      توجه: بعدا، این اشیاء بافر با ویژگی های برنامه شیدر (vertex shader) مرتبط خواهند شد. در ادامه آشنایی با Geometry در WebGL به تعریف Required Geometry می پردازیم.

      تعریف Required Geometry

      یک مدل دو بعدی یا سه بعدی با استفاده از رأس ها، مش نامیده می شود. هر عنصر در یک mesh یک چند ضلعی نامیده می شود و چند ضلعی از ۳ یا بیش تر رأس ساخته شده است.
      برای رسم مدل در زمینه ارائه WebGL، شما باید رأس ها و شاخص ها را با استفاده از آرایه های جاوااسکریپت تعریف کنید. به عنوان مثال، اگر ما می خواهیم یک مثلث را که در مختصات {(۵،۵)، (-۵،۵)، (-۵، -۵)} قرار گرفته است، ایجاد کنیم، همانطور که در نمودار نشان داده شده است، سپس می توانید یک آرایه برای رأس ها ایجاد نمایید.

      مثال : 

       

      آشنایی با Geometry در WebGL

      آشنایی با Geometry در WebGL

      به طور مشابه، شما می توانید آرایه ای برای شاخص ها یا indices ایجاد کنید. شاخص ها برای مثلث فوق [۰، ۱، ۲] هستند و می توانند به صورت زیر تعریف شوند:

      مثال : 

      برای درک بهتر شاخص ها، مدل های پیچیده تر مانند مربع را در نظر بگیرید. ما می توانیم محیط را به صورت مجموعه ای از دو مثلث فزض نماییم. اگر (۰،۳،۱) و (۳،۱،۲) دو مثلث است با استفاده از آن قصد داریم یک مربع را بسازیم، سپس شاخص ها به صورت زیر تعریف خواهند شد:

      مثال : 

       

      آشنایی با Geometry در WebGL

      آشنایی با Geometry در WebGL

      توجه
      برای طراحی اولیه، WebGL دو روش زیر را فراهم می کند :
      ()drawArrays – با استفاده از این روش، ما رأس یا vertex را با استفاده از آرایه های جاوا اسکریپت اولیه منتقل می کنیم.
      ()drawElements – با استفاده از این روش، ما هر دو رأس و شاخص اولیه را با استفاده از آرایه جاوا اسکریپت منتقل می کنیم.

      در ادامه مباحث آشنایی با Geometry در WebGL به Buffer Objects می پردازیم.

      Buffer Objects

      یک Buffer Objects یک مکانیسم ارائه شده توسط WebGL است که نشان دهنده یک منطقه حافظه اختصاص یافته در سیستم است. در این Buffer Objects شما می توانید داده های مدل مورد نظر خود را به منظور رسم ،که مربوط به رأس، شاخص ها، رنگ و غیره هستند، ذخیره کنید.
      با استفاده از این Buffer Objects ، می توانید چندین داده را به یک برنامه شیدر (vertex shader) از طریق یکی از ویژگی های متغیر آن منتقل کنید. از آن جا که این Buffer Objects در حافظه گرافیکی قرار دارند، می توان آن ها را مستقیما رندر کرد، که به نوبه خود عملکرد را بهبود می بخشد.
      برای پردازش geometry دو نوع Buffer Objects  وجود دارد.

      Vertex buffer object (VBO)  – این داده های هر vertex از مدل گرافیکی را که قرار است رندر شود نگه دارد. ما از WebGLvertex buffer objects in WebGL برای ذخیره و پردازش داده ها در مورد رأس ها مانند مختصات رأس، normals، colors و coordinates بافت استفاده می کنیم.
      Index buffer objects (IBO)  – این شاخص (داده های شاخص) مدل گرافیکی را که قرار است رندر شود نگه می دارد.
      پس از تعریف Geometry مورد نیاز و ذخیره آن ها در آرایه های جاوا اسکریپت، شما باید این آرایه ها را به Buffer Objects منتقل کنید، از جایی که داده ها به برنامه های شیدر منتقل می شوند. مراحل زیر با اطلاعات ذخیره شده در بافر ها دنبال می شود.

      ۱. یک بافر خالی ایجاد کنید
      ۲. یک شیء آرایه مناسب را به بافر خالی مرتبط کنید.
      ۳. داده ها (رأس ها / شاخص ها) را با استفاده از یکی از آرایه های تایپ شده به بافر انتقال دهید.
      ۴. جدا کردن بافر (اختیاری).

      ایجاد یک بافر

      برای ایجاد یک buffer object خالی، WebGL یک روش به نام ()createBuffer را فراهم می کند. این روش یک شی بافر تازه ایجاد شده را بازمی گرداند،  اگر ایجاد موفقیت آمیز باشد.در غیر این و در صورت خرابی،  مقدار صفر یا null برمی گردد. برای ایجاد یک بافر از کد زیر استفاده کنید.

      مثال : 

      توجه داشته باشید – gl متغیر مرجع برای WebGL context فعلی است.

      اتصال به بافر

      پس از ایجاد یک شیء بافر خالی، شما باید یک بافر آرایه مناسب (هدف) را به آن متصل کنید. WebGL یک روش به نام ()bindBuffer  برای این منظور فراهم می کند.

      Syntax

      دستور یا نحوه ی روش ()bindBuffer  به شرح زیر است .

      مثال : 

      این روش دو پارامتر را قبول می کند که در زیر بحث می شود.
      target – اولین متغیر یک مقدار enum است که نشان دهنده نوع بافر است که ما می خواهیم آن را به بافر خالی مرتبط کنیم. شما دو مقدار enum را از پیش تعریف شده به عنوان گزینه برای این پارامتر استفاده می کنید. آن ها
      ARRAY_BUFFER که نشان دهنده داده های رأس یا vertex است.
      ELEMENT_ARRAY_BUFFER که نشان دهنده داده های index است.
      Object of vvvvv– دومین متغیر، متغیر buffer object که در مرحله قبل ایجاد شده است. متغیر می تواند از یک شیء بافر vertex یا یک شیء بافر index باشد.

      مثال

      قطعه کد زیر نشان می دهد که چگونه از روش ()bindBuffer استفاده کنید.

      مثال : 

      در ادامه انتقال داده ها به بافر در WebGL رو خواهیم داشت.

      انتقال داده ها به بافر در WebGL

      گام بعدی انتقال داده ها (رأس ها / شاخص ها) به بافر است. تا جایی که داده ها به شکل یک آرایه و قبل از انتقال آن به بافر، ما باید آن را در یکی از آرایه های Typed در WebGL قرار دهیم. WebGL یک روش با نام ()bufferData برای این منظور فراهم می کند.

      Syntax

      نحوه روش ()bufferData به شرح زیر است .

      مثال : 

      این روش سه پارامتر را قبول می کند و در زیر بحث می شود .
      target – اولین پارامتر مقدار enum است که نشان دهنده نوع آرایه بافر است که ما استفاده کردیم. گزینه های این پارامتر عبارتند از:
      ARRAY_BUFFER که نشان دهنده داده های vertex است.
      ELEMENT_ARRAY_BUFFER که نشان دهنده داده های index است.
      Object data – پارامتر دوم مقدار شیء است که حاوی اطلاعاتی است که باید به شیء بافر نوشته شود. در اینجا ما باید داده ها را با استفاده از آرایه های Typed منتقل کنیم.
      Usage – پارامتر سوم این روش یک متغیر enum است که نحوه استفاده از داده های شیء بافر (داده های ذخیره شده) را برای رسم اشکال مشخص می کند. سه گزینه برای این پارامتر وجود دارد که در زیر آمده است.
      gl.STATIC_DRAW – داده ها یک بار مشخص شده بارها مورد استفاده قرار می گیرند.
      gl.STREAM_DRAW – داده ها یکبار مشخص شده و چند بار استفاده می شوند.
      gl.DYNAMIC_DRAW – داده های مشخص شده بارها و بارها مورد استفاده قرار می گیرند.

      مثال

      قطعه کد زیر نشان می دهد که چگونه از روش ()bufferData استفاده کنید. فرض کنید که رأس ها و شاخص ها آرایه هایی هستند که داده های رأس و شاخص را دارند.

      مثال : 

      تا این جا به انتقال داده ها به بافر در WebGL رسیدیم .مبحث رو با آرایه های Typed ادامه میدیم.

      آرایه های Typed

      WebGL یک نوع خاص از آرایه ای به نام آرایه های Typed برای انتقال عناصر داده مانند عددی و بافت را فراهم می کند. این آرایه های Typed حجم زیادی از داده ها را ذخیره می کنند و آنها را در فرمت باینری بومی پردازش می کنند که نتیجه عملکرد بهتر است. آرایه های Typed استفاده شده توسط WebGL عبارتند از Int8Array، Uint8Array، Int16Array، Uint16Array، Int32Array، UInt32Array، Float32Array و Float64Array

      توجه داشته باشید

      به طور کلی، برای ذخیره داده های vertex ما از Float32Array استفاده می کنیم؛ و برای ذخیره داده های index از Uint16Array استفاده می کنیم.
      شما می توانید آرایه های Typed درست مانند آرایه های جاوااسکریپت با استفاده از کلمه کلیدی جدید ایجاد کنید.

      Unbind کردن بافرها

      توصیه می شود پس از استفاده از آن ها بافر ها را جدا کنید. این را می توان با عبور یک مقدار null در مکان شی بافر انجام داد، همانطور که در زیر نشان داده شده است.

      مثال : 

      WebGL روش های زیر را برای انجام عملیات بافر فراهم می کند:

      ردیفمتدها وتوضیحات
      ۱

      void bindBuffer (enum target, Object buffer)

      target − ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

      ۲

      void bufferData(enum target, long size, enum usage)

      target − ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

      usage − STATIC_DRAW, STREAM_DRAW, DYNAMIC_DRAW

      ۳

      void bufferData (enum target, Object data, enum usage)

      target and usage − Same as for bufferData above

      ۴

      void bufferSubData(enum target, long offset, Object data)

      target − ARRAY_BUFFER, ELEMENT_ARRAY_BUFFER

      ۵Object createBuffer()
      ۶void deleteBuffer(Object buffer)
      ۷

      any getBufferParameter(enum target, enum pname)

      target − ARRAY_BUFFER, ELEMENT_ ARRAY_BUFFER

      pname − BUFFER_SIZE, BUFFER_USAGE

      ۸bool isBuffer(Object buffer)

      خب تا اینجا از مباحث آشنایی با Geometry در WebGL به انتقال داده ها به بافر در WebGL و Unbind کردن بافرها رسیدیم .ادامه مباحث رو واسه جلسه بعد میزاریم.

      کلام پایانی

      در قسمت آشنایی با Geometry در WebGL بودیم با بافرها وانواع آن و ویژگی های هر یک آشنا شدیم. همچنین درمورد انتقال داده ها به بافر در WebGL صحبت نمودیم و می دانیم باید قبل از انتقال داده ها به بافر در WebGL ما باید آن را در یکی از آرایه های Typed در WebGL قرار می دادیم.

      QR:  جلسه ۰۷ : آشنایی با Geometry در WebGL
      به اشتراک بگذارید