Holodepth • ByteOmi Köprü • Koordinat Sistemleri

Kökenlerin Savaşı

Ekran koordinatları (DOM) ile dünya koordinatları (3D) aynı dili konuşmaz. Sol üst köşeyle başlayan “piksel dünyası”, merkez + derinlikle başlayan “uzay dünyası” ile çarpışır. Bu sayfa, eksen yönü, ölçek, kamera ve hiyerarşi (local/world) farkını tek bir zihinsel modelde birleştirir.

Kaynak metin: byteomi.com • İlgili köprü: Canvas vs WebGL

Canlı demo: “The Space Navigator”

Fareyi viewport üzerinde gezdir: solda ekran koordinatlarını, sağda bu noktanın sahnede hangi yöne denk geldiğini (screen → NDC → ray → world) gör. Parent objeyi hareket ettirdiğinde, child’ın local konumu sabit kalır ama world konumu değişir.

Hero demo

Origin (0,0,0), eksenler (X kırmızı, Y yeşil, Z mavi), parent/child hiyerarşisi ve screen→world dönüşümü tek sahnede.

Mouse: (—, —) • NDC: (—, —) Ray→World: (—, —, —)

Child local: (—, —, —) Child world: (—, —, —)

İpucu: “Objem kayıp” hissinde önce ölçek + near/far + kamera arkası kontrol et. Koordinat hatası sanılan şeylerin çoğu burada çıkar.

Ekran koordinatları vs dünya koordinatları

DOM dünyasında köken genellikle sol üst kabul edilir; X sağa gider, Y aşağı artar ve birim piksel tabanlıdır. 3D dünyada ise “sol üst” hissi yoktur: merkez + derinlik (Z) ile bir uzay kurarsın ve kamera her şeyi yeniden anlamlandırır.

İlk tuzak: Y ekseni yönü. 2D’de “aşağı” çoğu zaman +Y; 3D’de ise +Y genellikle yukarı. İkinci tuzak: ölçek. “1 birim ne?” sorusunu erken belirlemek near/far, hız ve ışık ayarlarını tutarlı kılar.

Right-hand rule & derinlik

Three.js sağ el kuralını kullanır: baş parmak X, işaret parmağı Y, orta parmak Z yön hissini sabitler. Near/far aralığını gereksiz büyütmek derinlik hassasiyetini düşürür ve z-fighting gibi titremelere yol açabilir.

Local vs world (parent/child)

Bir nesnenin konumu mutlak değildir; çoğu zaman parent uzayında anlam kazanır. Child local konumunu korurken parent hareket ederse, child’ın world konumu değişir. Bu, scene graph’ın temelidir.

NDC ve mouse picking

Ekrandaki tıklama (clientX/clientY) dünya konumu değildir. Genelde screen → NDC (−1..+1) dönüşümü yapılır, sonra kameradan ray atılıp world space’de kesişim aranır. Y ekseninin NDC’de ters çevrilmesi ve canvas’ın sayfa içindeki konumunun hesaba katılması kritik detaylardır.