holodepth

Three.js · Kamera Türleri

CubeCamera (Küp Kamera) Altı Yönden Çevre Yakalama

CubeCamera (Küp Kamera); gerçek zamanlı yansıma üretmek

Parlak bir yüzeye baktığınızda çevrenin silueti orada görünür; bu, tek bir fotoğraf açısından değil, etrafınızdaki ışık ve nesnelerin her yönden özetlenmesinden gelir. Three.js'te ana sahneyi çizen kamera genelde tek bakış noktasıdır; CubeCamera ise aynı anda ön, arka, üst, alt, sağ, sol altı yönden örnek alarak 360° çevre bilgisini toplar.

Bu sistemin amacı doğrudan canvas'a kare basmak değildir: altı görüntü bir CubeTexture (küp dokusu) olarak WebGLCubeRenderTarget'a yazılır; malzeme tarafında çoğunlukla envMap ile canlı yansıma veya çevre aydınlatması üretilir. Statik HDR / PMREM birçok projede yeterlidir; sahnede hareket eden nesnelerin yansıması güncellenmeliyse küp kamera devreye girer. Oyuncunun gördüğü kadraj için PerspectiveCamera ; ölçülü plan görünümü için OrthographicCamera.

Bu sayfa CubeCamera'ya özeldir: dinamik yansıma mantığı, altı yüzlü anatomi, küp haritası şeması, etkileşimli demo (statik HDR karşılaştırması), near / far, performans ve özyineleme uyarıları. View / projection ve frustum dili için Kamera giriş sayfasına dönün.

Dinamik Yansımaların Mantığı

Gerçek hayatta parlak bir metal küveye baktığınızda yüzeyde odanın silueti görünür: ışık sadece “tek renk” değil, çevrenizin o noktadan görünen özetidir. Kamera açısını değiştirdiğinizde yansıma da kayar; çünkü yansıyan şey duvardır, penceredir, hareket eden nesnelerdir. Three.js'te aynı hissi vermek için malzemeye bir çevre haritası (envMap) verilir; küp kamera bu haritanın kaynağını sahnenin o anki halinden üretir.

Birçok projede çevre, diskten yüklenen HDR veya stüdyo HDRI ile sabitlenir; PMREM ile önceden işlenip malzemeye bağlanır. Ürün vitrini, sabit gün ışığı veya yavaş değişen arka plan için bu yol hızlı ve stabildir; yansıma “güzel” görünür, sahne içindeki küpler dönmese bile küre yüzeyi değişmez. Sorun, çevrenin canlı olduğu senaryolarda ortaya çıkar: hareketli objeler yansımada görünmüyorsa izleyici bunu hemen fark eder.

İşte burada CubeCamera devreye girer. Ana ekran kamerasından bağımsız olarak, yansıyan nesnenin yakınında (veya merkezinde) duran bu sistem her güncellemede çevreyi altı yönden yeniden render eder ve sonucu küp dokusuna yazar; parlak malzeme aynı envMap yolunu kullanır ama doku artık statik dosyadan değil, sahnenin güncel örneğinden beslenir. “Her kare” mi “hareket olunca” mı güncelleneceği performans tercihidir; mantık aynıdır: yansıma ile sahne senkron kalır.

Altı yönün nasıl birleştiği ve WebGLCubeRenderTarget yapısı bir sonraki bölümde; statik HDR ile canlı küp haritasını yan yana denemek için etkileşimli demoya geçin. Maliyet ve “statik yeter” kararı performans bölümünde toplanır; burada yalnızca neden ihtiyaç doğduğunu netleştiriyoruz.

Yapısal Anatomi: Altı Yüzlü Çevresel Görüş

Mimari açıdan bir CubeCamera nesnesi, tek bir merkez noktaya sırt sırta bağlanmış altı adet PerspectiveCamera ünitesi gibi çalışır. Bu altı sanal kameranın her biri, kusursuz bir küp haritası oluşturabilmek adına tam olarak 90 derecelik bir görüş alanına (FOV) kilitlenmiştir. +X, -X, +Y, -Y, +Z ve -Z yönlerine bakan bu kameralar, birleştirildiklerinde etraflarındaki dünyayı eksiksiz bir 360 derece küre olarak tarar ve elde ettikleri veriyi özel bir bellek hedefine (render target) yazarlar.

CubeTexture (Küp Dokusu) Kavramı: GPU (ekran kartı) tarafında küp haritası, aynı çözünürlüğe sahip altı adet 2D resmin özel bir şekilde paketlenmiş halidir. Bu altı yüzey, shader (gölgelendirici) seviyesinde tek bir çevresel örnekleyici (samplerCube) olarak algılanır. CubeCamera'nın görevi, animasyon döngüsü sırasında bu altı yönün fotoğrafını ardışık olarak çekip bu doku paketinin içine yerleştirmektir.

  • near / far (Kırpma Düzlemleri): Standart kameralarda olduğu gibi, yansıma haritasına hangi mesafedeki nesnelerin dahil edileceğini belirler. Sadece yakındaki nesnelerin yansımasını istiyorsanız bu değerleri daraltarak performansı artırabilirsiniz.
  • WebGLCubeRenderTarget (Hedef Tampon): Kameraların çektiği 6 fotoğrafın saklandığı dijital tuvaldir. Burada belirlediğiniz çözünürlük değeri (örneğin 256x256 veya 512x512), yansımanın ne kadar cam gibi net (yüksek yük) veya buzlu/bulanık (düşük yük) görüneceğini doğrudan belirler.

Altı yüz düzeni (cross): Küp haritası GPU’da altı ayrı 2D doku yüzeyi olarak saklanır; bu şema, o yüzlerin birbirine nasıl bitişik düşündüğünü gösterir (yaygın “açılmış küp” çizimi). Yüzlerin üzerine gelerek yön ipuçlarını görebilirsiniz. Eksen adları Three.js / WebGL ile uyumludur; ön/arka etiketi (+Z / −Z) yaygın yorumdur; gerçek “ekran önü” kamera ve nesne yerleşiminize bağlıdır.

CubeCamera bağlantısı: Her güncellemede bu altı yüz sırayla render edilir ve WebGLCubeRenderTarget içine yazılır (tipik sıra: +X → −X → +Y → −Y → +Z → −Z). Alttaki şemada sırayla vurgu, bu akışı hatırlatır.

Etkileşimli demo: statik HDR vs CubeCamera

Ortada metalik bir küre, etrafta hareket eden küpler: Statik HDR modunda çevre PMREM ile önceden pişirilir; sahne hareket etse bile yansıma "donuk" kalır. CubeCamera modunda küre, her güncellemede çevreyi altı yönden yeniden yakalar; hareketli nesneler yansımada canlı görünür.

Not: "Her kare" ve "Her 2 kare" arasındaki fark çoğu zaman görüntüde değil, FPS ve üstteki maliyet satırında hissedilir; yansıma hâlâ akıcı görünebilir. "Elle"de sahne o an aynıysa tek tıkta fark az olabilir; küpleri izleyip tekrar deneyin veya üstteki kısa onay mesajına bakın.

~1× sahne
— FPS

Bu kontroller ne işe yarar?

  1. Çevre kaynağı: Statik HDR önceden pişirilmiş çevre; küre yansıması hareketli küpleri "canlı" göstermez. CubeCamera — yansıma gerçek zamanlı üretilir; küpler hareket ettikçe kürede görünürler.
  2. Her kare / Her 2 kare: Küp haritasının ne sıklıkla yeniden çekileceği (GPU maliyeti). Sahne aynı kalabilir; asıl fark FPS ve sol üstteki maliyet metnindedir.
  3. Elle + Haritayı güncelle: Küp haritası yalnızca düğmeye basınca yenilenir. Tıkladığınızda üstte kısa onay görünür; küpler hareket halindeyken fark daha belirgin olur.
  4. Canlı / Dondur: CubeCamera modunda Dondur ile update() durur küpler döner, küre yansıması son çekilen küp haritasında kalır. Üstteki “küp ✓” ve şemadaki hızlı yüz vurgusu yalnızca gerçek güncellemede çalışır.
  5. Onay kutusu (özyineleme): Varsayılan kapalı: küp çekilirken küre gizlenir doğru yansıma. Açık: küre de kareye girer; yansımada artefakt / kararma (bilerek gösterilen hata).
Çevre kaynağı
CubeCamera güncelleme
Yansıma

Kapalı (önerilen): küre o an gizlenir, yansıma temiz. Açık: küre karede kalır; küp haritası kendi yüzeyini de içerir (beklenen bozulma).

Açıkken: küp haritası kendi yüzeyini içerir; yansıma bilinçli şekilde bozulur.
Statik HDR: tek pişirilmiş çevre hızlı, hareket yansımaz. CubeCamera: her uygun karede altı ek render + ana sahne; sıklık düşürüldükçe FPS genelde toparlanır (görüntü farkı her zaman belirgin olmayabilir). Küp çekiminde küre görünür kalırsa harita özyineleme yapar üretimde genelde visible = false.

Üstteki etkileşimli sahne (diagram-cube-camera.js, bu sayfadaki data-cube-camera-demo kökü) ile aynı sayıları ön harita tabloda topladık; aşağıdaki kod özeti demodaki küp hedefi, CubeCamera aralığı ve güncelleme karesini hatırlatır. Araç çubuğu / HUD ile değişenler tabloda HUD satırında; kalan satırlar dosyadaki sabitlerdir. Tür sütunu: ekrandaki kontroller ile kaynak koddaki sabitleri ayırır.

Bu demo’da kontrol edilenler

  • Çevre kaynağı → Statik HDR (PMREM) veya canlı CubeCamera
  • CubeCamera güncelleme → her kare / her 2 kare / elle (yalnızca Cube modunda)
  • Yansıma → Canlı (sürekli update) veya Dondur (küp pass atlanır)
  • Haritayı güncelle → elle modda tek karelik küp yenileme
  • Özyineleme demosu → küp çekilirken kürenin sahneye kalması (bilerek bozulma)
diagram-cube-camera.js Sayfa Demosu Sabitleri (cube-camera.html playground)
Sahne / rol Parametre Değer Tür
Ortak · renderer Ton / renk uzayı ACESFilmicToneMapping, exposure 1 · çıkış SRGBColorSpace (destekleniyorsa) 🔒 Sabit
setPixelRatio min(devicePixelRatio, 2) 🔒 Sabit
Ortak · sahne Scene.background 0x05060c 🔒 Sabit
Ortak · ana kamera + orbit PerspectiveCamera FOV 45, clip 0.1–100; başlangıç (0, 2.1, 7.2) 🔒 Sabit
OrbitControls Hedef (0, 0.5, 0), damping açık 🔒 Sabit
Işıklar AmbientLight 0xffffff, yoğunluk 0.25 🔒 Sabit
DirectionalLight 0xffffff · 1.1; konum (4, 10, 6) 🔒 Sabit
Zemin PlaneGeometry / MeshStandardMaterial 24×24, renk 0x1a1e2a, metalness 0.15, roughness 0.85 🔒 Sabit
Yansıtan küre SphereGeometry / materyal Yarıçap 0.55, segment 48; metalness 1, roughness 0.06, envMapIntensity taban 1.15; konum (0, 0.58, 0) 🔒 Sabit
Hareketli küpler 5× BoxGeometry 0.38³; palet 0x5ec8ff … 0xffe066; metalness 0.2, roughness 0.55; yörünge yarıçapı ≈2.85 🔒 Sabit
Statik HDR PMREMGenerator + RoomEnvironment fromScene(roomEnv, 0.04) → sahne environment + küre envMap (HDR modunda) 🔒 Sabit
Canlı küp haritası WebGLCubeRenderTarget Yüz boyutu 256, generateMipmaps: true, LinearMipmapLinearFilter 🔒 Sabit
CubeCamera near 0.1, far 80, hedef aynı WebGLCubeRenderTarget; konum küre ile senkron 🔒 Sabit
Pedagoji (kod) Küp pass etiketleri / süre CUBE_FACE_LABELS (+X … −Z); şerit için yüz başına 4 animasyon karesi 🔒 Sabit (kod)
Şema animasyonu Küp haritası SVG + pulseFast Yüz vurgusu yalnızca gerçek küp güncellemesinde (Her 2 kare / elle); yavaş döngü 620 ms 🔒 Sabit + HUD (eş)
HUD başlangıç (cube-camera.html) Mod / sıklık Çevre: Statik HDR; sıklık: Her kare 🔄 Dinamik (HUD)
HUD Çevre, sıklık, dondur, elle, özyineleme Kullanıcı seçimi; dondur iken elle güncelleme kapalı 🔄 Dinamik (HUD)

Uygulama: canlı yansıma oluşturma

Tipik kurulum özeti aşağıdadır; sayısal sabitler üstteki tablo ve diagram-cube-camera.js ile aynı hizada tutulmuştur; üretimde far / çözünürlük sahne ölçeğine göre değişir. Yansıtan nesneyi küp çekimi sırasında gizlemek (visible = false) iç içe yansımayı ve gereksiz maliyeti azaltır. 

// diagram-cube-camera.js okuma sırası (üstteki demo sabitleri tablosu ile)

// 1. Küp render hedefi (çözünürlük + filtre; bu sayfada 256² / yüz)
const cubeRT = new THREE.WebGLCubeRenderTarget(256, {
  generateMipmaps: true,
  minFilter: THREE.LinearMipmapLinearFilter,
});

// 2. CubeCamera (near, far, renderTarget) demoda clip sahne ölçeğine göre 0.1 … 80
const cubeCamera = new THREE.CubeCamera(0.1, 80, cubeRT);
cubeCamera.position.copy(sphere.position);
scene.add(cubeCamera);

// 3. Yansıyan küre materyali (HDR veya canlı küp: envMap kaynağı değişir)
const sphereMat = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 1,
  roughness: 0.06,
  envMapIntensity: 1.15,
  envMap: cubeRT.texture,
});

// 4. Güncelleme karesi özyineleme önleme: cubeCamera.update öncesi küreyi gizle
function onAnimationFrame() {
  sphere.visible = false;
  cubeCamera.update(renderer, scene);
  sphere.visible = true;
  renderer.render(scene, camera);
}

Teknik Tablo: CubeCamera Parametreleri ve Mimari Etkileri

Parametre / Metot Kavramsal Açıklama Performans ve Mimari Notu
İç Perspektif Kameralar (FOV) Three.js mimarisinde, küpün altı yönüne bakan kameralar boşluk kalmaması veya örtüşme olmaması için kusursuz 90° (yatay ve dikey) görüş alanıyla sabitlenir. Kullanıcı tarafından manuel olarak değiştirilmez motorun sabit mimari davranışıdır.
Çözünürlük (Resolution) Küp haritasını oluşturan her bir karenin (yüzün) sahip olduğu piksel boyutudur (örn. 128, 256, 512). Hesaplama işlemi 6 farklı yüz için yapıldığından, çözünürlüğü artırmak render maliyetini ve VRAM tüketimini yaklaşık 6 kat eksponansiyel olarak artırır.
.update() Kameranın o anki sahne verisini yakalayıp yeni bir çevresel doku haritası (envMap) oluşturmasını tetikler. Dinamik yansımalar için requestAnimationFrame içinde her karede (60 FPS) çağırmak, performansı çökerten (bottleneck) en yaygın hatadır. Profesyonel projelerde güncellemeler aralıklı (throttle) veya yalnızca nesne hareket ettiğinde yapılır.
renderTarget Çekilen altı fotoğrafın birleştirilerek saklandığı özel bellek nesnesidir. Çıktısı olan .texture özelliği, materyallerin envMap (çevresel harita) kanalına bağlanır. Bu hedefin bellek formatı, mipmap ayarları ve çözünürlüğü, yansımanın görsel kalitesi ile ekran kartı bant genişliği tüketimi arasındaki dengeyi belirler.

Performans ve optimizasyon

Uyarı: Her cubeCamera.update() çağrısı, sahneyi içeride altı kez tam render eder. Ana ekranınız için yaptığınız renderer.render(scene, camera) ise tek geçiştir. Canlı küp haritası açıkken toplam maliyet, güncelleme yapılan karelerde kabaca ≈ 6× + 1× düşünülebilir; tek perspektif kameralı kareye göre belirgin şekilde pahalıdır. Aşağıdaki iki pratik eksen maliyeti düşürür: ne sıklıkla update(), hangi çözünürlükte yakalama.

  • Zamanlanmış güncelleme: 60 FPS'te her karede update() çağırmak, teoride saniyede altmış kez “altı pass’lik” ek yük demektir; çoğu yansıma bunu gerektirmez. Olay tabanlı güncelleme (kamera durdu, kapı açıldı, obje sürüklendi) veya her 2–3 karede bir yenileme genelde yeterli akıcılık verir — görüntüde küçük gecikme kalabilir, FPS ve sol üst maliyet satırı rahatlar. Demoda “Her kare / Her 2 kare / Elle” ve Dondur ile farkı ölçebilirsiniz: sahne aynı kalsa bile maliyet metni değişir. Üretimde kalite ayarına “yüksek / orta / düşük yansıma yenileme” eklemek yaygın bir kalıptır.
  • Düşük çözünürlük: WebGLCubeRenderTarget yüz boyutu (ör. 256×256) hem bellek hem bant genişliğini doğrudan etkiler; altı yüz çarpanı unutmayın. roughness yüksek malzemelerde yansıma zaten bulanık olduğu için 256 px sık yeterlidir; yakın plan hero nesnede 512 denebilir, 1024+ nadiren haklıdır. Çözünürlük anatomi bölümündeki hedefle birlikte seçilir netlik / maliyet dengesini önce düşükten başlayarak test edin.

Ne zaman kullanmayın? Bölüm 1'deki “canlı çevre” ihtiyacı yoksa küp kamera eklemeyin; statik yol daha ucuz ve öngörülebilirdir.

  • Statik veya Yavaş Değişen Sahneler: Sahnenizin arka planı sabitse, sadece ana kamera etrafta geziniyorsa veya ışıklandırma çok yavaş değişiyorsa; önceden hesaplanmış (baked) bir HDR, PMREM veya statik bir CubeTexture kullanmak en güvenli yoldur. Böyle bir senaryoda CubeCamera kullanmak, zaten değişmeyen bir çevreyi her karede 6 kez baştan çizerek GPU'yu boş yere yormak anlamına gelir (tamamen gereksiz bir 6x render maliyeti). Etkileşimli demoda yer alan Statik HDR modu, bu performans dostu temel durumu (baseline) temsil eder.
  • Mobil Cihazlar ve Düşük Kapasiteli GPU'lar: Her bir animasyon karesinde sahneyi fazladan 6 kez render etmek, mobil cihazların termal ve işlemci limitleri için genelde sürdürülebilir değildir. Mobil desteği önemsiyorsanız; bu dinamik yansıma özelliğini kalite menüsünden kapatılabilir yapın, render çözünürlüğünü olabildiğince düşük tutun (örn. 128x128 veya 256x256), güncellemeleri seyrekleştirin ya da sadece "premium" segment cihazlarda aktif edin. Düşük donanımlı sistemlerde statik bir HDRI ve basit bir envMap ikilisi, çoğu kullanıcı için görsel olarak yeterince tatmin edici bir illüzyon yaratacaktır.
  • Özel Üretilmiş Kaliteli Bir HDR Varsa: Profesyonel ürün görselleştirmelerinde, yansımaların kusursuz ve kontrollü görünmesi için genellikle stüdyo ortamında hazırlanmış HDRI dosyaları tercih edilir. Bu bağlamda yansımanın estetiği doğrudan dosyadan beslenir. Eğer sahnedeki diğer hareketli nesnelerin bu ürüne anlık olarak yansıması (çevresel karmaşa) projeniz için mutlak bir gereksinim değilse (Bkz. Bölüm 1 kullanım kriterleri), fazladan bir CubeCamera hesaplaması eklemeyin. Doğrudan üretim kalitesindeki statik HDR dosyanızla ilerlemek en pürüzsüz ve temiz sonucu verecektir.

Holodepth Uzman Notu: Özyinelemeli (Recursive) Yansıma ve Görünürlük Kuralı

Gerçek dünyada iki ayna karşılıklı konulduğunda sonsuz bir yansıma tüneli (özyineleme) oluşur. Ancak WebGL ve CubeCamera mimarisi, donanım limitleri gereği bu sonsuz yansıma döngüsünü otomatik olarak hesaplayamaz. Dahası, küp kamera genellikle yansıtıcı objenin (örneğin krom bir kürenin) tam merkezine yerleştirildiği için, fotoğraf çekimi esnasında bu ana objeyi geçici olarak gizlemezseniz (visible = false), kamera doğrudan objenin "kendi iç yüzeylerini" render etmeye çalışarak tuhaf görsel hatalara yol açar. Yansıtıcı nesneyi yalnızca güncelleme anında gizlemek, hem bu iç içe yansıma paradoksunu çözer hem de motorun hesaplama yükünü hafifleterek performansı korur.