holodepth

Three.js · Kamera türleri

StereoCamera (stereoskopik kamera)

İki göz, bir sahne; parallaks ile derinlik

İki gözünüz aynı sahneyi milimetre farklı açılardan görür; beyin bu kaymayı (parallaks) derinlik olarak yorumlar. VR başlığı, karton gözlük veya anaglif gözlük; hepsi aynı fikrin farklı sunumlarıdır: izleyiciye sol ve sağ kanal verip beynin birleştirmesini beklemek. Bu, ekranı dört panele bölen ArrayCamera veya çevre dokusu üreten CubeCamera ile karıştırılmamalıdır; amaç tek sahnede stereoskopik çift.

Three.js'te bunu StereoCamera sağlar: içeride iki PerspectiveCamera (cameraL, cameraR), aralarında tipik olarak insan göz aralığına yakın 6,4 cm ölçeğinde eyeSep. Dünya kamerasını hareket ettirdiğinizde çift, bu mesafeye göre güncellenir. Tek bakışlı oyun veya ürün turu için PerspectiveCamera; aynı karede dört farklı oyuncu kadrajı için ArrayCamera.

Bu sayfa StereoCamera'ya özeldir: stereoskopik mantık, sol/sağ anatomi, eyeSep ve update(), yan yana / anaglif demo, WebXR ve efekt katmanı özeti, teknik tablo ve yakınsama (convergence) notları. Genel kamera dili için Kamera giriş sayfasına dönün; doğrudan renderer.render(scene, stereo) yerine üst katmanların rolü hemen alttaki mor kutuda özetlenir.

StereoCamera tek başına “doğrudan çizim” için tasarlanmaz

StereoCamera genellikle doğrudan renderer ile kullanılmaz. Bunun yerine AnaglyphEffect, StereoEffect veya WebXR gibi üst seviye sistemler bu kamerayı arka planda otomatik olarak yönetir.

Pratikte StereoCamera çoğu projede düşük seviye yardımcı olarak kalır; üretim hattında ekranı bölmek, anaglif birleştirmek veya XR oturumu kurmak üst katmanların işidir; aşağıdaki canlı örnek ise bu yardımcının manuel (öğretici) kullanımını gösterir.

Stereoskopik görüşün mantığı

Neden iki göz? Her göz dünyayı hafifçe farklı açıdan görür; bu görüntü kayması (binocular disparity) sayesinde beyin bir nesnenin uzaklığını tahmin edebilir. Dijital tarafta aynı farkı üretmek için StereoCamera sahneyi sol ve sağ kanal olarak düşünür; çıktıyı yan yana, üst üste (anaglif) veya VR başlığına göre sunmak ayrı bir kompozisyon / efekt katmanının işidir.

Kullanım senaryoları; ortak desen: StereoCamera sol/sağ görüntüyü üretir; nasıl sunulacağı platforma göre değişir (demo ve uygulama bölümlerinde).

  • WebXR / WebVR: Başlık her göze ayrı tampon ve projeksiyon ister; oturum genelde kendi stereo yolunu yönetir, StereoCamera ise aynı parallaks fikrinin düşük seviye modelidir. Holodepth’te ayrıntılı XR akışı WebXR konusundadır — burada yalnızca “iki göz, bir sahne” bağlantısını kuruyoruz; ArrayCamera çok bölgeli tek ekran içindir, VR çift göz değildir.
  • Karton gözlük (Google Cardboard vb.): Telefon ekranında yan yana (side-by-side) iki yarım görüntü; mercekler her göze doğru yarıyı seçer. Sayfa demosunda bu mod viewport ile bölünür; üretimde benzer kalıp veya StereoEffect kullanılır. Göz mesafesi (eyeSep) ve nesne mesafesi birlikte “çok yakın / çok derin” hissi verir — anatomi bölümünde.
  • Anaglif: Kırmızı–cyan (veya renk kanalı) tek düz görüntüde derinlik ipucu; renkli gözlükle sol/sağ ayrılır. Demo’da basit birleşim gösterilir; kalıcı çözüm çoğu projede AnaglyphEffect gibi üst katmandadır (giriş altındaki callout). Tek bakışlı sinemadan farklıdır: izleyici aktif stereo birleştirir.
  • Sinema ve profesyonel projeksiyon: Polarize gözlük veya zaman sıralı (aktif shutter) çift projeksiyon — donanım ve salon standardına bağlıdır; Three.js tarafında yine sol/sağ kare üretimi gerekir, sunum katmanı projektöre özeldir. Oyun motoru veya özel render pipeline olmadan “sinema kalitesi” yalnızca kamera sınıfıyla gelmez; StereoCamera burada üretim hattının küçük bir parçasıdır.

Yapısal anatomi: sol ve sağ kanallar

StereoCamera, içinde iki adet PerspectiveCamera barındırır: cameraL ve cameraR. Dünya uzayında kameranızı (veya başlığı) hareket ettirdiğinizde, bu iki alt kamera göz mesafesine göre otomatik konumlanır; projeksiyonları güncellemek için tipik akışta stereoCamera.update(worldCamera) çağrılır (sürümünüze göre tam imza dokümantasyonda).

  • Eye separation (göz mesafesi): eyeSep — iki sanal göz arasındaki mesafe; varsayılan insan ortalamasına yakın (kabaca 6,4 cm, sahne birimi metreyse ~0.064). Artınca sol/sağ görüntüler arasındaki yatay kayma büyür, stereo tabanı genişler; azalınca derinlik düzleşir. Aşırı değerler "minyatür dev gözü" gibi abartılı veya baş ağrısı riski taşıyan sonuç verir — konfor sınırı yakınsama / parallaks bölümünde. Demo HUD’undan canlı deneyebilirsiniz; sahne birimi metre değilse aşağıdaki ölçek paragrafına göre yeniden yazın.
  • cameraL ve cameraR: İki tam PerspectiveCamera örneği; FOV, near / far ve projeksiyon matrisi dünya kamerasına (baş / rig) bağlı kalır. Tipik akış: stereo.update(worldCamera) — elle sol/sağ konum yazmak yerine bu güncelleme çifti senkron tutar. Çizimde önce cameraL ile sol viewport, sonra cameraR ile sağ viewport (yan yana mod); anaglif veya XR’de sunum farklı olsa da üretim hattı aynı iki kanaldan beslenir — bölüm 3 ve uygulama özetinde.

Bu değer gerçek dünya ölçeğine bağlıdır; sahnenin birimi metre değilse, eyeSep değeri sahne ölçeğine göre ayarlanmalıdır (örneğin 1 birim = 1 cm ise insan göz aralığı kabaca 6.4 birim olur).

Etkileşimli demo: cameraL, cameraR ve parallaks

Aynı sahne iki kez çizilir: sol yarı stereo.cameraL, sağ yarı stereo.cameraR (yan yana mod). Göz mesafesi kaydırıldıkça iki görüntü arasındaki yatay fark büyür veya küçülür; nesne derinliği (Z) ile nesneyi öne/arkaya alarak parallaksın nasıl değiştiğini görebilirsiniz. Anaglif modunda iki tampon birleşir (basit kırmızı–camgöbeği ayrımı; öğretici; Dubois matrisli profesyonel anaglif ayrı konudur).

StereoCamera · sol / sağ —
Mod
stereo.update(worldCamera) öncesi ana kamera dünya matrisi güncel olmalı; cameraL / cameraR üzerinde lookAt çağırmayın — Three.js off-axis çifti update() ile yazar. Yakınsamayı ana kamerada lookAt(nesne) + camera.focus = mesafe(kamera, nesne) ile hizalarsınız (zero parallax nesne merkezinde). Yan yana modda viewport / scissor için renderer.getSize() (mantıksal boyut) kullanılır; domElement.width (tampon pikseli) verilirse pixelRatio iki kez uygulanır ve sağ göz kayar. stereo.aspect = 0.5 tam tuval en-boy oranında tek gözün oranıdır. Üretimde genelde StereoEffect, AnaglyphEffect veya WebXR bu düzeni yönetir.

Uygulama: VR ve anaglif hazırlığı

Üstteki bölüm 3 aynı mantığı canlı gösterir (viewport bölme veya basit anaglif birleşimi). Üretimde ise StereoCamera çoğu projede tek başına "ekrana bas" demek değildir; yan yana iki görüntü, anaglif birleşimi veya XR oturumu için examples/jsm altındaki yardımcılar veya özel bir render geçidi kullanılır. Temel kurulum iskeleti şöyle özetlenebilir:

Tür sütunu: dosyada sabit kalanlar ( Sabit) ile HUD, görüntü modu veya pencere ölçüsüne bağlı güncellemeleri ( Dinamik) ayırır.

diagram-stereo-camera.js — Demo Sabitleri (stereo-camera.html bölüm 3)
Sahne / rol Parametre Değer Tür
Işık AmbientLight 0xffffff, 0.45 🔒 Sabit
DirectionalLight 0xffffff, 1.05; position.set(3.5, 8, 5) 🔒 Sabit
Zemin GridHelper boyut 14, bölüm 28; position.y = −0.55; çizgi 0x3a4a6a / 0x1a2030 🔒 Sabit
Parallax nesnesi Geometri / materyal BoxGeometry(0.95, 0.95, 0.95), MeshStandardMaterial renk 0x6a8ae8, metalness 0.2, roughness 0.42, emissive 0x1a2848, emissiveIntensity 0.18 🔒 Sabit
Konum · Z sürgüsü Başlangıç (0, 0.35, 0); HUD aralığı −2.2 … 2.8 (adım 0.05) 🔄 Dinamik (HUD)
Görsel yardımcı EdgesGeometry + AxesHelper(1.35) Kenar çizgisi 0xc8d8f8 (opacity 0.85); eksenler kutu merkezinde 🔒 Sabit
Dünya kamerası PerspectiveCamera FOV 50, near 0.05, far 120; aspect her setSize sonrası getSize() ile 🔄 Dinamik (viewport)
position (0, 1.05, 3) 🔒 Sabit
Yakınsama lookAt(mesh.position) · focus = position.distanceTo(mesh.position) · updateProjectionMatrix() 🔄 Dinamik (mesh Z)
StereoCamera eyeSep Varsayılan 0.064; HUD sürgüsü 0.012 … 0.12 (adım 0.002) 🔄 Dinamik (HUD)
aspect Yan yana: 0.5 (tek göz yarım genişlik); anaglif tampon: 1 🔄 Dinamik (mod)
Çıktı WebGLRenderer setPixelRatio(Math.min(devicePixelRatio, 2)); setClearColor(0x05060c); SRGBColorSpace (destek varsa) 🔒 Sabit
Yan yana çizim Viewport / scissor renderer.getSize() mantıksal boyut; sol yarı cameraL, sağ yarı cameraR; bitişte tam tuval setViewport(0,0,sw,sh) 🔄 Dinamik (viewport)
Anaglif (özet) İki tampon + tam ekran quad İki WebGLRenderTarget (çizim tamponu boyutu), klasik R|GB birleşimi; FullScreenQuad (Pass.js) 🔄 Dinamik (viewport) 
// diagram-stereo-camera.js — StereoCamera çekirdeği (yan yana mod)

const worldCamera = new THREE.PerspectiveCamera(50, 1, 0.05, 120);
worldCamera.position.set(0, 1.05, 3);

function aimAtSubject() {
  worldCamera.lookAt(mesh.position);
  worldCamera.focus = worldCamera.position.distanceTo(mesh.position);
  worldCamera.updateProjectionMatrix();
}

const stereo = new THREE.StereoCamera();
stereo.eyeSep = 0.064; // HUD: 0.012 … 0.12

function onResize() {
  renderer.setSize(w, h, false);
  const size = new THREE.Vector2();
  renderer.getSize(size);
  worldCamera.aspect = size.x / Math.max(1, size.y);
  worldCamera.updateProjectionMatrix();
}

function renderStereoSbs() {
  aimAtSubject();
  worldCamera.updateMatrixWorld(true);

  stereo.aspect = 0.5; // tam tuvalde tek göz = yarım genişlik
  stereo.update(worldCamera);

  const size = new THREE.Vector2();
  renderer.getSize(size);
  const halfW = size.x / 2;
  const restW = size.x - halfW;

  renderer.setScissorTest(true);
  renderer.setViewport(0, 0, halfW, size.y);
  renderer.setScissor(0, 0, halfW, size.y);
  renderer.render(scene, stereo.cameraL);
  renderer.setViewport(halfW, 0, restW, size.y);
  renderer.setScissor(halfW, 0, restW, size.y);
  renderer.render(scene, stereo.cameraR);
  renderer.setScissorTest(false);
  renderer.setViewport(0, 0, size.x, size.y);
}

// Anaglif: stereo.aspect = 1; sol/sağ tam ekran iki WebGLRenderTarget → FullScreenQuad (R|GB birleşimi)

Gerçek projede pencere boyutu, XR oturumu veya anaglif için kullandığınız modülün API’si farklılık gösterir; önemli olan sol/sağ projeksiyonların aynı sahne anına denk gelmesi ve konfor için parallaks sınırlarını aşmamaktır.

Teknik tablo: StereoCamera parametreleri

Parametre Açıklama Tipik değer / not
eyeSep İki göz arasındaki fiziksel mesafe (sahne birimine göre) 0.064 (insan ortalaması)
aspect Tek bir gözün en–boy oranı; split-screen’de genelde yarım genişlik düşünülür 0.5 (yatay ikiye bölmede sık)
cameraL Sol göz PerspectiveCamera update() ile güncellenir
cameraR Sağ göz PerspectiveCamera update() ile güncellenir

Derinlik yanılsaması: yakınsama ve parallaks

Stereoskopik içerikte rahatlık önceliklidir. İki görüntü arasındaki yatay kayma (parallaks) çok büyürse gözler zorlanır, baş ağrısı ve mide bulantısı riski artar.

Sol ve sağ görüntüdeki yatay kayma, nesnenin ekran düzlemine göre nerede “oturduğunu” sınıflar; demo’da nesne Z’si ve eyeSep bu kaymayı hissettirir:

  • Pozitif parallaks: Sol/sağ görüntülerde nesne kenarları birbirinden ters yönde kaymış gibi görünür; beyin nesneyi fiziksel ekranın arkasında, sahne içinde derinlikte okur. VR ve karton gözlükte çoğu oyun geometrisi burada kalır; uzun süreli izleme için en toleranslı bölgedir. Uç pozitif değerler (çok uzak nesneler + büyük eyeSep) yine yorabilir — ölçülü tutun.
  • Negatif parallaks: Kayma yönü “öne” işaret eder; nesne size doğru fırlıyormuş, ekrandan taşıyormuş gibi algılanır. Kısa süreli vurgu (silah, yaratık, UI patlaması) için kullanılabilir; sürekli veya aşırı negatif parallaks göz kaslarını zorlar, baş ağrısı riskini artırır. Üretimde negatif dozu bilinçli sınırlayın; ana etkileşim alanını mümkünse sıfır veya hafif pozitif bölgede tutun.
  • Sıfır parallaks: Sol ve sağ görüntüde nesne kenarları aynı hizada — derinlik ipucu yok, nesne ekran düzlemine yapışık okunur. Metin, retikül, menü ve “ekran yüzeyinde” kalması gereken UI için hedeflenir; sahne geometrisinin tamamını sıfırda bırakırsanız stereo etkisi zayıflar. Konfor açısından dinlenme düzlemi: izleyici gözlerini doğal odak mesafesinde tutar.

Yakınsama (convergence) doğrudan StereoCamera üzerinde ayrı bir "cevher" olarak ayarlanmaz; iki gözün projeksiyon ve ofset hesapları birlikte, izleyicide hangi derinlik düzleminin rahat okunduğunu dolaylı olarak belirler. Konfor için sahne tasarımı, nesne yerleşimi ve üst katman (XR / efekt) ayarları birlikte düşünülür.

Holodepth notu: VR dünyasına giriş

StereoCamera, Holodepth haritasında ileri düzey veya WebXR odaklı bir başlıkta derinleştirilebilir. Başlık taktığında Three.js ve ekosistem çoğu zaman stereoskopik çifti sizin için bağlamaya yakın bir akış sunar; buna karşılık kendi anaglif pipeline’ınızı veya basit bir karton gözlük modunu yazmak istiyorsanız, bu kameranın ürettiği sol/sağ projeksiyon matematiğini bilmek sizi bir adım öne taşır.