holodepth

Three.js · Kamera türleri

StereoCamera (stereoskopik kamera)

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

StereoCamera, insan gözünün derinlik algısını (parallaks) taklit etmek için sahneyi iki farklı bakış noktasından üretmeye yarayan özel bir yapıdır. Yaklaşık 6,4 cm ara ile konumlanan iki sanal "göz" görüntüsü, beyinde birleşerek derinlik hissi yaratır. Tek bakışlı perspektif için PerspectiveCamera; çoklu ekran bölmesi için ArrayCamera; genel çerçeve için Kamera Giriş.

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ı

  • WebXR / WebVR: başlıkta stereoskopik çift tampon
  • Karton gözlük (Google Cardboard vb.): telefon ekranında side-by-side çift görüntü
  • Anaglif: kırmızı–mavi (veya renk kanalı) tek görüntüde derinlik ipucu
  • Sinema / profesyonel projeksiyon: polarize veya zaman sıralı çift projeksiyon (motor ve donanıma bağlı)

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): İki sanal göz arasındaki mesafe (eyeSep, varsayılan insan ortalamasına yakın). Artınca stereo tabanı genişler; aşırı değerler "minyatür dev gözü" gibi abartılı veya rahatsız edici sonuç verebilir.
  • CameraL & CameraR: Sol ve sağ perspektif kameralar; çoğu örnekte doğrudan elle konumlamak yerine StereoCamera güncellemesiyle senkron tutulur.

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.

  • Pozitif parallaks: Nesne ekranın "arkasında"ymış gibi algılanır — genelde daha rahattır.
  • Negatif parallaks: Nesne size doğru fırlıyormuş gibi öne çıkar — dikkatli dozlanmalıdır.
  • Sıfır parallaks: Nesne ekran düzlemine hizalıdır.

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.