holodepth

Three.js · Renderer

Renderer: piksel işleme merkezi

Three.js'te ekrana görüntü basan katman WebGLRenderer'dır (veya alternatif renderer sınıfları). Ağır iş CPU'da değil GPU'da yürür; her karede render(scene, camera) ile o anki sahne ve kamera durumu okunur, piksel tamponuna yazılır ve sonuç <canvas> üzerinden sayfaya taşınır. Renderer sahne grafiğini güncellemez; yalnızca çıktı üretir.

Holodepth üçlüsünde roller birbirini tamamlar: sahne yapıyı tutar, kamera hangi kesitin çizileceğini seçer, renderer bu kesiti GPU ile işler. Bu metinde üçlünün çıktı ve yürütme ayağını okuyorsunuz; sahne grafiği ve kamera matrisleri kardeş sayfalarda kalır.

Aşağıda render hattının özeti, requestAnimationFrame döngüsü, setSize / pixel ratio, shadowMap bayrakları, API tablosu ve tam kurulum örneği var; ışık türleri, materyal modelleri veya scene.traverse burada tekrar anlatılmaz.

WebGLRenderer ve görüntüleme hattı

WebGLRenderer ve GPU donanımı

Varsayılan yol WebGLRenderer'dır; girişte özetlenen yürütücü katman pratikte bu sınıftır. Paralel piksel işi ve donanım hızlandırması sayesinde kare başına çizim maliyeti CPU ile kıyaslanamaz ölçekte ölçeklenir; çıktı domElement ( <canvas>) üzerinden DOM'a eklenir.

  • Paralel hesaplama: CPU çoğu işi sırayla yürütür; GPU ise aynı komutu yüzlerce veya binlerce çekirdekte aynı anda tekrarlayabilir. Three.js'te bu, özellikle fragment (piksel) aşamasında hissedilir: ekrandaki her piksel için ışık, materyal ve derinlik hesabı GPU tarafında paralel yürür. Sahne büyüdükçe “her pikseli JavaScript ile boyamak” yerine bu model performansın temelidir.
  • Donanım hızlandırması: WebGLRenderer, <canvas> üzerinde bir WebGL bağlamı açar ve çizim komutlarını doğrudan GPU'ya iletir — HTML Canvas 2D API'sinde olduğu gibi her karede tek tek fillRect çağırmazsınız. Akıcı kare hızı, bu düşük seviyeli GPU yolunun sürekli beslenmesine bağlıdır. Sahne + kamera + renderer üçlüsünün minimal kurulumu sahne girişindeki tam örnekte verilir; Canvas 2D ile WebGL farkı için Canvas vs WebGL köprüsüne bakabilirsiniz.

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

new THREE.WebGLRenderer({ … }) satırındaki seçenekler, canvas ve WebGL bağlamının ilk an nasıl açılacağını belirler; çoğu seçenek sonradan değiştirilemez; gerekirse renderer yeniden oluşturulur. Görsel kalite, şeffaflık ve GPU tercihi burada; piksel oranı ve boyut bir sonraki alt başlıkta, gölge ve renk uzayı tam örnekte tamamlanır.

  • Antialias: Kenar ve eğimli yüzeylerde görülen tırtıklanmayı (aliasing) azaltır; çokgen kenarları daha yumuşak görünür. { antialias: true } ek GPU maliyeti getirir — mobilde pil ve ısınma için bazen false bırakılır; masaüstü ve vitrin sahnelerinde sık açık tutulur. Kapalıyken sonradan post-processing ile AA mümkün olabilir; burada yalnızca oluşturucu bayrağı anlatılır.
  • Alpha: alpha: true iken WebGL tamponu şeffaf olabilir; çizilmeyen veya yarı saydam piksellerde altta sayfanın CSS arka planı görünür. Tam opak sahne için genelde setClearColor (ve gerekirse alpha kanalı) ile birlikte düşünülür — bu, sahne background yaklaşımından farklı bir katmandır. Şeffaf canvas, 3B içeriği HTML/CSS katmanlarıyla kompozisyon için kullanılır (ör. sayfa düzeni üzerinde canvas, HUD).
  • powerPreference: Tarayıcıya hangi GPU profilini tercih ettiğinizi bildirir; garanti değildir — son söz tarayıcı ve işletim sistemindedir. Çift GPU'lu dizüstülerde "high-performance" bazen ayrık (dedicated) kartı seçtirir; "low-power" pil ömrünü korur. Yoğun sahnelerde high-performance yaygındır; ölçüm yapmadan her projede açmak şart değildir. 
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
  powerPreference: 'high-performance',
});

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.