Three.js · Etkileşim · Raycaster
Kullanım senaryoları: teoriden pratiğe dönüşüm
Raycaster, yalnızca bir matematiksel hesaplama değil; 3B evrenin sinir sistemi gibidir. Bir objeye dokunduğunda, bir düşmana ateş ettiğinde veya bir arayüzle etkileşime girdiğinde arka planda bu sistem çalışır.
Bu sayfa, aynı çekirdek fikri farklı ürün ihtiyaçlarına bağlar: seçim, geri bildirim, nişan, arayüz ve yapay zeka görüşü. Her senaryoda hangi ışın ritmi (single / continuous) ve hangi hassasiyet katmanı (kutu / üçgen / katman) devreye girer — bunu tek tabloda topluyoruz.
Ön okuma: Mesh picking, Continuous vs. single, Layer filtreleme.
Canlı demo: One Ray — Many Worlds
Tek sahne ve aynı kamera bakışı; değişen şey senaryonun ışını nasıl yorumladığıdır. Mod düğmeleri sırasıyla seçim, hover, hitscan, UI katmanı ve AI görüş hattını işaret eder — alt satırlarda ritim, hassasiyet ve sonuç etiketi güncellenir.
One Ray — Many Worlds
Aynı ışın, farklı sistemlerde farklı anlam kazanır.
Metrics
Ray type —
Precision —
Layer —
Result —
Scenario
A) Obje seçme (Object Selection & Gizmo)
3B editörlerde (Blender, Unity vb.) veya özelleştirilmiş 3B web araçlarında en temel ihtiyaç, bir objeyi seçmektir.
Mekanizma — tıklama anında tek ışın
Kullanıcı tıkladığında, kameradan fare imlecine doğru bir single raycast fırlatılır.
Bu akış etkileşim başına bir kez çalışır: imlecin ekrandaki konumu görüntü uzayına taşınır, ışının başlangıcı ve yönü kameranın projeksiyonuna göre kurulur; böylece “ekrandaki bu piksel dünyada hangi doğruya karşılık geliyor?” sorusu tek matematiksel doğru ile yanıtlanır. Kod ve koordinat düzeni için temel adımlar Mesh picking sayfasında özetlenir.
Uygulama — seçim önce, gizmo sonra
Işının çarptığı ilk objenin selected durumu aktif edilir. Bir gizmo (taşıma / döndürme okları) kullanılıyorsa, Raycaster hangi okun sürüldüğünü (X, Y veya Z) ayırt etmek için tekrar devreye girer.
Pratikte sıra şöyledir: önce sahne içindeki nesnelerden birini seçersiniz; ardından okların veya halkaların her biri ayrı geometri olduğundan, sürüklemeye başladığınız anda ikinci bir (veya sürekli güncellenen) ışın, tutamacın hangi eksene ait olduğunu seçer. Böylece dönüş/taşıma işlemi doğru eksene bağlanır.
Önem — kutu hızlıdır, üçgen doğrudur
Hassas seçimlerde yalnızca bounding box yerine per-face (üçgen bazlı) test tercih edilir — detay için Intersection test.
Bounding box, özellikle ince veya dönmüş modellerde görsel olarak objenin “kenarından” geçen bir tıklamayı bile kutunun içinde sayabilir; yüzey bazlı test ise gerçekten üçgene değip değmediğinizi söyler. Editör kalitesinde seçim ve gizmo isabeti için bu ek maliyet çoğu zaman kabul edilir; ön seçimde kutu, kesin seçimde üçgen gibi katmanlı stratejiler de kullanılabilir — geniş çerçeve Bounding volume sayfasında anlatılır.
B) Hover efektleri ve dinamik geri bildirim
Kullanıcı deneyimini (UX) “premium” seviyeye taşıyan unsurlardan biri, etkileşime açık nesnelerin anında tepki vermesidir.
Mekanizma — imleçle birlikte sürekli örnekleme
Fare hareket ettikçe her karede (veya seyrek aralıklarla) continuous raycast çalışır — sıklık–maliyet dengesi için bkz. Continuous vs. single.
Hover, tek bir olay değil bir durumdur: imleç her yeniden çizimde (veya sizin belirlediğiniz örnekleme sıklığında) “şu anda hangi nesnenin üzerindeyim?” sorusunu yanıtlar. Çok sık ışın atmak maliyeti doğrudan artırır; bu yüzden aynı karede gereksiz tekrarları kesmek, bazen de bir önceki isabet ile karşılaştırıp yalnızca hedef değişince görsel durumu güncellemek yaygın bir iyileştirmedir.
Uygulama — görünür geri bildirim katmanları
Fare bir objenin üzerine geldiğinde materyal parlatılabilir (emissive), outline eklenebilir veya yanında bilgi kutusu (tooltip) gösterilebilir.
Bu efektlerin ortak amacı “bu yüzey şu an odaktadır” mesajını vermektir: parlama ve çizgi genelde sahne içi materyal veya son işlem (post) ile yapılır; metin tabanlı kutular ise çoğu zaman DOM katmanında, imleç konumuna göre konumlandırılır. Hedef değiştiğinde önceki nesnenin vurgusunu temizleyip yeniyi işaret etmek, takılı kalan çerçeve veya yanlış tooltip izlenimini önler.
Optimizasyon — önce yakın, sonra daralt
Performans için ışınlar çoğu zaman belirli bir mesafe içindeki adaylarla sınırlanır (distance culling); gerekiyorsa layer ile aday kümesi daraltılır.
Mesafe üst sınırı, yalnızca ekranda belirgin olan nesnelere değil, fiziksel olarak yakın olanlara bakmayı sağlar; katman maskesi ise örneğin arayüz ile sahne karışımında yanlış vurguyu azaltır. Mantıksal ayrım ve örnek sahne için Layer filtreleme sayfasına bakın — seçim (picking) ile aynı filtreyi kullanmak davranışı tutarlı tutar.
C) FPS (nişancı) sistemi
Aksiyon oyunlarında merminin nereye gittiğini hesaplamanın performanslı yolu hitscan yani raycasting’dir.
Mekanizma — tek tetik, tek doğrultu
Oyuncu ateş ettiğinde, silahın namlusundan (veya kamera merkezinden) ileriye doğru çok hızlı bir ışın fırlatılır — tipik olarak single tetik.
Burada amaç, görsel bir “mermi izi” üretmekten önce ilk çarpanı bulmaktır; dünya doğrusu ile sahne içindeki uygun yüzeyler kesiştirilir; en yakın isabet noktası genelde hasar, ses ve parçacık için tek gerçek kaynak olur. Dağılım (spread), sekme (recoil) veya çoklu saçılım oyun tasarımında bu doğrunun yönünü veya sayısını değiştirir; çekirdek yine kısa süreli bir ışın sorgusudur — sıklık ve ritim için Continuous vs. single sayfası yalnızca “nişan sırasında sürekli iz” ihtiyaçlarıyla karşılaştırmalı düşünülmelidir.
Uygulama — çarpışmadan sonuç üretin
- Işın bir düşmana çarparsa hasar (damage) verisi işlenir.
- Işın bir duvara çarparsa temas noktasında decal veya kıvılcım efekti oluşturulur.
İlk temas yüzeyinin normalleri ve mesafesi, efektin yönünü ve ölçeğini belirler; zırh / kritik bölgeler gibi kurallar için genelde çarpılan üçgen veya mesh kimliği yeterli olur — hassas üçgen testinin önemi Intersection test ile bağlantılıdır.
Avantaj — balistik yerine anında sonuç
Gerçek mermi (projectile) fiziğine göre çok daha ucuz ve gecikmesiz (instant hit) hissettirir.
Toplu mermi için her karede yerçekimi, sürtünme ve çarpışma çözmek yerine tek sayıda ışın ile sonucu kilitlemek, özellikle çok oyunculu senaryoda sunucu ve istemci maliyetini düşürür. Oyuncu deneyimi tarafında ise “hedef anında tepki verdi” algısı güçlenir; görsel olarak iz kalan bir projectile bazen yalnızca kozmetik bir katmandır, gerçek çarpışma ise yine ışın ile doğrulanmış olabilir.
D) 3B UI etkileşimi
Geleceğin web deneyimlerinde menüler yalnızca 2B paneller değil; 3B dünyada duran etkileşimli yüzeyler de olabilir.
Mekanizma — üç boyutta yüzey, seçim ışınla
Uzayda duran buton veya kaydırıcı bir mesh olarak modellenir; tıklama yine ışın ile okunur.
2B arayüzde olduğu gibi “hangi öğe?” sorusu burada da geometri üzerinden çözülür: düzlem bir panel, kabartmalı bir düğme veya silindirik bir kol hepsi çizilebilir yüzeydir. İstenen şey, imleç konumundan çıkan ışının hangi üçgende kestiği ve mümkünse UV koordinatıdır — böylece kaydırıcıda parmak izi, düğmede “basılmış” bölge gibi ince kontroller tanımlanabilir. Temel okuma akışı için Mesh picking ile aynı çatı altında düşünün.
Uygulama — isabet noktasından etkinlik
Raycaster, farenin 3B butonun hangi noktasına bastığını belirler ve bağlı etkinliği tetikler.
Tipik akış: ilk geçerli kesişim hangi mesh / bileşen ise onun kimliği bir olaya çevrilir (onClick, rozet seçimi, ayar değişimi). Sürekli sürüklemelerde (drag) hem basılı tutma hem iz süren ikinci bir ışın zinciri kullanılabilir; bu durumda da özet mantık Continuous vs. single çizgisindedir — yalnızca imleç yer değiştirdikçe güncellenir.
Kritik detay — önce katman, sonra sahne
Layer filtreleme burada hayat kurtarır: ışın yalnızca UI katmanını görürse arka plandaki oyun dünyası ile seçim karışmaz.
Aynı karede hem dünya hem arayüz görünürken, tek bir “genel” ışın çoğu zaman arkasındaki zemini veya karakteri de vurur; arayüz öğelerini ayrı bir maskeye bağlamak, yalnızca bu öğeler için raycaster aday kümesini küçültür. Böylece bir panelin arkasındaki duvara yanlışlıkla “tıklanmış” sayılması engellenir; HUD ve sahne tarafında farklı davranış üretmek içindir — örnek düzen için Layer sayfasındaki çoklu görüş düzeni yeterli çerçeveyi verir.
E) AI görüş hattı (Line of Sight)
Yapay zeka karakterinin bir hedefi gerçekten görüp görmediğini anlamak için kullanılır.
Mekanizma — düşmandan hedefe görüş doğrusu
Düşman AI’dan oyuncunun konumuna doğru bir ışın fırlatılır; sıklık genelde continuous veya düşük frekanslı örneklemedir (tasarım tercihi).
Çıkış noktası çoğu zaman düşmanın bakış veya omuz pivotuna, bitiş noktası ise hedefin gövde merkezine bağlanır — böylece zeminden süzülen veya çömelen figürler için de makul bir hat kurulur. Her karede görüş testi pahalı olabileceğinden ışın sıklığı sıkça AI karar döngüsüyle hizalanır; hedef az hareket ediyorsa saniyede birkaç örnek bile yeterli olabilir. Ritim seçimi için Continuous vs. single sayfası genel çerçeveyi verir.
Uygulama — engel varsa gizli, yoksa tehdit
Işın oyuncuya ulaşmadan önce bir duvar / engel katmanına çarpıyorsa AI hedefi göremez; engel yoksa takip veya saldırı moduna geçilebilir. Basit prototiplerde engel için bounding hacim bile yeterli olabilir; hassasiyet ihtiyacına göre dar teste inilir.
Engelleri yalnızca statik geometri katmanında tutmak, adayı küçültür ve arka planda gereksiz aktörleri süzmeye yarar — özet için Layer filtreleme. Dar boğazlarda veya ince aralıklı yapılarda “kutu ile görünür sandım ama üçgende aslında kapalıymış” tutarsızlığı yaşanırsa Bounding volume ile başlayıp gerektiğinde Intersection test ile yüzey doğruluğuna inmek tipik bir yükseltme yoludur; tablodaki düşük hassasiyet satırı prototipi, yüksek hassasiyet ise üretim sahnesini temsil edebilir.
Özet: hangi senaryoda hangi teknik?
Aşağıdaki tablo “hangi ışın tipi + hangi hassasiyet + hangi filtre” sorusuna hızlı bir harita sunar; proje içinde bunu tek dokümana bağlamak bakım maliyetini düşürür.
| Senaryo | Işın tipi | Hassasiyet | Filtreleme |
|---|---|---|---|
| Menü / seçim | Single | Düşük (box) | UI layer |
| Hover vurgusu | Continuous | Orta | Interactive layer |
| FPS ateşi | Single | Yüksek (üçgen) | Damageable layer |
| AI görüşü | Continuous | Düşük (sphere) | World / static |
Holodepth teknik notu
Raycaster yalnızca “tıklamak” için değildir; o, 3B dünyanın gözüdür. Holodepth projelerinde bu senaryoları birleştirerek kullanıcının dünyayla gerçekten etkileşimde olduğunu hissettirmek mümkündür: doğru ritim (single / continuous), doğru hassasiyet ve doğru katman sözleşmesi.