WebGL - Grafik Ardışık Düzeni

3D grafikleri oluşturmak için bir dizi adım izlememiz gerekir. Bu adımlar olarak bilinirgraphics pipeline veya rendering pipeline. Aşağıdaki diyagram, WebGL grafik hattını göstermektedir.

Aşağıdaki bölümlerde, boru hattındaki her adımın rolünü tek tek tartışacağız.

JavaScript

WebGL uygulamaları geliştirirken GPU ile iletişim kurmak için Shader dil kodu yazıyoruz. JavaScript, aşağıdaki eylemleri içeren programın kontrol kodunu yazmak için kullanılır -

  • Initialize WebGL - JavaScript, WebGL bağlamını başlatmak için kullanılır.

  • Create arrays - Geometrinin verilerini tutmak için JavaScript dizileri oluşturuyoruz.

  • Buffer objects - Dizileri parametre olarak geçirerek tampon nesneleri (köşe ve dizin) oluşturuyoruz.

  • Shaders - JavaScript kullanarak gölgelendiricileri oluşturur, derler ve bağlarız.

  • Attributes - Öznitelikler oluşturabilir, etkinleştirebilir ve bunları JavaScript kullanarak tampon nesnelerle ilişkilendirebiliriz.

  • Uniforms - Üniformaları JavaScript kullanarak da ilişkilendirebiliriz.

  • Transformation matrix - JavaScript kullanarak dönüşüm matrisi oluşturabiliriz.

Başlangıçta gerekli geometri için verileri oluştururuz ve bunları tamponlar şeklinde gölgelendiricilere iletiriz. Gölgelendirici dilinin öznitelik değişkeni, tepe gölgelendiricisine girdiler olarak iletilen arabellek nesnelerine işaret eder.

Köşe Gölgelendirici

Yöntemleri çağırarak render sürecini başlattığımızda drawElements() ve drawArray()köşe gölgelendiricisi, köşe arabelleği nesnesinde sağlanan her köşe için çalıştırılır. İlkel bir çokgenin her bir tepe noktasının konumunu hesaplar ve onu değişengl_position. Ayrıca aşağıdaki gibi diğer özellikleri de hesaplarcolor, texture coordinates, ve vertices normalde bir köşe ile ilişkilendirilen.

İlkel Montaj

Her bir tepe noktasının konumunu ve diğer ayrıntılarını hesapladıktan sonra, bir sonraki aşama, primitive assembly stage. Burada üçgenler birleştirilir ve rasterleştiriciye aktarılır.

Rasterleştirme

Rasterleştirme adımında, ilkelin son görüntüsündeki pikseller belirlenir. İki adımı vardır -

  • Culling- Başlangıçta çokgenin yönü (öne mi yoksa arkaya mı dönük?) Belirlenir. Görüntüleme alanında görünmeyen, yanlış yönlendirmeye sahip tüm üçgenler atılır. Bu sürece ayıklama denir.

  • Clipping- Üçgen kısmen görünüm alanının dışındaysa, görünüm alanının dışındaki kısım kaldırılır. Bu işlem kırpma olarak bilinir.

Fragment Shader

Parça gölgelendiricisi alır

  • köşe gölgelendiricisinden çeşitli değişkenlerdeki veriler,
  • rasterleştirme aşamasındaki ilkeller ve sonra
  • köşeler arasındaki her piksel için renk değerlerini hesaplar.

Parça gölgelendiricisi, her parçadaki her pikselin renk değerlerini depolar. Bu renk değerlerine, daha sonra tartışacağımız parça işlemleri sırasında erişilebilir.

Fragman İşlemleri

İlkeldeki her pikselin rengi belirlendikten sonra parça işlemleri gerçekleştirilir. Bu parça işlemleri aşağıdakileri içerebilir -

  • Depth
  • Renk arabelleği karışımı
  • Dithering

Tüm parçalar işlendikten sonra, bir 2D görüntü oluşturulur ve ekranda görüntülenir. frame buffer işleme hattının son hedefidir.

Çerçeve Arabelleği

Çerçeve arabelleği, sahne verilerini tutan grafik belleğinin bir bölümüdür. Bu arabellek, yüzeyin genişliği ve yüksekliği (piksel cinsinden), her pikselin rengi ve derinlik ve şablon arabellekleri gibi ayrıntıları içerir.