holodepth

Three.js · Renderer

Renderer: piksel işleme merkezi

Holodepth üçlüsünde roller net ayrılır: sahne yapıyı, kamera algıyı, renderer ise çıktıyı üstlenir. GPU üzerinde çalışan renderer, sahne ve kameradan gelen veriyi yürütücü bir hattır (pipeline executor): sahneyi değiştirmez, mevcut durumu piksellere dönüştürüp <canvas>'a yazar.

WebGLRenderer ve görüntüleme hattı

WebGLRenderer ve GPU donanımı

Three.js'in varsayılan yolu WebGLRenderer'dır. Ağır iş CPU'da değil GPU'da yürür; renderer, veri akışını GPU üzerinde işleten yürütücü katmandır — çıkan görüntüyü <canvas> üzerinden ekrana iletir.

  • Paralel hesaplama: GPU, aynı anda çok sayıda piksel üzerinde işlem yapabilir.
  • Donanım hızlandırması: Akıcı kare hızı, renderer'ın GPU'ya doğrudan erişmesiyle mümkündür (Canvas ile ilgili temel bağlam sahne örneğinde işlenir).

Renderer sahneyi değiştirmez

Renderer sahne grafiğini veya nesne durumunu değiştirmez; yalnızca o andaki sahne + kamera verisini okuyup çizer. Konum, materyal ve ışık güncellemeleri Scene ve nesneler üzerindedir; kamera dönüşümü Camera'dadır — renderer bunların görüntüsünü üretir.

Bir karede render hattı (özet)

Her render çağrısında kabaca şu zincir işler:

  • Kameraya göre görünür nesneler belirlenir (frustum vb.).
  • Işık ve materyal hesaplamaları GPU üzerinde yürütülür.
  • Geometriler piksel renklerine dönüştürülür.
  • Gerekli durumlarda derinlik (Z-buffer) ve harmanlama (blending) işlemleri uygulanır.
  • Sonuç canvas tamponuna yazılır.
Veri akışı (özet)
Sahne + kamera Görünürlük Işık & materyal Raster Z-buffer & blending Canvas

Render döngüsü: kalp

Renderer tek başına sürekli çalışmaz; hareket, animasyon veya etkileşim için her karede renderer.render(scene, camera) çağrılmalıdır. Bunun standart kalıbı requestAnimationFrame ile bir render döngüsüdür: 

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

scene ve camera önceden oluşturulmuş kabul edilir. Bu döngü, statik bir kareden canlı sahneye geçişin temelidir. Aynı kalıp, aşağıdaki kurulum + render döngüsü örneğinde renderer ayarlarıyla birlikte tek parça halinde verilir.

Kritik kurulum parametreleri

WebGLRenderer oluştururken verilen seçenekler hem görsel kaliteyi hem pil/ısınma dengesini etkiler:

  • Antialias: Kenarlardaki tırtıklanmayı (aliasing) azaltır; { antialias: true } eğimli yüzeylerde daha yumuşak görüntü verir.
  • Alpha: alpha: true iken canvas şeffaf olabilir; opak olmayan piksellerde arka planda sayfanın CSS arka planı görünür. Tam opak çizmek için genelde setClearColor ve uygun alpha ile birlikte düşünülür; şeffaflık kapalıysa bu katman görünmez. Şeffaf sahnelerde 3B içerik, HTML/CSS katmanlarıyla birlikte kompozisyon yapılabilir.
  • powerPreference: Tarayıcıya GPU kullanım tercihini bildirir; garanti değildir, ancak performans odaklı cihazlarda daha güçlü GPU seçimini tetikleyebilir. Yoğun projelerde "high-performance" sık geçer.

Ekran netliği: pixel ratio ve boyutlandırma

Retina ve yüksek DPI ekranlarda piksel yoğunluğu yüksektir. setPixelRatio(Math.min(window.devicePixelRatio, 2)) genelde netlik ile performans arasında iyi denge sağlar. Yüksek pixel ratio değerleri GPU yükünü belirgin şekilde artırır; bu yüzden pratikte üst sınır (ör. 2) konması yaygındır. setSize canvas'ın çizim boyutunu belirler; tam ekran örneklerde sıklıkla window.innerWidth / window.innerHeight kullanılır ve pencere resize ile güncellenir.

Gölgeler ve performans

shadowMap sistemi ek maliyet getirir; yalnızca gerçekten gölge ihtiyacı olan ışıklar ve castShadow gerektiren mesh'ler için açılması iyi pratiktir.

Teknik tablo: Renderer API özeti

Metot / özellik Açıklama Neden önemli?
.render(scene, camera) O kare için sahneyi hedefe çizer. Animasyon döngüsünün kalbi.
.domElement Oluşturulan <canvas> öğesidir. DOM'a eklemek için kullanılır.
.shadowMap Gölge haritası ayarlarını taşır. Gerçekçi gölgeler için enabled ve tip seçimi.
.setClearColor() Tampon temizleme (arka plan) rengini ayarlar. scene.background kullanılmadığında alternatif.
.outputColorSpace Çıktı renk uzayını belirler (ör. THREE.SRGBColorSpace). Renklerin doğru gamma ile ekrana yansıması; eski outputEncoding yerine kullanılır.

Uygulama: kurulum + render döngüsü

Aşağıdaki örnek renderer kurulumunu, outputColorSpace (gamma / sRGB), gölgeleri ve animate içinde render(scene, camera) çağrısını birleştirir; scene ve camera önceden tanımlıdır. 

// 1. Renderer oluşturma
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
  powerPreference: 'high-performance',
});

// 2. Boyut ve piksel yoğunluğu
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

// 3. Renk uzayı (gamma / sRGB) ve gölgeler
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

// 4. Canvas'ı sayfaya ekle
document.body.appendChild(renderer.domElement);

// 5. Render döngüsü — scene & camera tanımlı varsayılır
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

Holodepth notu: 60 FPS hedefi

Saniyede 60 kare hedefi, her kare için kabaca 16,6 ms bütçesi demektir. Sahne ağırlaştıkça renderer bu süreyi aşar ve akışta takılmalar görülür; bu yüzden veriyi "az ama öz" tutmak 3D geliştirmede temel beceridir.