Overdraw nedir? (Piksel israfı)

Bir sahneyi render ederken GPU, pikselleri genelde arkadan öne veya önden arkaya doğru işler. Bir objenin arkasında kalan ve izleyicinin görmediği pikseller yine de hesap ediliyorsa, kart gereksiz yere mesai yapıyor demektir — işte buna overdraw yaklaşımıyla bakılır.

Opak yüzeylerde derinlik testi (depth testing) çoğu zaman arkayı erken keser; şeffaf yüzeylerde ise sıralama ve blending yüzünden aynı piksel üzerinde birden fazla tam yol çalışması sık görülür.

Overdraw visualizer

az çok

Overdraw

—

Aynı pikselin ortalama işlenme katı.

Pixel write count

—

Sıcak bölgede en yüksek tekrar.

Layer count 5

Transparent (blending) Particle mode

Bu görsel “tam motor profili” değildir: amaç, geometri değil piksel tekrarı fikrini görünür kılmaktır. Şeffaflık açıkken katman arttıkça overdraw yükselir; opak modda ise derinlik disiplinini temsil edecek şekilde tekrar baskısı düşürülür. Motor dilinde: overdraw çoğu zaman fill rate tavanına vurur; şeffaf katmanlarda fragment yolu tekrarlanır.

Not: Şeffaf efektlerde overdraw tamamen kaçınılmazdır; amaç azaltmak ve ekran alanını kontrol etmektir. Gerçek dünyada UI, yapraklık, partikül ve hacimsel efektlerde maliyet çoğu zaman yönetilir, sıfıra indirilmez. Görsel solukluk (düşük opaklık) ile GPU yükü aynı şey değildir: alttaki WebGL doğrulamasında opaklık kaydırıcısıyla bunu netleştiriyoruz.

Standart (opak) objelerde depth testing (derinlik testi) sayesinde, arkada kalan ve ekrana katkısı olmayan pikseller çoğu zaman erken elenebilir. Transparan (şeffaf) objelerde ise piksel “tek seferde” bitmez: arka planı da hesaba katmak gerektiği için aynı piksel üstünde katman katman işlem birikir.

• Camlar, su yüzeyleri veya duman efektleri, arkasındaki ışığı ve rengi geçirmek zorundadır.
• Bu yüzden GPU önce arkadaki objeyi çizer, sonra şeffaf katmanı boyar ve iki rengi blending (karıştırma) ile birleştirir.
• Üst üste binmiş 10 şeffaf cam panel örneğinde, o bölgedeki aynı piksel teoride 10 kez tekrar işlenebilir.

Bu yüzden şeffaflık “az miktar” bile olsa, ekranın büyük bir kısmını kaplamaya başladığında maliyet çok hızlı yükselir: mesele poligon değil, piksel sayısı × katman sayısıdır.

Alev, duman, toz veya sihir efektleri gibi partikül sistemleri overdraw’un en sık “patladığı” yerdir. Çünkü çoğu efekt, kamera yönüne bakan çok sayıda yarı şeffaf sprite veya plane üst üste bindirerek hacim hissi üretir.

• Bir duman bulutu çoğu zaman yüzlerce küçük, yarı şeffaf plane (düzlem) parçasından oluşur.
• Bu parçalar üst üste bindiğinde GPU, aynı piksel için onlarca katman çalıştırmak zorunda kalır.
• Sonuç: Ekranın bir köşesindeki küçük bir duman bulutu bile tüm sahnenin FPS değerini ciddi şekilde düşürebilir.

Pedagojik sezgi: Partikül maliyeti çoğu zaman “kaç parçacık var?” sorusundan çok “kamera ekranda ne kadar alanı dumanla dolduruyor?” sorusuna bağlıdır.

Overdraw, poligon sayısından bağımsız olarak doğrudan fill rate (doldurma hızı) kapasitesini tüketir. Yani tavanı belirleyen şey çoğu zaman “kaç üçgen var?” değil, “kaç piksel kaç kez boyandı?” sorusudur.

• GPU ısınması: Ekranda tek renk görünse bile arka planda yoğun matematiksel iş yürütülür; aynı pikselin tekrar tekrar boyanması bu yükü katlar.
• Düşük FPS: Özellikle yüksek çözünürlükte (ör. 4K) piksel sayısı arttığı için overdraw maliyeti katlanarak büyür.

Bu yüzden “yakın plan cam / duman” sahneleri, düşük poligonlu olsa bile GPU’yu piksel tarafında boğabilir.

Hedef, “şeffaflığı tamamen kaldırmak” değil; aynı pikselin gereksiz tekrarlarını azaltmaktır. Aşağıdaki stratejiler pratikte en çok etki eden üç kaldıraçtır: derinlik disiplini, şeffaflık disiplini ve şeffaf dokularda geometrik siluet.

A. Derinlik testi ve önden arkaya çizim

Opak objeler için Three.js ve modern motorlar çoğu senaryoda önden arkaya (front-to-back) sıralamayı hedefler: önce yakındaki yüzey çizilir, derinlik tamponu güncellenir; arkası «zaten kaplandı» ise erken elenebilir.

// Örnek: opak PBR yüzey — derinlik okuma/yazma açık
material.transparent = false;
material.depthTest = true;
material.depthWrite = true;

B. Transparan yüzeyleri azaltmak

• Alpha test: Sürekli yarı şeffaflık (opacity < 1) yerine «ya tam var ya yok» eşiği kullanın; böylece blending katmanlarını azaltıp maliyeti düşürebilirsiniz.
• Gereksiz şeffaflığı kapatmak: Yalnızca gerçekten şeffaf olması gereken objelere transparent: true verin.

C. Geometrik kesim (clipping)

Şeffaf dokuların etrafındaki boş alanları (alfa kanalındaki boşlukları) mümkün olduğunca poligonla kırpın. Yaprak dokusunun etrafındaki geniş şeffaf alanları piksel piksel bırakmak yerine mesh’i yaprağın siluetine yaklaştırmak, o bölgelerde overdraw oluşmasını engeller.

Mini doğrulama (Three.js · şeffaf katman)

Üstteki pedagojik model “piksel tekrarını” görünür kılar; aşağıdaki küçük sahne aynı fikri gerçek WebGL çizimiyle kısa süreliğine doğrular: ekranı daha çok kapladıkça ve katman sayısı arttıkça FPS düşüşü hissedilir. Kamera sabittir (orbit yok).