RenderingNG'deki temel veri yapıları

Chris Harrelson
Chris Harrelson
X GitHub
Daniel Cheng
Daniel Cheng
GitHub
Philip Rogers
Philip Rogers
GitHub
Koji Ishi
Koji Ishi
GitHub
Ian Kilpatrick
Ian Kilpatrick
GitHub
Kyle Charbonneau
Kyle Charbonneau

Temel veri yapılarına göz atalım. Bunlar, oluşturma ardışık düzeninin girişleri ve çıkışıdır.

Bu veri yapıları şunlardır:

  • Çerçeve ağaçları, hangi web dokümanlarının oluşturma işlemi içinde olduğunu ve hangi Blink oluşturucuyu temsil eden yerel ve uzak düğümlerden oluşur.
  • Sabit parça ağacı, düzen kısıtlama algoritmasının çıkışını (ve girdisini) temsil eder.
  • Özellik ağaçları, bir web dokümanının dönüştürme, klip, efekt ve kaydırma hiyerarşilerini temsil eder. Bunlar ardışık düzende kullanılır.
  • Ekran listeleri ve boyama parçaları, kafes ve katmanlaştırma algoritmalarına yapılan girişlerdir.
  • Birleştirici çerçeveler, GPU'yu kullanarak çizim yapmak için kullanılan yüzeyleri, oluşturma yüzeylerini ve GPU doku parçalarını içerir.

Bu veri yapılarını gözden geçirmeden önce aşağıdaki örnek, mimari incelemesinden alınan bir örneği temel alır. Bu örnek, bu belgenin tamamında veri yapılarının buna nasıl uygulanacağına dair gösterimlerle birlikte kullanılmıştır.

<!-- Example code -->
<html>
  <div style="overflow: hidden; width: 100px; height: 100px;">
    <iframe style="filter: blur(3px);
      transform: rotateZ(1deg);
      width: 100px; height: 300px"
      id="one" src="foo.com/etc"></iframe>
  </div>
  <iframe style="top:200px;
    transform: scale(1.1) translateX(200px)"
    id="two" src="bar.com"></iframe>
</html>

Ağaçları çerçevele

Chrome bazen üst çerçevesinden farklı bir oluşturma işleminde kaynaklar arası çerçeve oluşturmayı seçebilir.

Örnek kodda toplam üç çerçeve vardır:

İki iframe içeren foo.com üst çerçevesi.

Chromium, site izolasyonu ile bu web sayfasını oluşturmak için iki oluşturma işlemi kullanır. Her oluşturma işlemi, söz konusu web sayfası için çerçeve ağacını temsil eder.

İki oluşturma işlemini temsil eden iki çerçeve ağacı.

Farklı bir işlemde oluşturulan kare, uzak kare olarak temsil edilir. Uzak çerçeve, oluşturma işleminde bir yer tutucu görevi görmek için gereken minimum bilgileri (örneğin, boyutları) içerir. Aksi takdirde, uzak çerçeve gerçek içeriğini oluşturmak için gereken bilgileri içermez.

Buna karşılık yerel çerçeve, standart oluşturma ardışık düzeninden geçen bir çerçeveyi temsil eder. Yerel çerçeve, söz konusu çerçeveye ait verileri (DOM ağacı ve stil verileri gibi) oluşturulabilecek ve görüntülenebilecek bir öğeye dönüştürmek için gereken tüm bilgileri içerir.

Oluşturma ardışık düzeni, yerel bir çerçeve ağaç parçasının ayrıntı düzeyinde çalışır. Ana çerçeve olarak foo.com içeren daha karmaşık bir örneği değerlendirin:

<iframe src="bar.com"></iframe>

Ayrıca şu bar.com alt çerçeve:

<iframe src="foo.com/etc"></iframe>

Hâlâ yalnızca iki oluşturucu olsa da şu anda üç yerel çerçeve ağacı parçası vardır. Bunlardan ikisi foo.com oluşturma işleminde, bir tanesi ise bar.com için oluşturma işlemindedir:

İki oluşturma ve üç çerçeve ağacı parçasının temsili.

Web sayfası için bir oluşturucu çerçevesi oluşturmak amacıyla Viz, aynı anda üç yerel çerçeve ağacının her birinin kök çerçevesinden bir birleştirici çerçeve ister ve ardından bunları birleştirir. Ayrıca birleştirici çerçeveleri bölümüne bakın.

foo.com ana çerçevesi ve foo.com/other-page alt çerçevesi aynı çerçeve ağacının bir parçasıdır ve aynı işlemde oluşturulur. Bununla birlikte, iki çerçeve farklı yerel çerçeve ağacı parçalarının parçası oldukları için hâlâ bağımsız belge yaşam döngülerine sahiptir. Bu nedenle, tek bir güncellemede her ikisi için de tek bir birleştirici karesi oluşturulamaz. Oluşturma işlemi, foo.com/other-page için oluşturulan birleştirici çerçeveyi doğrudan foo.com ana çerçevenin birleştirici çerçevesine birleştirmek için yeterli bilgiye sahip değil. Örneğin, işlem dışı bar.com üst çerçevesi, iframe'i CSS ile dönüştürerek veya iframe'in bazı bölümlerini DOM'sindeki diğer öğelerle kapatarak foo.com/other-url iframe'inin görüntülenmesini etkileyebilir.

Görsel mülk güncelleme şelalesi

Cihaz ölçek faktörü ve görüntü alanı boyutu gibi görsel özellikler, oluşturulan çıkışı etkiler ve yerel çerçeve ağacı parçaları arasında senkronize edilmelidir. Her yerel çerçeve ağacı parçasının kökü, kendisiyle ilişkilendirilmiş bir widget nesnesine sahiptir. Görsel özellik güncellemeleri, kalan widget'lara yukarıdan aşağıya doğru uygulanmadan önce ana çerçevenin widget'ına gider.

Örneğin, görüntü alanı boyutu değiştiğinde:

Önceki metinde açıklanan işlemin şeması.

Bu işlem anlık olmadığından çoğaltılan görsel özellikler de senkronizasyon jetonu içerir. Viz birleştirici, tüm yerel çerçeve ağacı parçalarının geçerli senkronizasyon jetonuyla bir birleştirici çerçevesi göndermesini beklemek için bu senkronizasyon jetonunu kullanır. Bu işlem, birleştirici karelerinin farklı görsel özelliklerle karıştırılmasını önler.

Sabit parça ağacı

Sabit parça ağacı, oluşturma ardışık düzeninin düzen aşamasının çıktısıdır. Sayfadaki tüm öğelerin konumunu ve boyutunu temsil eder (dönüşümler uygulanmadan).

Her ağaçtaki parçaların, düzen gerektiren bir parça olarak işaretlenerek gösterimi.

Her parça, DOM öğesinin bir parçasını temsil eder. Genellikle öğe başına yalnızca bir parça bulunur, ancak yazdırırken farklı sayfalara, çok sütunlu bir bağlamda ise sütunlara bölünürse daha fazla parça olabilir.

Düzenden sonra her parça sabit hale gelir ve bir daha değiştirilmez. Ayrıca, birkaç ek kısıtlama da uyguluyoruz. Yapmadıklarımız:

  • Ağaçta tüm "yukarı" referanslara izin ver. (Çocuklar ebeveynlerine işaretçi bırakamaz.)
  • "baloncuk" verilerini kullanarak (çocuk ebeveyninden değil, yalnızca kendi alt kuruluşlarından gelen bilgileri okur).

Bu kısıtlamalar, bir parçayı sonraki düzen için yeniden kullanmamıza olanak tanır. Bu kısıtlamalar olmasaydı çoğu zaman ağacın tamamını yeniden oluşturmamız gerekirdi ve bu da oldukça maliyetli bir işti.

Çoğu düzen genellikle artımlı güncellemelerdir. Örneğin, kullanıcının bir öğeyi tıklamasına yanıt olarak kullanıcı arayüzünün küçük bir bölümünü güncelleyen bir web uygulaması. İdeal olarak düzen, yalnızca ekranda gerçekte değişen öğelerle orantılı olarak çalışmalıdır. Bunu, önceki ağacın mümkün olduğunca çok sayıda bölümünü yeniden kullanarak başarabiliriz. Bu, (genellikle) yalnızca ağacın omurgasını yeniden inşa etmemiz gerektiği anlamına gelir.

Gelecekte bu sabit tasarım, gerekirse sabit parça ağacını iş parçacığı sınırlarından geçirmek (farklı bir iş parçacığında sonraki aşamaları gerçekleştirmek için), düzgün bir düzen animasyonu için birden fazla ağaç oluşturmak veya paralel kurgusal düzenler uygulamak gibi ilginç şeyler yapabilmemizi sağlayabilir. Ayrıca çoklu iş parçacıklı düzen potansiyelini de beraberinde getiriyor.

Satır içi parça öğeleri

Satır içi içerik (Ağırlıklı olarak stilize edilmiş metin) biraz farklı bir temsil kullanır. Kutular ve işaretçiler içeren bir ağaç yapısı yerine, satır içi içeriği, ağacı temsil eden düz bir liste halinde sunuyoruz. En önemli avantajı, satır içi reklamlar için düz liste gösteriminin hızlı olması, satır içi veri yapılarını incelemek ya da sorgulamak için kullanışlı olması ve bellek verimli olmasıdır. Metin oluşturmak çok karmaşık bir işlem olduğundan ve yüksek düzeyde optimize edilmediği sürece kolayca ardışık düzenin en yavaş parçası haline gelebileceğinden, bu işlem web oluşturma performansı için son derece önemlidir.

Düz liste, her satır içi biçimlendirme bağlamı için satır içi düzen alt ağacında derinlik öncelikli arama sırasına göre oluşturulur. Listedeki her giriş, bir (nesne, alt öğe sayısı) kümesidir. Örneğin, şu DOM'yi ele alalım:

<div style="width: 0;">
  <span style="color: blue; position: relative;">Hi</span> <b>there</b>.
</div>

Satır "Yüksek" ve "orada" arasında olacak şekilde width özelliği 0 değerine ayarlanır.

Bu durum için satır içi biçimlendirme bağlamı bir ağaç olarak temsil edildiğinde aşağıdaki gibi görünür:

{
  "Line box": {
    "Box <span>": {
      "Text": "Hi"
    }
  },
  "Line box": {
    "Box <b>": {
      "Text": "There"
    }
  },
  {
    "Text": "."
  }
}

Düz liste şöyle görünür:

  • (Çizgi kutusu, 2)
  • (Kutu <span>, 1)
  • ("Merhaba" diye mesaj gönder, 0)
  • (Çizgi kutusu, 3)
  • (Kutu <b>, 1)
  • ("Orada" metni, 0)
  • ("." metni, 0)

Bu veri yapısının birçok tüketicisi vardır: erişilebilirlik API'leri ve getClientRects ile contenteditable gibi geometri API'leri. Her birinin farklı gereksinimleri vardır. Bu bileşenler, düz veri yapısına kullanım kolaylığı imleci üzerinden erişir.

İmleç'te MoveToNext, MoveToNextLine, CursorForChildren gibi API'ler bulunur. Bu imleç gösterimi, birkaç nedenden dolayı metin içeriği için çok güçlüdür:

  • Derinlik öncelikli arama sırasında yineleme çok hızlıdır. Bu, imleç hareketlerine benzer olduğu için çok sık kullanılır. Bu düz bir liste olduğundan, derinlik öncelikli arama yalnızca dizi ofsetini artırarak hızlı iterasyonlar ve bellek konumu sağlar.
  • Örneğin, bir çizginin arka planını ve satır içi kutuları boyarken gerekli olan, kapsamlı arama olanağı sağlar.
  • Alt öğelerin sayısını bilmek bir sonraki eşdüzey öğeye geçmeyi hızlandırır. (Dizi uzaklığını bu sayıya göre artırmanız yeterlidir).

Mülk ağaçları

DOM, öğelerden (ve metin düğümlerinden) oluşan bir ağaçtır. CSS, öğelere çeşitli stiller uygulayabilir.

Bu dört şekilde görünür:

  • Düzen: Düzen kısıtlama algoritmasına yapılan girişler.
  • Boya: Öğenin nasıl boyanacağı ve kafesleneceği (ancak alt öğelerinin değil).
  • Görsel: DOM alt ağacına uygulanan dönüştürme, filtre ve kırpma gibi kafes/çizim efektleri.
  • Kaydırma: yer alan alt ağacın eksene göre hizalı ve yuvarlatılmış köşe kaydırması ve kaydırılması.

Özellik ağaçları, görsel ve kaydırma efektlerinin DOM öğelerine nasıl uygulandığını açıklayan veri yapılarıdır. Düzen boyutu ve konumu dikkate alındığında ekrana göre belirli bir DOM öğesi nerede? Görsel ve kaydırma efektleri uygulamak için hangi GPU işlemi dizisi kullanılmalıdır?

Web'deki görsel ve kaydırma efektleri, tüm ihtişamıyla çok karmaşıktır. Dolayısıyla özellik ağaçlarının yaptığı en önemli şey, bu karmaşıklığı, yapılarını ve anlamlarını hassas bir şekilde temsil eden tek bir veri yapısına dönüştürürken aynı zamanda DOM ve CSS'nin diğer karmaşıklığını da ortadan kaldırmaktır. Bu, birleştirme ve kaydırma için algoritmaları çok daha güvenle uygulamamıza olanak tanır. Özellikle:

  • Hataya açık olabilecek geometri ve diğer hesaplamalar tek bir yerde toplanabilir.
  • Mülk ağaçlarını oluşturma ve güncelleme işlemlerinin karmaşıklığı, tek bir oluşturma ardışık düzeni aşamasında birbirinden bağımsızdır.
  • Özellik ağaçlarını farklı iş parçacıklarına ve işlemlere göndermek tam DOM durumundan çok daha kolay ve hızlıdır. Böylece, birçok kullanım alanında kullanılabilirler.
  • Ne kadar çok kullanım alanı olursa birbirlerinin önbelleklerini yeniden kullanabildikleri için temel olarak oluşturulmuş geometri önbelleğe alma işlemiyle daha fazla kazanç elde edebiliriz.

RenderingNG, özellik ağaçlarını aşağıdakiler gibi birçok amaç için kullanır:

  • Birleştirmeyi boyadan ayırma ve ana iş parçacığından birleştirme.
  • En uygun birleştirme / çizim stratejisi belirleme.
  • IntersectionObserver geometrisinin ölçümü.
  • Ekran dışı öğeler ve GPU doku blokları için işlem yapmaktan kaçının.
  • Boya ve kafesi etkili ve doğru şekilde geçersiz kılma.
  • Core Web Vitals'da layout Shift ve Largest Contentful Paint ölçümü.

Her web dokümanında dört ayrı özellik ağacı vardır: dönüştürme, kırpma, efekt ve kaydırma.(*) Dönüşüm ağacı, CSS dönüşümlerini ve kaydırmayı temsil eder. (Kaydırma dönüşümü, 2D dönüşüm matrisi olarak temsil edilir.) Klip ağacı, taşma kliplerini temsil eder. Efekt ağacı diğer tüm görsel efektleri temsil eder: opaklık, filtreler, maskeler, karıştırma modları ve klip yolu gibi diğer klip türleri. Kaydırma ağacı, zincirin birlikte nasıl kaydırıldığı gibi kaydırmayla ilgili bilgileri temsil eder; birleştirici iş parçacığında kaydırma yapmak için bu gereklidir. Özellik ağacındaki her düğüm, bir DOM öğesi tarafından uygulanan kaydırmayı veya görsel efekti temsil eder. Birden fazla etkisi varsa aynı öğe için her bir ağaçta birden fazla özellik ağacı düğümü olabilir.

Her ağacın topolojisi, DOM'nin seyrek bir temsili gibidir. Örneğin, taşma kliplerine sahip üç DOM öğesi varsa üç klip ağacı düğümü olur ve klip ağacının yapısı, taşma klipleri arasındaki kapsayıcı blok ilişkisini izler. Ağaçlar arasında da bağlantılar vardır. Bu bağlantılar, düğümlerin göreli DOM hiyerarşisini ve dolayısıyla uygulama sırasını gösterir. Örneğin, bir DOM öğesindeki dönüşüm, filtreye sahip başka bir DOM öğesinin altındaysa dönüşüm, filtreden önce uygulanır.

Her DOM öğesinin bir özellik ağaç durumu vardır. Bu durum, söz konusu öğe üzerinde etkili olan en yakın üst öğe klibini, dönüşümü ve efekt ağacı düğümlerini belirten 4 unsurlu bir (dönüştürme, klip, efekt, kaydırma) durumudur. Bu çok kullanışlıdır Bu bize belgenin ekrandaki yerini ve nasıl çizileceğini bildirir.

Örnek

(kaynak)

<html>
  <div style="overflow: scroll; width: 100px; height: 100px;">
    <iframe style="filter: blur(3px);
      transform: rotateZ(1deg);
      width: 100px; height: 300px"
  id="one" srcdoc="iframe one"></iframe>
  </div>
  <iframe style="top:200px;
      transform: scale(1.1) translateX(200px)" id=two
      srcdoc="iframe two"></iframe>
</html>

Yukarıdaki örnek için (girişteki örnekten biraz farklıdır) oluşturulan özellik ağaçlarının temel öğelerini burada görebilirsiniz:

Özellik ağacındaki çeşitli öğelere örnek.

Listeleri ve boya parçalarını göster

Görüntülü reklam öğesi, Skia ile pikselleştirilebilen düşük seviyeli çizim komutları (buraya bakın) içerir. Görüntüleme öğeleri genellikle, kenarlık veya arka plan çizme gibi birkaç çizim komutuyla basittir. Boyama ağacı, bir görüntülü reklam öğesi listesi oluşturmak için düzen ağacı ve CSS boyama sırasını takip eden ilişkili parçalar üzerinde yinelenir.

Örneğin:

Yeşil bir dikdörtgen içinde &quot;Merhaba dünya&quot; yazan mavi bir kutu.

<div id="green" style="background:green; width:80px;">
    Hello world
</div>
<div id="blue" style="width:100px;
  height:100px; background:blue;
  position:absolute;
  top:0; left:0; z-index:-1;">
</div>

Bu HTML ve CSS, her hücrenin bir görüntülü reklam öğesi olduğu aşağıdaki görüntüleme listesini oluşturur:

Görünümün arka planı Arka plandaki dil: #blue Arka plandaki dil: #green #green satır içi metin
800x600 boyutunda ve beyaz renkli drawRect. 0,0 konumunda 100x100 boyutunda ve mavi renkte drawRect. drawRect, 80x18 boyutunda 8,8 konumunda ve yeşil renkte. Konumu 8,8 ve metni "Hello world" olan drawTextBlob.

Görüntülü reklam öğe listesi arkaya doğru sıralanır. Yukarıdaki örnekte, yeşil div, DOM sırasındaki mavi div'den öncedir ancak CSS boyama sırası, negatif z-endeksi mavi div'in yeşil div'den (adım 3) önce boyanmasını gerektirir (adım 4.1). Görüntülü reklamlar genel olarak CSS boya siparişi spesifikasyonunun atomik adımlarına karşılık gelir. Tek bir DOM öğesi, #green'in arka plan için bir görüntüleme öğesine, satır içi metin için de başka bir görüntüleme öğesine sahip olması gibi birden fazla görüntüleme öğesiyle sonuçlanabilir. Bu ayrıntı düzeyi, CSS boyama siparişi spesifikasyonunun tam karmaşıklığını (ör. negatif marjla oluşturulan boşluk bırakma) temsil etmek için önemlidir:

Üzerinde kısmen gri bir kutu ve &quot;Merhaba dünya&quot; yazan yeşil bir dikdörtgen.

<div id="green" style="background:green; width:80px;">
    Hello world
</div>
<div id="gray" style="width:35px; height:20px;
  background:gray;margin-top:-10px;"></div>

Bu işlem, her hücrenin bir görüntüleme öğesi olduğu aşağıdaki görüntüleme listesini oluşturur:

Görünümün arka planı Arka plandaki dil: #green Arka plandaki dil: #gray #green satır içi metin
800x600 boyutunda ve beyaz renkli drawRect. drawRect, 80x18 boyutunda 8,8 konumunda ve yeşil renkte. drawRect, 8,16 konumunda 35x20 boyutunda ve gri renkte. Konumu 8,8 ve metni "Hello world" olan drawTextBlob.

Görüntülü reklam öğesi listesi saklanır ve sonraki güncellemeler tarafından yeniden kullanılır. Boya ağacı yürüyüşü sırasında bir düzen nesnesi değişmediyse görüntüleme öğeleri önceki listeden kopyalanır. Ek optimizasyon, CSS boyama sırası spesifikasyonunun bir özelliğine dayanır: Yığma bağlamları atomik olarak boyanır. Yığma bağlamında herhangi bir düzen nesnesi değişmediyse boya ağacı yürüyüşünde yığma bağlamı atlanır ve önceki listede bulunan görüntülü reklam öğeleri dizisinin tamamı kopyalanır.

Geçerli özellik ağacı durumu, boya ağacı yürüyüşü sırasında korunur ve görüntülü reklam öğesi listesi, aynı özellik ağacı durumunu paylaşan görüntülü reklam öğelerinin "parçaları" halinde gruplandırılır. Bu, aşağıdaki örnekte gösterilmektedir:

Eğik turuncu bir kutu içeren pembe bir kutu.

<div id="scroll" style="background:pink; width:100px;
   height:100px; overflow:scroll;
   position:absolute; top:0; left:0;">
    Hello world
    <div id="orange" style="width:75px; height:200px;
      background:orange; transform:rotateZ(25deg);">
        I'm falling
    </div>
</div>

Bu işlem, her hücrenin bir görüntüleme öğesi olduğu aşağıdaki görüntüleme listesini oluşturur:

Görünümün arka planı Arka plandaki dil: #scroll #scroll satır içi metin Arka plandaki dil: #orange #orange satır içi metin
800x600 boyutunda ve beyaz renkli drawRect. drawRect, 0,0 konumunda 100x100 boyutunda ve pembe renkte. Konumu 0,0 ve metni "Merhaba dünya" olan drawTextBlob. drawRect, 0,0 konumunda 75x200 boyutunda ve turuncu renkte. drawTextBlob: Konum 0,0 ve "Düşüyorum" yazısı.

Bu durumda dönüşüm özelliği ağacı ve boya parçaları şu şekilde olacaktır (kısaca basitleştirilmiştir):

Parça 1&#39;deki ilk iki hücre, parça 2&#39;deki üçüncü hücre ve parça 3&#39;teki son iki hücre olmak üzere önceki tablonun resmi.

Görüntüleme öğesi grupları ve özellik ağacı durumu olan boyama parçalarının sıralı listesi, oluşturma ardışık düzeninin katman oluşturma adımına yapılan girişlerdir. Boya parçaları listesinin tamamı tek bir birleşik katmanda birleştirilebilir ve birlikte pikselleştirilebilir. Ancak bu, kullanıcının her kaydırışında pahalı bir pikselleştirme işlemi gerektirir. Her boya parçası için birleştirilmiş bir katman oluşturulabilir ve tüm yeniden pikselleştirmeyi önlemek için ayrı ayrı pikselleştirilebilir. Ancak bu durumda GPU belleği hızla tüketilir. Katmanlaştırma adımı, GPU belleği arasında denge kurulması ve işler değiştiğinde maliyetlerin azaltılması gerekir. Parçaları varsayılan olarak birleştirmek, birleştirici iş parçacığı kaydırma veya birleştirici iş parçacığı dönüşümü animasyonlarında olduğu gibi, birleştirici iş parçacığında değişmesi beklenen boyama parçalarını birleştirmemek iyi bir genel yaklaşım olur.

Yukarıdaki örnek, ideal olarak iki birleştirilmiş katman oluşturmalıdır:

  • Çizim komutlarını içeren 800x600 boyutunda birleştirilmiş bir katman:
    1. 800x600 boyutunda ve beyaz renkli drawRect
    2. 0,0 konumunda 100x100 boyutunda ve pembe renkte drawRect
  • Çizim komutlarını içeren, 144x224 boyutunda birleştirilmiş bir katman:
    1. Konum 0,0 ve "Merhaba dünya" metniyle drawTextBlob
    2. çevir 0,18
    3. rotateZ(25deg)
    4. 0,0 konumunda 75x200 boyutunda ve turuncu renkte drawRect
    5. 0,0 konumu ve "Düşiyorum" metnini içeren drawTextBlob

Kullanıcı #scroll sayfasını kaydırırsa ikinci birleştirilmiş katman taşınır ancak pikselleştirme gerekmez.

Örnekte, mülk ağaçlarıyla ilgili önceki bölümden altı tane boya parçası bulunuyor. (Dönüştürme, klip, efekt, kaydırma) özellik ağacı durumlarıyla birlikte şunlardır:

  • Doküman arka planı: doküman kaydırma, doküman klibi, kök, doküman kaydırma.
  • Div için yatay, dikey ve kaydırma köşesi (üç ayrı boya parçası): doküman kaydırma, doküman klibi, #one bulanıklaştırma, doküman kaydırma.
  • #one iFrame: #one döndürme, taşma kaydırma klibi, #one bulanıklaştırma, div kaydırma.
  • #two iFrame: #two ölçek, doküman klibi, kök, doküman kaydırma.

Birleştirme kareleri: yüzeyler, oluşturma yüzeyleri ve GPU doku karoları

Tarayıcı ve oluşturma işlemleri, içeriğin pikselleştirilmesini yönetir, ardından birleştirici kareleri ekranda sunulmak üzere Viz işlemine gönderir. Birleştirme çerçeveleri, pikselleştirilmiş içeriğin birlikte nasıl birleştirileceğini ve GPU kullanılarak verimli bir şekilde nasıl çizileceğini temsil eder.

Kartlar

Teoride, bir oluşturma işlemi veya tarayıcı işlemi birleştirici, pikselleri oluşturucu görüntü alanının tam boyutunda tek bir doku halinde pikselleştirebilir ve bu dokuyu Viz'e gönderebilir. Görüntü birleştiricinin bunu görüntülemek için yalnızca bu tek dokudaki pikselleri çerçeve arabelleğindeki uygun konuma (örneğin, ekran) kopyalaması gerekir. Bununla birlikte, bu oluşturucu tek bir pikseli bile güncellemek isterse tam görüntü alanını yeniden pikselleştirmek ve Viz'e yeni bir doku göndermesi gerekir.

Bunun yerine, görüntü alanı karolara ayrılır. Ayrı bir GPU doku kutusu, her bir karoyu görüntü alanının bir kısmı için pikselleştirilmiş piksellerle destekler. Oluşturucu daha sonra blokları tek tek güncelleyebilir veya hatta sadece mevcut karoların ekrandaki konumunu değiştirebilir. Örneğin, bir web sitesini kaydırırken mevcut karoların konumu yukarı kayabilir ve yeni bir karonun sayfanın daha alt kısımlarındaki içerikler için pikselleştirilmesi gerekebilir.

Dört karo.
Bu resimde, dört parçanın bulunduğu güneşli bir gün resmi gösterilmektedir. Bir kaydırma gerçekleştiğinde beşinci bir karo görünmeye başlar. Karolardan birinin yalnızca tek bir rengi (gök mavisi) ve en üstünde bir video ve bir iframe bulunuyor.

Dörtler ve yüzeyler

GPU doku blokları, bir doku kategorisi veya başka bir kategori için süslü bir isim olan özel bir dört türüdür. Dörtlü, giriş dokusunu tanımlar ve buna nasıl görsel efekt uygulayıp dönüştürüleceğini gösterir. Örneğin, normal içerik bloklarında karo ızgarasında x, y konumlarını gösteren bir dönüşüm bulunur.

GPU doku karoları.

Bu pikselleştirilmiş parçalar, dörtlülerin bir listesi olan oluşturma kartı içine yerleştirilir. Oluşturma geçişi herhangi bir piksel bilgisi içermez. Bunun yerine, istenilen piksel çıkışını elde etmek için her bir dörtlüsün nerede ve nasıl çizileceğine ilişkin talimatlar içerir. Her GPU doku bloğu için bir çizim dörtlü bulunur. Görüntü birleştiricinin, oluşturma geçişi için istenen piksel çıkışını üretmek amacıyla dörtlü listesi aracılığıyla her birini belirtilen görsel efektlerle çizmesi yeterlidir. İzin verilen görsel efektler, doğrudan GPU özellikleriyle eşlenenler olacak şekilde özenle seçildiğinden, oluşturma geçişi için çizim dörtlülerinin birleştirilmesi GPU'da verimli bir şekilde yapılabilir.

Pikselleştirilmiş karoların dışında başka çizim dörtlüsü türleri de vardır. Örneğin, hiç doku tarafından desteklenmeyen düz renkli çizim dörtlüsleri veya video ya da tuval gibi karo olmayan dokular için doku çizim dörtlüsü vardır.

Bir oluşturucu çerçevesinin başka bir birleştirici karesi yerleştirmesi de mümkündür. Örneğin, tarayıcı birleştirici, tarayıcı kullanıcı arayüzüyle bir birleştirici çerçevesi ve oluşturma birleştirici içeriğinin yerleştirileceği boş bir dikdörtgen oluşturur. Diğer bir örnek ise siteden izole iFrame'lerdir. Bu yerleştirme işlemi yüzeyler aracılığıyla gerçekleştirilir.

Bir besteci, bir oluşturucu çerçevesi gönderdiğinde bu çerçeveye yüzey kimliği adı verilen bir tanımlayıcı eşlik eder. Bu tanımlayıcı, diğer birleştirici çerçevelerinin bunu referans olarak yerleştirmesini sağlar. Belirli bir yüzey kimliğiyle gönderilen en yeni birleştirici karesi Viz tarafından depolanır. Başka bir birleştirme çerçevesi daha sonra bu çerçeveye bir yüzey çizim dörtgeni ile başvurabilir ve böylece Viz ne çizeceğini bilir. (Yüzey çizim dörtlüsünün, dokuları değil, yalnızca yüzey kimliklerini içerdiğini unutmayın.)

Orta düzey oluşturma biletleri

Birçok filtre veya gelişmiş karıştırma modları gibi bazı görsel efektler, ara dokuya iki veya daha fazla dörtlü çizilmesini gerektirir. Daha sonra ara doku, görsel efekt aynı anda uygulanarak GPU'da (veya muhtemelen başka bir ara doku) hedef arabelleğe alınır. Buna olanak tanımak için birleştirici karesi, aslında oluşturma geçişlerinin bir listesini içerir. Her zaman, en son çekilen ve hedefi kare arabelleğine karşılık gelen bir kök oluşturma geçişi bulunur ve daha fazlası olabilir.

Birden fazla oluşturma geçişi olasılığı, "oluşturma geçişi" adını açıklar. Her geçişin, GPU'da sıralı olarak, birden fazla "geçişte" yürütülmesi gerekir. Bununla birlikte, tek bir geçiş, çok büyük paralel olan tek bir GPU hesaplamasıyla tamamlanabilir.

Toplama

Birden çok birleştirici karesi Viz'e gönderilir ve bunların ekrana birlikte çizilmesi gerekir. Bu işlem, modelleri tek bir toplu birleştirici çerçevesine dönüştüren bir toplama aşamasıyla gerçekleştirilir. Toplama işlemi, yüzey çizimi dörtlülerinin yerini, belirttikleri birleştirici karelerle değiştirir. Gereksiz ara dokuları veya ekran dışındaki içerikleri optimize etmek için de bir fırsattır. Örneğin, birçok durumda siteden izole edilmiş bir iframe'in oluşturucu çerçevesinin kendi ara dokusuna ihtiyacı yoktur ve uygun çizim dörtlüleri aracılığıyla doğrudan çerçeve arabelleğine çizilebilir. Toplama aşamasında bu optimizasyonlar belirlenir ve oluşturma birleştiriciler tarafından erişilemeyen küresel bilgilere dayanarak optimizasyon yapılır.

Örnek

Bu gönderinin başlangıcından itibaren örneği temsil eden birleştirici kareleri burada verilmiştir.

  • foo.com/index.html yüzeyi: id=0
    • Oluşturma geçişi 0: Çıkış için çizim.
      • Oluşturma geçişi dörtlüsi: 3 piksel bulanıklaştırmayla çizim yapın ve oluşturma geçişi 0'a klip.
        • Oluşturma kartı 1:
          • Her biri x ve y konumu olmak üzere #one iframe'in karo içerikleri için dörtlüler çizin.
      • Yüzey çizim dörtlü: Kimlik 2 ile çizilmiş ölçek ve çeviri dönüşümü.
  • Tarayıcı kullanıcı arayüzü yüzeyi: ID=1
    • Oluşturma geçişi 0: Çıkış için çizim.
      • Tarayıcı kullanıcı arayüzü için dörtlü çizin (ayrıca karolara ayrılmış)
  • bar.com/index.html yüzeyi: ID=2
    • Oluşturma geçişi 0: Çıkış için çizim.
      • Her biri x ve y konumları olmak üzere #two iframe içeriği için dörtlüler çizin.

Çizimler: Una Kravets.