GPU Compositor Timeline

Frame Budget tek frame içinde hangi render aşamasının bütçeyi yediğini gösterir. GPU Compositor Timeline bir adım dışarıda: CPU, compositor, GPU ve display kuyruklarının aynı anda nasıl kaydığını gösterir.

Paint Storm organik ısı alanıdır; bu model scheduler telemetry panelidir — track lane, frame slice, sync fence, dropped vblank boşluğu. Amaç: «GPU neden ayrı thread?» sorusunu sezgisel cevaplamak.

Timeline yatay bir zaman şerididir — Chrome Tracing veya Unreal Insights gibi soldan sağa akar. Dikeyde dört track lane vardır; her lane aynı frame numarasını farklı aşamada gösterir. Küçük akan paketler değil, her dikey sütun tam bir frame slice (F182, F183…) — o frame’in o lane’deki iş yüküdür.

Tek bir sütuna bakmak yetmez: orchestration, lane’lerin aynı anda farklı frame numaralarında olmasından okunur.
Readout satırı (CPU F220 · GPU F217 · Present F216) bu ayrışmayı sayıya çevirir; timeline’da ise queue drift ile sütunlar hafif kayarak gösterilir.

• Dört lane · renk dili. Main thread (amber): JS, Style, Layout, paint dsp. Compositor (cyan): tile prep, lyr merge, surf comp. GPU queue (violet): rast sub, cmd buf, draw batch, upl wait — packet streak hissi. Display / VBLANK (green): present veya hata durumları (gap, stale).
• Pipeline depth · queue overlap. CPU F220 üretirken GPU F217 hâlâ render edebilir — lane’ler üst üste binmez, geriden gelir. GPU ve Display sütunları hafif sola drift eder; bu «GPU neden ayrı thread?» sorusunun görsel cevabıdır. Double/Triple buffer derinliği drift mesafesini büyütür.
• Aktif frame · playhead. En sağdaki güncel sütun cyan sweep + glow border alır; ince dikey playhead çizgisi «şu an kaydedilen» frame’i işaretler. Pause + Scrub ile bu sütunu dondurup segment etiketlerini okuyabilirsiniz.
• Dropped frame gap. Compositor deadline kaçırıldığında Display lane boş kalır — kesikli kırmızı çerçeve + MISSED VBLANK. Üst lane’lerde soluk ·· ghost ·· + stale scan: o zaman diliminde orchestration koptu, monitöre yeni frame gitmedi.
• Stale texture · frame age. GPU’da upl wait bloğu + upload wait fence → texture hazır değil. Display lane magenta STALE FRAME gösterir; altında age: 3, age: 4… yükselir — swapchain eski pikseli tutuyor. Fresh present’te yeşil flash + age: 1.
• Sync fences. Sütun sağındaki ince dikey çizgiler kilitleme noktaları: upload wait, gpu stall, vsync lock. RenderDoc / PIX / Chrome GPU trace dilinde «burada bekledi» demektir — segment uzunluğundan ayrı, neden beklediğini işaret eder.
• Grid · major separator. Her dikey çizgi bir frame sınırı; her 5 frame’de (F175, F180…) separator biraz kalın — uzun kayıtta konum hissi verir. Alt satır: pipeline depth N · queue drift active.

1. Main thread — JS çalışır, style/layout/paint dispatch üretilir (veya BYPASS)
2. Compositor — tile prep, katman birleştirme, surface compose
3. GPU queue — raster submit, command buffer, draw batch; upload varsa upl wait
4. Display / VBLANK — vsync penceresinde present; gecikme varsa stale veya gap

• JS / Style / Layout Main thread · long task · forced reflow
• lyr merge / surf comp Compositor thread · layer merge
• cmd buf / draw batch GPU command stream · raster saturation
• upl wait Texture upload stall · GPU fence
• present / age:N Swapchain · vblank · frame age
• MISSED VBLANK Dropped frame · compositor deadline miss

Paint Storm ≠ GPU Timeline. Paint Storm invalidation heat yayar — hangi piksel bölgesi ısındı. GPU Timeline orchestration gösterir — hangi kuyruk hangi frame’de, nerede gap veya stale oluştu. Frame Budget tek frame içindeki stage maliyetini ölçer; bu model frame’ler arası kuyruk derinliğini ölçer. Mod düğmelerinin ne tetiklediği için §4 Kontroller bölümüne bakın.

Simülatördeki mod düğmeleri yalnızca metrikleri değiştirmez — dört lane’in aynı anda nasıl kaydığını, hangi HUD kutusunun parladığını ve readout’taki frame numaralarının nasıl ayrıştığını belirler. Her mod, farklı bir orchestration arızasını izole eder.

Smooth 60 FPS

Referans çizgi. Main thread JS → Style → Layout → Paint dispatch dengeli; Compositor tile prep / lyr merge / surf comp akıcı; GPU lane rast sub + draw batch normal uzunlukta. Display lane her sütunda yeşil present ve age: 1. Dropped 0, FPS ≈ 60. Timeline’de CPU · GPU · Present frame numaraları readout’ta sabit pipeline depth farkıyla kayar; queue drift hafif, aktif sütun cyan sweep alır.

JS Spike

Main thread’de JS bloğu uzar — Style/Layout/Paint dispatch aynı sütunda sıkışır. Compositor lane aynı frame’de yetişemez; Display deadline kaçırınca boş sütun + MISSED VBLANK + ghost scan oluşur. CPU queue HUD’u amber glow alır. Timeline’de Amber Main lane dominant · Display’de kırmızı gap · Dropped sayacı artabilir · Pipeline insight: compositor yetişemedi.

Raster Burst

GPU queue doygunluğu. cmd buf, draw batch ve tex upl şeritleri uzar; GPU lane packet streak / jitter yoğunlaşır. Present gecikir ama asıl baskı GPU tarafında — CPU orta yükte kalabilir. GPU queue HUD violet glow. Timeline’de Purple GPU sütunları kalın · queue drift belirgin · Present latency HUD artabilir · Sync fence: gpu stall.

Upload Stall

Texture upload gecikmesi. GPU lane’de upl wait bloğu + upload wait fence; ardından kısa rast sub. Display lane STALE FRAME (magenta) gösterir — age: 3, age: 4… birkaç frame yükselir. Eski piksel ekranda kalır. Timeline’de GPU wait rengi · Display stale + age tag · Present latency +2 fr civarı · Gerçek hayat: büyük canvas / hero görsel upload.

Missed VBlank

Compositor deadline baskısı. CPU ve GPU yükü birlikte artar; compositor surface compose yetişemez. Display lane’de kesikli boşluk, stale ghost scan ve MISSED VBLANK etiketi. Present latency HUD cyan glow — swapchain gecikmesi hissedilir. Timeline’de Çoklu gap sütunları · ghost ·· metni Main/Comp/GPU lane’lerde · Dropped hızla artar · Chrome Performance dropped frame karşılığı.

Compositor Only

Transform-only path. Main thread’de Style / Layout / Paint dispatch BYPASS (desaturated, kesikli) — yalnızca kısa rAF kalır. Compositor lyr merge + surf comp hızlı; GPU composite kısa. Display sürekli yeşil present. Timeline’de Bypass ghost · Main lane minimal · will-change / transform scroll karşılığı · Paint Storm heat modelinden bilinçli ayrım.

Double / Triple buffer

Swapchain derinliği toggle — mod değil, pipeline depth öğreticisi. Double: present latency düşük (≈3 fr), drop daha hissedilir, queue drift kısa. Triple: daha smooth swap, latency artar (≈4 fr+), GPU/Display lane geriden daha fazla kayar — input lag trade-off. HUD’da Swapchain Double/Triple · Present latency fr değeri · Readout CPU Fn · GPU Fn−depth farkı büyür.

Okuma sırası: (1) Mod düğmesi → Pipeline insight satırı. (2) Parlayan HUD kutusu (amber CPU / violet GPU / cyan latency). (3) Readout:
CPU F220 · GPU F217 · Present F216 — sayılar overlap’i verir; timeline’da sütunlar fiziksel drift ile kayar. (4) Pause + Scrub ile tek gap veya stale sütununu dondurup lane etiketlerini okuyun.

Ayrıntılı basit özet: simülatörün hemen altındaki Bu demo ne işe yarar? kutusu · Mod düğmeleri: §4 Kontroller · Timeline okuma: §2 Timeline nasıl okunur?.

• Scroll jank + heavy JS. Main thread uzun task — compositor yetişemez; Chrome Performance'ta long task + dropped frame.
• Büyük texture / canvas upload. GPU upload stall — eski frame birkaç vblank daha ekranda; DevTools'ta GPU raster + upload.
• CSS transform scroll. Compositor-only path — main thread kısa; Compositor Only moduna benzer akış.
• Triple buffering (oyun / native). Daha smooth swap ama input latency artar — buffer toggle ile HUD'da latency farkını görün.