Babylon.js · GUI & UI
3D GUI: arayüzü dünya uzayına taşımak
3D GUI, aynı kontrol ağacını ( buttons, text, sliders) bu kez bir örgünün yüzeyine çizen yaklaşımdır: kullanıcı düğmeyi ekranın köşesinde değil, kapının yanındaki panelde veya yüzen bir tablette görür. Tam ekran katmanından farkı, arayüzün kamera ve nesne hareketiyle perspektife girer olmasıdır ( Fullscreen UI ile karşılaştırın).
Holodepth Three.js tarafında benzer etki genelde CSS3D veya düzleme canvas dokusu sarma ile anlatılır; burada motorun doku uzayı → UV → kontrol zincirini ve buna özgü tuzakları sabitliyoruz — aynı «div yerleştir» alışkanlığı doğrudan taşınmaz.
Özet: dört ayrım
| Başlık | 3D GUI sorusu | Yaygın tuzak |
|---|---|---|
| Yüzey | Hangi örgü taşıyıcı? | UV'sız veya dar atlas; tıklama yanlış kontrole gider. |
| Ölçek | Dünyada ne kadar «fiziksel» büyüklük? | Uzaktan yazı okunmaz veya yakında piksel kırpması. |
| Yönelim | Panel kameraya mı döner, dünya ile mi sabitlenir? | Billboard yanlış eksende «yatık» panel. |
| Girdi | Önce örgü vuruşu, sonra doku içi koordinat. | Tam ekran önceliği ile dünya pick sırası karışır. |
Taşıyıcı örgü ve doku modu
Özel yapı: 3D GUI çoğu zaman düz bir dörtgen ( plane) veya panel örgüsü üzerinde çalışır; arayüz aslında bu yüzeye bağlı bir doku güncellemesi olarak yaşar. Tam ekranda olduğu gibi kontroller yine ağaç yapısındadır; fark, çizimin yüzeyin parametre uzayına ( UV) projeksiyonunun sahne geometrisiyle bağlı olmasıdır.
Taşıyıcı örgünün dünya dönüşümü değişince panel de birlikte hareket eder — anahtar kelime: parent–çocuk ilişkisi. Tam ekran HUD için uygun olan «ekrana kilitle» davranışı burada otomatik değildir; tasarım bilinçli seçilir.
UV ve tıklama zinciri: özel yapı
Özel yapı: işaretçi sahneye gönderildiğinde önce bir örgüye «çarpar»; çarpışma noktasındaki UV koordinatları ( u, v ∈ [0, 1]) hangi pikselin altında kaldığınızı söyler; GUI motoru bu ikiliyi kontrol ağacındaki düğümlere eşler. UV ile doku çizimi uyumsuzsa — örneğin ölçek veya döndürme mesh'te var ama doku alanı hesaba katılmıyorsa — görünür düğmeye tıkladığınızı sanırsınız, başka kontrol tetiklenir.
Teşhis ipucu
Sorun «tıklanmıyor» gibi göründüğünde önce örgü pick'inin gerçekten panel yüzeyine düşüp düşmediğini, sonra UV'nin beklenen [0, 1] aralığında kalıp kalmadığını ayırın ( Raycast ile dünya tarafı bir önceki zincirdir).
Ölçek, mesafe ve okunabilirlik
Özel yapı: dokunun iç çözünürlüğü sabit kalırken taşıyıcı örgü dünyada büyütülür veya küçültülür; uzaktaki kullanıcı için aynı piksel sayısı daha geniş bir «fiziksel» alana yayılır — yazı incelir. Yakında ise tersi: çok küçük yüzey + yüksek iç çözünürlük bazen gereksiz dolgu üretir. Bu yüzden hem kamera–panel mesafesi hem panelin dünya ölçeği birlikte düşünülür; sabit FOV ile mobil ve masaüstü farkını erken test edin.
- Yakın etkileşim (VR panel): yüzey ölçeği küçük tutulup doku çözünürlüğü yüksek seçilebilir.
- Uzak işaret: örgüyü büyütmek yerine erişilebilirlik için alternatif (sesli geri bildirim, büyütme modu) düşünün.
Yönelim: billboard ve sabit yüzey
Özel yapı: panelin her zaman kameraya dönük görünmesi için billboard ( billboarding) kullanılır — örgü veya üst düğüm her karede veya seçilen eksende kameraya göre yeniden yönlendirilir. Sabit dünya yüzeyine monte bir kontrol paneli için billboard istenmez; duvar üzeri bir «tablet» dünya ile kilitlenir. İkisini karıştırmak «yazılar yatık» veya «panel sürekli dönüyor» şikâyetlerini üretir.
Üst düğümde ek dünya dönüşümü varken billboard ile birlikte kullanmak ekseni «taşır»; okuma yönü beklenenden farklı çıkar. Çoğu kurulumda ya tam serbest dönüş ya da yalnızca dikey eksen ( Y-up sahnesinde yaw) kilidi seçilir — tam serbest yaw duvar panelinde genelde yanlıştır. Yüzen etiketlerde ( VR okunabilirliği) billboard sık doğrudur; fakat metnin dünya «yukarı» vektörüne göre hizalanması ayrı bir tercihtir ve ölçek / mesafe ile birlikte test edilir.
Hangisi hangi panelde?
Dünya ile sabitlenen yüzey: mimari panel, kapı yanı terminali, zemine gömülü işaret — billboard kapalı. Oyuncunun etrafında dönen ipucu veya isim etiketi: billboard veya kısıtlı billboard. Tam ekran HUD ile karıştırmayın; ekrana kilitli katman Fullscreen UI · ekran katmanı konusunda anlatılır — burada panel hâlâ dünya örgüsünün parçasıdır.
- Sabit yüzey: taşıyıcının dünya rotasyonu metni taşır; billboard eklemeyin.
- Billboard: kamera göreli okuma öncelikliyse kullanın; duvar üzerinde genelde kapatın.
- Teşhis: «sürekli dönüyor» → billboard açık mı; «yatık» → üst düğüm + eksen kilidi + taşıyıcı düzlemi birlikte kontrol edin.
Tam ekran GUI ile aynı sahne: öncelik
Özel yapı: projede hem Fullscreen UI hem 3D panel varsa, işaretçi önce hangi sistemin «altında» olduğunu bilir; tam ekran katmanı genelde önce ele alınır ve olayı tüketebilir. Dünya paneline tıklamanın «gelmemesi» bazen tam ekrandaki şeffaf konteynerden kaynaklanır — katmanları bilinçli kapatın veya etkileşim bölgelerini ayırın. Tam ekran tarafındaki öncelik ve şeffaf tuzaklar ayrıntılı olarak Fullscreen UI · işaretçi ve sahne ile kısa kural kutusunda toplanır; burada odak 3D panelin bu sıraya eklenmesidir.
Tam ekran katmanı geçirgen olsa bile 3D panel için zincir iki aşamalıdır: önce taşıyıcı örgüye dünya ışını isabet eder, sonra UV → kontrol eşlemesi çalışır. «Tam ekran yüzünden» sandığınız hata bazen aslında örgü seçimidir ( Raycast filtreleri, başka örgü önde) — katmanı kapattığınızda hâlâ yanıt yoksa bu sıraya dönün.
Kısa kural
Dünya paneliyle oynama modu: tam ekran menü açıkken 3D etkileşimi kasıtlı olarak kapatmak net bir ürün kararıdır; yarı açık menüde hem tam ekran hem 3D beklemek öncelik tablosunu belgelemenizi gerektirir. Geliştiricide geçici olarak tam ekran ağacını görünür renkle boyamak, şeffaf «yutucu» konteyneri bulmayı hızlandırır.
- Sıra: çoğu kurulumda tam ekran önce; ardından sahne ve 3D doku isabeti.
- Şeffaflık: tüm ekranı kaplayan etkileşimsiz alan 3D'yi sessizce engelleyebilir.
- Ayırma: menü açık / kapalı veya «dünya etkileşimi kilitli» bayrakları tek kaynakta tutun.
Three.js ile üst üste okuma
Three.js tarafında sahne içi düğme genelde ya CSS3D nesnesi ya da düzleme üzerinde elle çizilmiş doku + elle yazılmış ışın–UV kodudur; kontrol mantığı ile çizim kodu projede sık ayrı dosyalara dağılır. Babylon.js'te bu sayfada anlattığımız gibi kontrol ağacı ve doku güncellemesi aynı GUI modülü etrafında toplanır — aynı fikir, farklı «kim yazıyor» sınırıdır.
Çakışmayı önleyen çerçeve
Three.js öğretilerinde düzleme canvas veya CSS3D yaygın kalır; etkileşim çoğu zaman DOM veya elle yazılmış ray → UV eşlemesidir. Babylon.js'te GUI kontrol ağacı ile doku güncellemesi aynı boru hattında düşünülür — kavram ( UV ile kontrol) ortaktır, kütüphane sınırları farklıdır.
Elle ray → UV yazdıysanız hata ayıklama sizin sorumluluğunuzdadır; motor içi ağaçta ise çoğu zaman önce örgü isabeti ve UV ile tıklama isabeti hattını netleştirmek yeter olur. Tam ekran ile dünya panelini aynı anda düşünürken Three tarafındaki DOM üst katmanı ile Babylon'daki Fullscreen UI · Three okuması paralel okunabilir — ikisinde de «hangi yüzey önce yanıt veriyor» sorusu aynıdır.
- Ortak: UV altında 2B kontrol düzeni; fark motorun size sunduğu yardımcılar.
- Three: DOM / elle kod yaygın; test ve erişilebilirlik tarayıcı alışkanlığına yakın.
- Babylon: sahne içi panel bu sayfa + iki projeksiyon ile tamamlanır.
Sıradaki: kontrol sistemi
Sahne içi arayüz netleştikten sonra giriş yönlendirme ve öncelik kuralları için Control system sayfasına geçebilirsiniz. Önceki adım: Sahne yönetimi.