holodepth

3D Model Formatları · glTF / GLB · Web İçin Kullanım

Runtime Performansı: glTF Yükleme Hattında Zaman ve İşlem Maliyeti

«Dosya 5 MB, sayfa 8 saniye dondu» çoğu zaman indirme değil; main thread'de decode ve GPU upload'dur. Dosya Boyutu Analizi byte envanterini kapattı; bu sayfa Web İçin Kullanım hattının dördüncü ve son sorusuna geçer: indirilen byte'ları ekrana getirmek ne kadar sürer ve nerede takılır?

Holodepth'te runtime performansı «FPS optimizasyon rehberi» değildir; bu sayfa glTF paketinden sahneye giden zaman hattını format ve dağıtım merceğinden okur: parse, decode (Draco/KTX2), bellek genişlemesi, GPU upload, ilk kare ve sürekli maliyet (draw, skin, morph). GLTFLoader callback sırası ve Three.js sahne kurulum API'si glTF Pipeline (Three.js)'da kalır; burada «hangi aşama ne kadar sürebilir ve dosya özellikleri bunu nasıl şekillendirir?» sorusu yanıtlanır.

Sayfayı bitirdiğinizde şu cümleyi kurabilmelisiniz: «Transfer küçük olsa bile decode ve upload pahalı olabilir; tersine büyük ham paket paralel fetch ile erken ilk kare verebilir. Performans teşhisi byte + zaman birlikte okunur: envanter Dosya Boyutu'nda, süre bu sayfada. Main thread decode, worker offload, uzantı zinciri ve primitive/material sayısı kritik kaldıraçlardır. Web İçin Kullanım dört soruyla tamamlanır; runtime uygulama Three.js glTF Pipeline'a geçer.»

Bu sayfanın sınırı · komşu konularla ayrım

Bu sayfa glTF web yüklemesinin zaman ve işlem maliyetini anlatır:

  • Yükleme hattı aşamaları (indirme → parse → decode → upload → ilk kare)
  • Main thread vs worker (dağıtım kararı)
  • Draco / KTX2 decode maliyeti (sonuç, mekanizma değil)
  • Decode bellek vs transfer byte
  • Draw / primitive / materyal karmaşıklığı (format kaynaklı)
  • Animasyon, skin, morph sürekli maliyeti (üst seviye)
  • Ölçüm ve teşhis metodolojisi
  • Holodepth perspektifleri

Bilinçli olarak dışarıda bırakılan konular:

Kısa ayrım: Runtime Performans (Zaman) «byte'ları işlemek ne kadar sürdü?» · Dosya Boyutu (Byte) «ne kadar indirdik?» · glTF Pipeline (API) «loader sahneyi nasıl kurar?»

Web İçin Kullanım hattı dördüncü soru

Katman Odak Soru Sayfa
1 · Strateji Format seçimi Web'de neden glTF ailesi? Neden glTF
2 · Konteyner GLB / .gltf Tek dosya mı modüler paket mi? GLB vs glTF
3 · Boyut Byte bütçesi Ne kadar veri indiriliyor? Dosya Boyutu Analizi
4 · Performans Runtime maliyeti Parse ve GPU yolu ne kadar? Runtime Performansı (bu sayfa)

Yükleme hattı: süre aşamaları

Zihin modeli: kargo indi, ambar açıldı, raflara dizildi, vitrin açıldı

  • İndirme = kargo kapıda (ağ, TTFB, throughput).
  • Parse = manifest okuma (JSON, chunk header).
  • Decode = sıkıştırılmış kutu açma (Draco, KTX2 transcoding).
  • Upload / inşa = raflara dizme (GPU buffer, texture, scene graph).
  • İlk kare = vitrin açılışı (ilk draw).

Kullanıcı «yavaş model» dediğinde hangi aşamayı kastettiği ölçülmeden optimizasyon yanlış hedefe gider. Holodepth performans raporu minimum şu sütunları taşır: TTFB + download ms, parse ms, decode ms (Draco/KTX2 ayrı), upload / inşa ms, time to first frame. Byte envanteri ( Dosya Boyutu · envanter) ile aynı build'de toplanır; «5 MB ama 3 s decode» ile «20 MB ama 200 ms decode» farklı müdahale ister.

Aşama bazlı tipik darboğazlar
Aşama Dosya özelliği etkisi Sık semptom
İndirme Transfer byte, konteyner, CDN Uzun boş ekran, düşük bandwidth
JSON parse JSON chunk boyutu, extras şişkinliği Kısa donma, büyük metadata
Draco decode Sıkıştırılmış mesh boyutu, poly count Main thread jank, mobil CPU
KTX2 transcode Doku sayısı, çözünürlük, format İlk kare gecikmesi, GPU uyumsuzluk
GPU upload Ham vertex + texture bellek İlk render sonrası takılma
Sürekli maliyet Draw sayısı, skin, morph, ışık Düşük FPS, ısınma

JSON organizasyonunun parse adımları JSON Yapısı · Runtime bölümünde format sözleşmesi olarak verilmiştir; bu sayfa her adımın süre bütçesi ile ilişkisini kurar.

Waterfall: konteyner seçiminin zaman etkisi

Aynı byte envanterinde GLB ve modüler .gltf farklı zaman deseni üretir. Tek GLB: indirme bitene kadar parse başlamayabilir (streaming parser istisnası hariç). Modüler paket: küçük JSON erken parse, .bin ve dokular paralel; düşük LOD doku ile ilk kare erken ( GLB vs glTF · HTTP, Dosya Boyutu · kritik yol).

  • GLB: basit waterfall; öngörülebilir; «hepsi veya hiçbiri»
  • Modüler: paralel; kritik yol optimizasyonu mümkün; URI hatası = sonsuz bekleme
  • Hibrit GLB + harici KTX2: mesh parse + doku fetch örtüşebilir

Boyut sayfası «ne indirdik?» der. Bu bölüm «indirme bittiğinde veya parça parça ne zaman işlemeye başladık?» der. İkisi birlikte LCP ve «model göründü» metriklerini açıklar.

JSON parse ve main thread

GLB JSON chunk veya .gltf metni JSON.parse ile main thread'de işlenir (çoğu loader'da). Büyük extras, uzun name listeleri ve data URI gömülü JSON parse süresini uzatır ( Dosya Boyutu · JSON overhead). Bu aşama Draco'dan önce gelir; «donma Draco'dan» sanılıp metadata temizlenmezse yanlış teşhis.

Holodepth üretim notları:

  • Üretim GLB'de extras diyeti hem boyut hem parse kazandırır
  • Çok sayıda küçük mesh/node tek JSON'da parse maliyetini artırır (tablo sayısı)
  • İndeks tabanlı yapı parse sonrası referans çözümü gerektirir; bu da main thread işidir (API detayı Pipeline'da)

Parse vs decode ayrımı

Performans raporunda «parse» ve «decode» ayrı satır olmalıdır. Draco decode CPU yoğundur; JSON parse genelde daha kısa ama extras şişkin dosyada ikinci sıraya yükselebilir. Profiler'da uzun JSON.parse görürseniz önce metadata diyeti, Draco ayarı değil.

Draco ve KTX2: küçük transfer, pahalı decode

Uzantılar transfer byte'ını düşürür; decode CPU/GPU zamanı ekler. Bu, Dosya Boyutu sayfasındaki «decode bellek / transfer ayrımı»nın zaman yüzüdür ( Dosya Boyutu · üç metrik).

Uzantı decode karakteri (dağıtım merceği)
Uzantı Transfer Decode Holodepth not
Draco mesh Düşük CPU yoğun, poly'ye bağlı Worker offload düşün ( Web Worker)
KTX2 / BasisU Düşük Transcode + GPU format Desteklenmeyen GPU fallback pahalı
Ham mesh + PNG Yüksek Daha az CPU decode Ağ bound mobilde yavaş indirme

«Draco açtık site yavaşladı» vakasında önce poly budget, sonra quantization, sonra worker; mekanizma Draco Mesh Compression'da. İki Required uzantı ( Draco + BasisU) decode zincirini uzatır; mobilde sıralı decode ilk kareyi geciktirir.

Morph ve animasyon: Draco dışı decode

Draco taban geometriyi sıkıştırır; morph delta ve animasyon accessor'ları çoğu pipeline'da ham kalır ( BasisU · morph notu). Transfer küçük görünürken decode sonrası bellek ve upload hâlâ büyük olabilir; performans teşhisinde bu katmanlar ayrı ölçülür.

Bellek genişlemesi ve GPU upload

Transfer byte ile GPU'da yaşayan veri aynı değildir. Draco'lu 2 MB mesh decode sonrası 8 MB float POSITION dizisine genişleyebilir. Dört KTX2 doku transcoding sonrası seçilen GPU formatında ek bellek tutar. Mobil cihazda bu genişleme «tab crash» veya ağır swap üretebilir; desktop'ta yalnızca kısa upload takılması.

  • Vertex buffer upload: primitive başına geometry; paylaşılan bufferView upload'u birleştirir (File Structure)
  • Texture upload: image decode (PNG) veya KTX2 transcode; main thread veya GPU queue'ya bağlı
  • İkili kopya: CPU typed array + GPU buffer geçici olarak ikisi de bellekte

Holodepth: performans onayında «transfer MB» yanına «decode sonrası tahmini vertex + texture bellek» sütunu ekleyin. Boyut sayfası transferi ölçer; bu sayfa genişlemeyi ve upload süresini ölçer. Aşırı 4K doku seti transferi küçültülse bile upload darboğazı kalabilir ( Dosya Boyutu · doku).

Draw karmaşıklığı: format kaynaklı sürekli maliyet

İlk kare sonrası FPS, dosyadaki primitive ve materyal çeşitliliği ile şekillenir. Her farklı material indeksi potansiyel draw ayrımıdır ( Material Slots). Çok primitive'li mesh, çok materyalli sahne ve transparency sıralaması sürekli maliyet üretir; bu yükleme hattından sonra başlar ama export kararlarıyla köklenir.

  • Primitive birleştirme: aynı materyal + aynı attribute seti → daha az draw (export/optimize aracı)
  • GPU instancing: tekrarlayan mesh'ler ( Extension Sistemi · EXT_mesh_gpu_instancing) draw sayısını düşürür
  • Variants: tek mesh çok materyal kartı; draw değil materyal switch maliyeti ( Variants)
  • Clearcoat / sheen / transmission: shader maliyeti; uzantı profili ( Extension Sistemi)

Draw call optimizasyonu Three.js materyal birleştirme sayfalarında; burada format okuyucusu «dosyada kaç ayrı draw adayı var?» diye sorar: primitive sayısı × materyal çeşidi × şeffaflık katmanları.

Animasyon, skinning ve morph: sürekli CPU / GPU yükü

Yükleme tamamlandıktan sonra karakter sahnelerinde maliyet çoğu zaman animasyondadır. Dosya formatı hangi kanalların aktif olduğunu belirler ( Channels & Samplers):

Byte envanterinde animasyon küçük görünse bile runtime'da her kare joint + morph hesabı büyüyebilir. «Yükleme hızlı, oynatınca takılıyor» ayrımı bu sayfanın sürekli maliyet bölümüne girer; çözüm clip seyreltme, LOD skeleton ve morph target sayısı diyeti ( Dosya Boyutu · animasyon ile birlikte planlanır).

Ölçüm metodolojisi: neyi, nerede sayarsınız?

Holodepth performans raporu byte raporu ile aynı build etiketini taşır. Minimum sütunlar: 

// Kavramsal performans şablonu
download_ms | parse_ms | draco_ms | ktx2_ms | upload_ms | first_frame_ms
FPS_idle | FPS_animated | GPU_mem_est | JS_heap_delta

Ölçüm kaynakları (üst seviye, API tutorial değil):

  • Network: TTFB, Content-Length, waterfall ( GLB vs glTF)
  • Performance panel: Main thread uzun görevler, parse/decode blokları
  • requestAnimationFrame: İlk kare zaman damgası
  • Throttled mobil emülasyon: CPU 4x, 3G; transfer + decode birlikte

Tek ölçüm yeterli değildir: soğuk cache, sıcak cache ve modüler pakette kısmi cache üç ayrı senaryodur. CI'da headless tam GPU ölçümü sınırlıdır; nightly cihaz lab veya manuel checklist kabul edilir.

Performans kapıları (gate)

Mutlak ms eşikleri ürüne göre değişir; kapı yapısı sabittir: first_frame > bütçe ise önce waterfall + kritik yol; decode > bütçe ise Draco/worker/poly; FPS < hedef ise draw/materyal/animasyon. Byte gate Dosya Boyutu sayfasında; zaman gate burada.

Holodepth perspektifleri: çoğu dokümanda olmayan açılar

«Lazy load ekleyin» genellemesi yerine glTF'ye özgü üretim tuzakları:

Küçük dosya, yavaş decode paradoksu

Agresif Draco + çok yüksek poly: transfer yeşil, decode kırmızı. Boyut raporu geçer, performans kapısı kalır. Çözüm sırası: poly budget, sonra Draco seviyesi, sonra worker.

Bloklayan yükleme ve scroll jank

Vitrin sayfasında model yüklenirken sayfa scroll'u kilitleniyorsa main thread decode şüphelidir. Progressive: poster görsel + düşük LOD + arka planda tam set; konteyner modüler pakette daha kolay ( Neden glTF · poster).

Sayfada birden çok glTF

Üç ürün kartında üç GLB paralel fetch + üç sıralı decode mobilde çarpılır. Sıra kuyruğu, görünür kart önceliği ve görünmeyen model için yükleme iptali ürün kodudur; format «tek model» için optimize edilmiştir.

extensionsRequired decode zinciri

Required Draco + Required BasisU = iki decode aşaması yüklenmeden sahne yok. Used uzantılarda fallback ile erken düşük kalite gösterilebilir; Required profili ilk kareyi geciktirir ( Extension Sistemi · Required).

Sahneden çıkarma ve bellek

SPA'da route değişince geometry / texture dispose edilmezse ikinci ziyaret «hızlı» görünür ama bellek şişer. Format dosyası değil runtime disiplinidir; Pipeline texture binding temizliğine link ( Texture binding · dispose).

requestIdleCallback ile staging

Kritik olmayan ikincil modelleri idle dilimlerinde parse etmek main thread'i korur; hero model yine öncelikli tam yükleme alır. glTF paket boyutu küçük olsa bile JSON + decode idle'a bölünebilir; tam çözüm ürün mimarisidir.

On soruluk runtime teşhisi

Performans katmanı kontrol listesi
Soru Yeşil ise Kırmızı ise bak
first_frame bütçe içinde mi? Yükleme hattı dengeli Waterfall / decode / upload ayrımı
Download mı decode mu uzun? Doğru optimizasyon hedefi Yanlış Draco/CDN müdahalesi
Draco worker'da mı? Main thread korunur Scroll jank
KTX2 transcoder hazır mı? BasisU profili çalışır Fallback PNG yolu pahalı
Mobil throttle'da test edildi mi? Gerçekçi SLA Desktop-only yanılsama
Byte + zaman aynı build'de mi? Tam teşhis Kopuk raporlar
Animasyonlu FPS kabul edilebilir mi? Sürekli maliyet OK Clip / morph / skin diyeti
Çoklu model kuyruğu var mı? Kart vitrinleri güvenli Paralel decode çarpanı
Dispose / unload test edildi mi? SPA bellek stabil Sızıntı
Required uzantı sayısı minimal mi? İlk kare erken Uzun decode zinciri

Holodepth içgörüsü

Web İçin Kullanım dört sorusunun son cevabı: performansı byte'dan bağımsız okumayın. Aynı build etiketinde envanter + zaman raporu yan yana durmalıdır. «Transfer düştü, first_frame kötüleşti» bilinçli Draco/Basis trade-off'udur; gizli başarısızlık değil, ölçülmesi gereken ürün kararıdır.

Web İçin Kullanım kapanır; runtime uygulamaya geçiş

Dört soru tamamlandı: neden glTF → konteyner → byte → zaman. Format dalında Web İçin Kullanım omurgası burada kapanır. Sıradaki Holodepth katmanı loader'ın dosyayı sahneye çevirdiği runtime uygulama hattıdır:

  1. glTF Pipeline (Three.js) Scene Graph, Material mapping, Animation clips
  2. Draco runtime Web Worker performansı
  3. Format omurgası özeti File Structure, Materyal, Animasyon, Uzantılar dalları (çapraz referans)

Format okuyucusu özeti: Runtime performansı indirme, parse, decode, upload ve sürekli maliyet olarak okunur. Küçük transfer yavaş decode üretebilir; modüler paket erken ilk kare verebilir. Byte ve zaman birlikte ölçülür; API detayı glTF Pipeline'dadır.