holodepth

Three.js · Etkileşim · Raycaster

Mesh picking: ekrandan derinliğe uzanan el

Mesh picking, kullanıcının 2D ekranda (monitör/telefon) yaptığı dokunuş veya fare hareketinin, 3D sahnede hangi nesneye (ve çoğu zaman neresine) karşılık geldiğini bulma sürecidir. Bu, «ekran koordinat sisteminden dünya koordinat sistemine» yapılan bir tür ters mühendislik yolculuğudur: 2D bir noktayı alır, sahne geometrisi üzerinde anlamlı bir “temas”a dönüştürürsünüz.

Bu sayfa, picking’i üç eksende oturtur: ekrandan ışın üretimi (1), etkileşim türleri (tıklama vs hover, 2) ve hassasiyet/performans seçimi (bounding hacim vs üçgen, 3). Son bölümde picking’in yalnızca “seçmek” değil, dünyayı manipüle etmek olduğunu UX örnekleriyle bağlarız (4).

Işının temel denklemi ve t parametresinin “closest hit” mantığı için Işın temeli · t’nin anlamı ve kesişim sözleşmesi için Intersection test sayfalarını referans alın; burada amaç, picking’i kullanıcı etkileşimi bakışıyla paketlemektir.

Mouse’tan ışına: ekran → dünya dönüşümü

Picking’in en kritik adımı, farenin/dokunuşun durduğu 2D piksel noktasını (x, y) 3D uzayda sonsuza uzanan bir ışına dönüştürmektir. Bu dönüşüm, kavramsal olarak üç aşamada gerçekleşir:

  1. NDC (normalize edilmiş cihaz koordinatları): Piksel koordinatları, −1 ile +1 aralığına yeniden ölçeklenir. Amaç: ekran çözünürlüğünden bağımsız, kameranın projeksiyonuyla konuşan bir uzaya geçmektir.
  2. Unprojection (ters izdüşüm): Kamera projeksiyonu ve görünüm (view) dönüşümleri terslenerek, bu 2D noktanın dünyadaki yön bilgisi geri kazanılır. Burada elde ettiğiniz şey çoğu zaman bir “nokta” değil, bir yön veya yakın/uzak düzlem arasında iki örnek noktadır.
  3. Ray generation: Işının kökeni kameranın konumu (veya ortografikte bir düzlem üzerindeki örnek) olur; yönü, unproject ile bulunan doğrultudur. Sonra sahne geometrisi üzerinde intersection testine girersiniz.

Bu pipeline’ın özü şudur: kullanıcı “bir piksele” dokunur; siz o pikseli kamera modeli üzerinden uzayda bir yarı doğruya çevirir ve geometriye “soru sorarsınız”.

Etkileşim türleri: click vs hover

Mesh picking yalnızca tıklama anı değildir; isterseniz her karede (veya her mousemove) arka planda çalışan bir “sensör” hâline gelir. Bu iki uç kullanımın davranışı ve performans profili farklıdır. Fare yatay konumunun ışını ve closest hit’i nasıl oynattığını; tıklamada seçimin nasıl kilitlendiğini Mesh Picking Playground üzerinde deneyebilirsiniz (ekran → dünya → ışın → seçim hattının soyut modeli).

Mesh Picking Playground — üst şerit imleci yatay NDC benzeri konuma bağlar; aşağıdaki sahnede ışın canlı güncellenir, en küçük pozitif t vurgusu hareket eder. Hover modunda vurgu sürekli güncellenir; Click modunda tıklamada seçim kalıcıdır. Mor dikey çizgi, üst şeritteki imleçle aynı yatay konumu dünya uzayına taşır.

NDC x · sahnede dikey çizgi: 0

Closest (anında):

Seçili (tık):

Sol sütunun tamamı (şerit + sahne) etkileşim alanıdır; sağdaki panel sadece okuma. Hover’da hafif tolerans + yumuşatma, tıklamada kesin geometri kullanılır. Üstteki nokta ile sahnedeki mor dikey çizgi aynı x’i paylaşır; camgöbeği halka ışının kökenidir.

1) Click selection (tıklama ile seçim)

Click picking, etkileşimin «darbe anı»dır: kullanıcı tıkladığında genellikle tek bir ışın üretir, sahne üzerinde yürütür ve closest hit (en küçük pozitif t) sonucuyla geri dönersiniz. Bu akış, «seç ve değiştir» modelinin en net hâlidir; çünkü kullanıcı bir niyet belirtir ve sistem tek, kararlı bir karar verir.

  • İşlem: Hit record içinden hedefin kimliği (nesne referansı/ID) alınır. Ardından seçim durumunu görünür kılmak için materyal rengi, emissive, kenarlık (outline) veya UI rozeti gibi bir geri bildirim eklenir. Birden fazla hedef tipi varsa, burada katman/etiket filtreleriyle «seçilebilir» sözleşmesi de uygulanır.
  • Kararlılık: İyi bir click picking, “titreşmeyen” seçim üretir. Bunun anahtarı, closest hit seçiminde kullanılan t kuralının tutarlı olması ve çok küçük t değerlerinin (öz-çarpışma) epsilon ile elenmesidir.
  • Performans: Sadece etkileşim anında çalıştığı için yükü düşüktür; büyük sahnelerde bile broad-phase (bounding hacimler) doğru kurulduğunda çoğu zaman sorunsuz akar. Yani burada “optimizasyon” genelde bir acil durum değil, iyi bir temel hijyenidir.

2) Hover highlight (üzerine gelince vurgulama)

Hover picking, sürekli akan bir sensördür: fare sahne üzerinde hareket ederken, “şu an hangi nesnenin üzerindeyim?” sorusunu düzenli aralıklarla (çoğu zaman her mousemove veya her kare) yanıtlayabilirsiniz. Bu, tooltip, anlık parlatma, imleç değiştirme veya “yakın etkileşim ipucu” gibi UX davranışlarını mümkün kılar — ama click’e göre daha farklı bir sözleşme ister.

  • İşlem: Her güncellemede hedef değişmişse, eski vurguyu kapatır ve yeni hedefe açarsınız. Burada küçük ama kritik bir detay vardır: hedef aynı kaldıysa tekrar tekrar “set etme” yerine değişim odaklı güncelleme yapmak (diff) maliyeti düşürür.
  • Zorluk: 60 FPS akışında saniyede onlarca test anlamına gelebilir. Bu yüzden sahne ölçeğinde uzamsal hızlandırma (özellikle BVH), layer filtreleme ve closest hit bulunduktan sonra traversal’ı kısaltan erken çıkış kritik hâle gelir.
  • UX kalitesi: Hover’da amaç “en doğru” seçimden çok “en stabil” his olabilir. Gerekirse çok küçük hedeflerde ışını seyrekleştirmek, giriş/çıkış için histerezis (ör. 1–2 kare tolerans) eklemek veya katmanla yalnızca etkileşimli objeleri test etmek, algılanan kaliteyi artırır.

Gelişmiş teknikler: picking hassasiyeti

Picking yaparken iki yaklaşım arasında bir trade-off vardır: hız ve hassasiyet. Hangi yolu seçtiğiniz, sahnenin poligon bütçesine ve kullanıcı beklentisine bağlıdır.

Bounding box picking (hızlı ama kaba)

Bu yaklaşımda ışın, objenin karmaşık yüzeyiyle değil; objeyi saran basit bir hacimle test edilir. En yaygın örnek AABB’dir: eksenlere hizalı bir kutu, objeyi bütünüyle içine alır. Kutu ile kesişim varsa «bu obje aday olabilir» dersiniz; yoksa objeyi tamamen elersiniz. Bu yüzden pratikte broad-phase katmanının doğal silahıdır.

  • Artı (hız): Kutu testi ucuzdur; hover gibi sürekli akışlarda bile geniş sahnede «ön eleme» yapmayı mümkün kılar.
  • Artı (kararlılık): Büyük, okunabilir objelerde kullanıcı niyeti çoğu zaman “kutuya yakın olmayı” zaten yeterli görür; bu yüzden kaba test, algılanan doğruluğu düşürmeden UX’i stabil tutabilir.
  • Eksi (false positive): Kutu, objenin “boş” bölgelerini de kaplar. Bu yüzden sandalyenin bacak arası gibi geometrik boşluklara tıklasanız bile seçilmiş sayılabilir. Bu hata bir bug değil; modelin bilerek ödediği bedeldir.
  • Eksi (dönüş/ölçek): AABB eksenlere hizalı olduğu için dönen objelerde kutu “şişebilir”. Bu durumda OBB (oriented bounding box) veya küre gibi alternatif hacimler tercih edilebilir.

Per-face / triangle picking (yavaş ama hassas)

Bu yaklaşımda ışın, nesnenin gerçek yüzeyiyle buluşturulur: geometriyi oluşturan üçgenler (yüzler) ile tek tek kesişim testine girilir. Bu, yalnızca “hangi obje?” değil, tam olarak neresi? sorusuna yanıt üretir; dolayısıyla hit point, normal, UV gibi alanlar daha güvenilir biçimde çıkar.

  • Artı (doğruluk): Milimetrik hassasiyet sağlar; boyama/işaretleme, sculpt fırçası, decal yerleştirme veya “tam yüzeyi seç” gibi senaryolarda gereklidir.
  • Artı (anlamlı veri): Sadece seçim değil; seçilen noktaya bağlı davranışlar (ör. yüzey yönüne göre ok yerleştirme) mümkündür.
  • Eksi (maliyet): Üçgen sayısı arttıkça test maliyeti hızla büyür. Bu yüzden pratikte bu yaklaşım tek başına kullanılmaz; katman filtreleme + bounding hacim + BVH gibi hızlandırmalarla birlikte çalışır.

Üretimde en yaygın strateji hibrittir: önce bounding hacimle adayları küçültür (broad-phase), sonra yalnızca gerekli adaylarda üçgen testine iner (narrow-phase). Böylece hem hover akışında hız korunur, hem de gerektiğinde “tam değdiğim yer” kalitesi elde edilir.

Kullanım senaryoları: “seçmek”ten manipülasyona

Holodepth üzerinde bu konuyu anlatırken picking’in yalnızca “nesne seçmek” olmadığını, dünyayla etkileşimin temel aracı olduğunu vurgulamak önemlidir:

  • Gizmo kontrolleri: Seçimden sonra görünen taşıma/döndürme okları da aslında pick edilebilir geometridir; kullanıcı sahneyi bu aracı seçerek manipüle eder.
  • Boyama & şekillendirme: 3D sculpt uygulamalarında fırçanın değdiği tam nokta (hit point) picking ile bulunur; basınç/yarıçap gibi veriler bu noktaya uygulanır.
  • VR lazeri: VR kontrolcüsünden çıkan “lazer” ışını, sürekli çalışan bir raycaster picking sistemidir; hover + click davranışları burada da aynı mantıkla çalışır.