Frame Budget Visualizer

byteomi.com · Render Pipeline makalesi «bu girdiler ekranda piksele nasıl dönüşür, hangi aşamalar sırayla çalışır?» sorusunu metinsel mimari olarak işler: DOM+CSSOM, render tree, layout, paint, raster, composite, GPU layer. Holodepth bu sayfada aynı sözlüğü tekrar etmez; soruyu çevirir: bir Three.js / WebGL sahnesinde bu karede hangi katman 16,7 ms’i yedi ve canvas’ta ne hissedilir?

Sahne mimarisi açısından frame budget «DevTools satırı» değil, çizim sözleşmesinin milisaniye hesabıdır. animate() içindeki mixer / raycast JS şerididir; HUD getBoundingClientRect veya canvas setSize Layout’tur; texture.needsUpdate Raster’dır; CSS transform ile kayan orbit wrapper Compositor’dur main atlanırsa mesh bir kare geride (stale) kalabilir. Event Loop «hangi şerit / hangi sırada?»; Topology «hangi süreç?»; bu lab hangi aşama bu kareyi yedi?

Aşağıdaki bölümler paneli, Dominant ≠ Killer ayrımını ve sahne karşılıklarını açıklar; aşama tablosu ve tile / paint-order için Byteomi kaynağına dönün.

Panel Chrome Performance’a benzer okunur; amaç profilör olmak değil: sahnenin hangi katmanının bu kareyi yediğini tanımak. Soru «kaç aşama var?» değil: benim mesh’im / HUD’um / texture’ım hangi şeritte?

• Üst şerit = kare toplamı. Renkli dilimler JS → … → Composite. Kesikli çizgi 16,67 / 8,33 ms. Sağı taralı kırmızıysa overflow jank. Pulse (legend altı) son 16 karenin yeşil / kırmızı nabzıdır.
• Dominant ≠ Killer. Bütçe içinde en geniş şerit Dominant (henüz suçlu değil). Taşınca aynı şerit Killer. HUD ve ledger her karede bir sahne cümlesi yazar.
• Ledger + pin. Sağdaki SCOPE son kareyi (veya tıkladığınız kareyi) okur: rol, total / remain, aşama ms, sahne cue. Pulse çubuğu veya timeline karesi pinler; tekrar tık live.
• Chip = izolasyon. Aşama chip’ine tıklayınca o şerit net, diğerleri solar. Hover ms + sahne cümlesi (animate(), setSize, needsUpdate).
• Stale ≠ boş şerit. Compositor-only main lane’leri silmez; taralı stale bırakır. Orbit wrapper akar, mesh bir kare geride Byteomi’nin compositor kazancının sahne bedeli.

Frame Budget ≠ Event Loop ≠ Topology. Event Loop zamanı, Topology süreci, bu lab kare içi aşamayı öğretir. Render tree / tile teorisi Byteomi’de.

• JS animate() · mixer / raycast / parse
• Style HUD class / CSS değişken
• Layout getBoundingClientRect / setSize
• Paint DOM overlay · blur / shadow
• Raster texture.needsUpdate · GPU tile
• Composite layer merge
• Compositor CSS transform HUD · stale canvas

İlk deneme: Sakin kare Dominant var, Killer yok. Layout thrash Layout Killer. Compositor-only ghost şeritler. 120 Hz squeeze aynı iş, 8,33 ms. Sözlük Byteomi Render Pipeline; sahne etkisi bu panel.

Preset’ler ve toggle’lar Byteomi aşama tablosunu ezberletmez; her anahtar bir sahne stresini taklit eder. Tek tek açın, hangi şeridin Dominant / Killer olduğuna bakın, ürün şikâyetiyle eşleştirin.

Sakin kare / 120 Hz squeeze

Baseline: şeritler kısa, Dominant var, Killer yok. 120 Hz aynı işi 8,33 ms’e sıkıştırır 60 Hz’de Dominant olan aşama Killer olabilir. Karşılık VSync budget · yüksek yenileme

Heavy JS

JS şeridi uzar. Sahne: tek karede ağır mixer / raycast / senkron parse tıklama ve orbit gecikir. Karşılık animate() senkron · JS Dominant / Killer

Layout thrash

Layout tekrarlanır. Sahne: her frame HUD getBoundingClientRect veya canvas setSize WebGL çizimi layout’ta bekler. Karşılık Ölçü / setSize · Layout Killer

Paint storm / Overdraw

Paint + raster şişer. Sahne: DOM overlay, blur, üst üste HUD; canvas boyaması bekler. Karşılık Overlay paint · paint-bound

Large layer / Raster upload

Raster ve composite büyür. Sahne: büyük canvas, texture.needsUpdate, HDRI / GLTF upload. Karşılık needsUpdate · GPU tile

Compositor-only

Main şeritler ghost / stale; compositor dolar. Sahne: CSS transform HUD / orbit wrapper akar, mesh bir kare geride. Karşılık Transform path · stale canvas

Okuma ipucu: Önce Dominant / Killer, sonra ledger aşama ms, sonra sahne hipotezi. Elle toggle CUSTOM yapar. Sözlük Byteomi Render Pipeline; sahne etkisi bu panel.

Bu kartlar doğru / yanlış cevap değildir; timeline’da aramanız gereken görsel imzalardır. Sağlıklı sahne: canvas her VSync’te güncellenir, Dominant vardır, Killer yoktur. Kötü imza kullanıcıya «takıldı / siyah kare / eski mesh» olarak yansır.

Byteomi «hangi aşama sırayla çalışır?» diye sorar; Holodepth «sahnemin hangi katmanı bu kareyi üretir?» diye sorar. Önce okuyun, sonra panelde aynı imzayı arayın.

• HUD her frame ölçülüyor. Overlay getBoundingClientRect veya sık setSize Layout Killer. Preset: Layout thrash.
• GLTF / texture gelince bir an donma. needsUpdate + ilk upload Raster’ı şişirir. Raster / upload + Large layer.
• Orbit wrapper akıcı, mesh eski. CSS transform Compositor’da; canvas stale. Compositor-only ghost şeritler.
• 120 Hz monitörde aynı sahne takılıyor. İş değişmedi, bütçe 8,33 ms. 120 Hz squeeze Dominant Killer’a döner.
• DOM + WebGL aynı karede yarışıyor. Blur overlay Paint, draw call Raster. Paint storm + Overdraw.