Web sitelerinde 3B (Three.js) ne zaman anlamlıdır?

Tarayıcıda gerçek zamanlı 3B grafik, WebGL sayesinde eklenti gerektirmeden mümkün hale geldi. Three.js gibi kütüphaneler bu yeteneği geliştiriciler için erişilebilir kılıyor. Ancak "yapılabilir olması" "yapılması gerektiği" anlamına gelmez: 3B bir içerik, doğru yerde ürünü anlatan güçlü bir araçtır; yanlış yerde ise sayfayı yavaşlatan bir süs. Bu yazıda karar vermek için kullanılabilecek ölçütleri ele alıyoruz.

3B ne zaman değer katar?

• Ürün inceleme: Kullanıcının bir nesneyi döndürüp yakınlaştırarak her açıdan görmesi gerektiğinde (ürün görüntüleyici, yapılandırıcı).
• Karmaşık yapıyı anlatma: Mekanik bir parçanın, bir sistemin ya da mekânsal bir düzenin düz görselle anlatılmasının zor olduğu durumlarda.
• Veri görselleştirme: Üç boyutlu veri kümelerinin ya da haritaların etkileşimli keşfi.
• Marka deneyimi: Sınırlı alanda, mesajı güçlendiren ve sayfanın amacından dikkat dağıtmayan görsel bir vurgu olarak.

Ne zaman gerekmez?

Sayfanın temel amacı bilgi vermek, iletişim kurmak ya da dönüşüm sağlamaksa, 3B içerik çoğu zaman bu amacı geciktirir. Metin ağırlıklı kurumsal sayfalarda, form sayfalarında ve içeriğe hızlı erişimin öncelikli olduğu yerlerde sade bir tasarım genellikle daha iyi sonuç verir. Karar verirken "3B kaldırılırsa kullanıcı bir şey kaybeder mi?" sorusu faydalıdır.

Performans bütçesi

3B sahneler, sayfanın en ağır bileşenleri arasındadır. Başlangıçtan bir performans bütçesi belirlemek gerekir.

• Model boyutu: Poligon sayısını görsel kaliteyi koruyacak en düşük düzeye indirin. Sıkıştırılmış GLB/glTF biçimini ve Draco ya da Meshopt sıkıştırmasını değerlendirin.
• Doku boyutu: Dokular çoğu zaman modelden daha fazla yer kaplar; gerekli çözünürlüğü aşmayın ve sıkıştırılmış doku biçimlerini (KTX2 gibi) düşünün.
• Tembel yükleme: 3B kodunu ve varlıkları yalnızca görünür alana yaklaşıldığında ya da kullanıcı etkileşime girdiğinde yükleyin; böylece ilk sayfa yüklemesi etkilenmez.
• Çizim çağrıları: Nesne sayısını ve malzeme çeşitliliğini azaltın, tekrarlayan nesneler için örnekleme (instancing) kullanın.
• Gerektiğinde çizin: Sahne durağansa sürekli yeniden çizmek yerine yalnızca değişiklik olduğunda render alın.

Mobil cihazlar ve düşük donanım

Her kullanıcının güçlü bir ekran kartı yoktur. Mobil cihazlarda piksel yoğunluğunu sınırlamak, gölge ve gelişmiş efektleri azaltmak ve pil tüketimini göz önünde bulundurmak gerekir. Cihaz yeteneğine göre kalite düzeyini düşüren uyarlanabilir bir yaklaşım, deneyimin geniş bir cihaz yelpazesinde kullanılabilir kalmasını sağlar.

Erişilebilirlik ve yedek içerik

• 3B alan, içeriğin tek erişim yolu olmamalıdır; aynı bilgi metin olarak da sunulmalıdır.
• Tuval (canvas) için anlamlı bir alternatif metin ya da açıklama sağlayın.
• Klavye ile kullanım gerektiren etkileşimlerde odak yönetimini düşünün.
• İşletim sisteminde "hareketi azalt" tercihi açık olan kullanıcılar için animasyonu kapatın ya da yavaşlatın.
• WebGL desteklenmediğinde ya da yükleme başarısız olduğunda statik bir görsele düşen bir yedek davranış hazırlayın.

SEO ve içerik

Arama motorları 3B tuval içeriğini okuyamaz. Sayfanın anlamı ve anahtar bilgileri, tuvalin dışındaki standart HTML içerikte yer almalıdır. Ayrıca ağır 3B bileşenlerin Core Web Vitals metriklerini (özellikle LCP ve INP) bozmadığı ölçülmelidir.

Animasyonla birlikte kullanım

Three.js sahneleri, GSAP gibi bir animasyon kütüphanesiyle birleştirilerek kaydırmaya bağlı geçişler elde edilebilir. Bu tür etkileşimlerde amaç gösteriş değil, kullanıcının bilgiyi daha kolay anlamasıdır; geçişler kısa, anlamlı ve atlanabilir olmalıdır.

Üretim süreci

1. Kullanım senaryosunu ve başarı ölçütünü belirleyin (kullanıcı ne yapabilmeli?).
2. Düşük maliyetli bir prototiple fikrin gerçekten değer kattığını doğrulayın.
3. Model ve dokuları web için optimize edin.
4. Performans bütçesini gerçek cihazlarda (özellikle orta seviye telefonlarda) test edin.
5. Yedek içeriği ve erişilebilirlik davranışlarını tamamlayın.

Sonuç

3B web teknolojileri, doğru amaçla ve performans bütçesiyle kullanıldığında etkileyici ve işlevsel deneyimler sunar. Önce ihtiyacı, sonra tekniği seçmek; yedek içerik ve erişilebilirliği baştan planlamak başarılı uygulamaların ortak noktasıdır. Projenizde 3B bir deneyimin uygun olup olmadığını değerlendirmek isterseniz, bizimle iletişime geçebilirsiniz.