3D Web Tasarım

Doğru kurgulandığında hayır. Model dosyaları Draco/Meshopt ile sıkıştırılır, doku çözünürlükleri ekran boyutuna göre ayarlanır ve 3D sahne yalnızca görünür alana girdiğinde (lazy init) başlatılır. Mobilde daha hafif bir sahne veya statik görsel/video fallback devreye alınır. Hedef her zaman Core Web Vitals yeşil bölge — 3D bunun istisnası değil. Yavaşlayan siteler genellikle optimize edilmemiş 50 MB'lik CAD çıktısını doğrudan tarayıcıya yükleyen projeler oluyor.

Temelde WebGL üzerinde çalışan Three.js ve React ekosisteminde React Three Fiber + Drei kullanıyorum. Ürün görselleştirmesi gibi hafif senaryolarda Google'ın model-viewer bileşeni yeterli olabiliyor. Daha yüksek görsel kalite gerektiren projelerde Spline veya Blender'da hazırlanan sahneler glTF/GLB olarak siteye aktarılıyor. Teknoloji seçimi projeye göre yapılıyor; her işe aynı kütüphaneyi dayatmıyorum.

WebGL bugün tüm güncel tarayıcılarda çalışan olgun standart; üretim projelerinin varsayılanı bu. WebGPU ise daha modern, daha performanslı bir API — özellikle ağır sahnelerde ve compute işlerinde avantajlı, ancak tarayıcı desteği hâlâ WebGL kadar geniş değil. Pratik yaklaşım: WebGL ile geliştirip, destekleyen tarayıcılarda WebGPU renderer'a otomatik geçiş yapmak. Three.js bu geçişi büyük ölçüde soyutluyor.

Evet. Elinizde model yoksa ürün fotoğrafları, teknik çizim veya CAD dosyası üzerinden Blender ile modelleme yapılıyor. Mevcut bir CAD/STEP dosyanız varsa (özellikle üretim ve mimarlık projelerinde) bu dosya web için optimize edilerek — poligon sayısı düşürülerek, malzemeleri yeniden kurularak — kullanılabilir hale getiriliyor. Fotogrametri (çok sayıda fotoğraftan model üretme) de bazı ürün tipleri için uygun bir yol.

Canvas içeriği arama motorları tarafından okunamaz; bu yüzden 3D sahne asla tek başına içerik taşımaz. Tüm metin, başlık ve yapılandırılmış veri normal HTML olarak sayfada bulunur, 3D sahne bunun görsel katmanıdır. Ayrıca canvas için erişilebilir açıklama ve statik fallback görsel eklenerek hem tarayıcı hem ekran okuyucu tarafında içerik kaybı önlenir. Ürün sayfalarında Product ve 3DModel schema'sı ile modelin varlığı arama motorlarına ayrıca bildirilir.

Evet, WebGL tüm güncel mobil tarayıcılarda destekleniyor. Ancak mobil GPU'lar sınırlı olduğu için sahne otomatik olarak sadeleşiyor: daha düşük çözünürlüklü dokular, azaltılmış piksel oranı, kapatılan post-processing efektleri. iOS'ta bellek limitleri daha katı olduğundan doku bütçesi ayrıca kısılıyor. Çok eski cihazlarda ise WebGL desteği tespit edilip statik görsele düşülüyor.

Evet, en çok talep edilen kullanım bu. Ziyaretçi ürünü sürükleyerek döndürebilir, yakınlaştırabilir; renk ve malzeme varyantları arasında geçiş yapabilir. İsterseniz belirli parçalara tıklanınca açılan bilgi etiketleri (hotspot) ve AR ile "kendi odanda gör" özelliği de eklenebilir. Tek bir ürün için 360° görüntüleyici, çok sayıda varyant içeren ürünler için ise konfigüratör mantığı daha uygun oluyor.

Bazı durumlarda evet. Ürününüzün fotoğraf kalitesi kritikse ve tek bir varyantı varsa, turntable'da çekilmiş 36–72 karelik bir fotoğraf dizisi hem daha gerçekçi görünür hem de çok daha hafiftir. Ancak renk/malzeme değişimi, AR, yakınlaştırıp detay inceleme veya patlatılmış görünüm gerekiyorsa gerçek 3D model şart. Karar, ürünün varyant sayısına ve istenen etkileşim derinliğine göre veriliyor.

Hazır model ile tek sahneli bir proje 10–15 iş günü. Modelleme gerekiyorsa model karmaşıklığına göre 5–10 iş günü ekleniyor. Scroll ile kontrol edilen çok aşamalı sahneler veya konfigüratör gibi etkileşimli projeler 20–30 iş günü sürüyor. Çok ürünlü konfigüratör sistemleri (varyant matrisi geniş olanlar) 6–8 haftaya kadar çıkabiliyor.

3D katman, modelleme ve optimizasyon eforu nedeniyle standart web tasarımın üzerine ek bir kalem olarak geliyor. Maliyeti belirleyen ana faktörler: modelin sıfırdan üretilip üretilmeyeceği, sahne sayısı, etkileşim derinliği (sadece döndürme mi, konfigüratör mü), varyant sayısı ve AR gereksinimi. Kısa bir brief sonrası 24 saat içinde net teklif paylaşıyorum.

Model dosyaları siteden bağımsız duran GLB dosyaları olduğu için yeni bir ürün veya varyant eklemek dosya değişimiyle mümkün. Renk, malzeme ve kamera açısı gibi ayarlar konfigürasyon dosyasından yönetilebilir biçimde kurgulanıyor; böylece küçük değişiklikler için yeniden geliştirme gerekmiyor. Sık model güncellemesi olan projelerde modeller CMS veya CDN üzerinden yönetilecek şekilde yapılandırılıyor.

Proje kapsamında üretilen tüm model, doku ve sahne dosyalarının kullanım hakkı size ait oluyor; kaynak dosyalar (Blender projesi ve GLB çıktıları) teslimat paketinde yer alıyor. Hazır kütüphanelerden lisanslı bir varlık kullanılması gerekirse bu proje başında bildiriliyor ve lisans türü kayda geçiriliyor.

Evet. 3D görüntüleyici bağımsız bir bileşen olarak mevcut sayfaya gömülebiliyor. WordPress'te kısa kod veya blok olarak, Shopify'da ise ürün şablonuna eklenen bir bölüm olarak çalışıyor. Shopify zaten ürün başına 3D model desteği sunuyor; daha özel etkileşimler gerektiğinde özel bileşen devreye giriyor. Mevcut temanın performans durumu proje öncesi ayrıca değerlendiriliyor.

Hayır. iOS'ta Quick Look, Android'de Scene Viewer sayesinde ziyaretçi tarayıcıdan tek dokunuşla ürünü kendi ortamında görebiliyor — uygulama indirmesine gerek yok. Tek gereklilik, aynı modelin iOS için USDZ, Android için GLB formatında hazırlanması. Bu dönüşüm süreç içinde standart olarak yapılıyor.

İyi optimize edilmiş bir ürün sahnesi 1–3 MB aralığında kalır — bu, ortalama bir hero videosundan daha az. Sahne yalnızca kullanıcı o bölüme geldiğinde indirildiği için sayfayı açıp ayrılan ziyaretçi hiçbir 3D verisi indirmemiş olur. Ayrıca ağ hızına göre düşük çözünürlüklü doku setine düşen bir kademe kurulabiliyor.

Sahne ile etkileşim oranı, ortalama etkileşim süresi, döndürme ve yakınlaştırma sayısı, konfigüratörde seçilen varyantlar ve AR açılışları GA4 event'i olarak kaydediliyor. Bu veriler 3D gören ve görmeyen kullanıcı segmentleriyle karşılaştırılıyor; böylece 3D katmanın dönüşüme katkısı tahmin değil ölçüm olarak konuşuluyor. Trafik yeterliyse A/B testi de kurulabiliyor.