Web Sitesinde Döndürülebilir 3D Ürün Modeli Nasıl Kullanılır? (GLB Rehberi)

Neden web sitesinde 3D model?

Ziyaretçi ürünü her açıdan inceleyebildiğinde ürüne daha uzun süre bakar ve fotoğrafta görünmeyen ayrıntıları kendisi keşfeder. Özellikle renk, malzeme ve ölçü önemli olan ürünlerde (mobilya, spor ekipmanı, aksesuar) etkileşimli 3D model güven verir.

Bu etkinin arkasındaki mantık basit: fotoğraf sizin seçtiğiniz açıları gösterir, 3D model ise ziyaretçinin merak ettiği açıyı. Mağazada bir ürünü eline alıp çevirmek isteyen insan, çevrimiçi ortamda bunu ancak etkileşimli bir modelle yapabilir. Arka yüz nasıl, bağlantı noktası nerede, kenar kalınlığı ne kadar gibi soruların cevabı tek bir sürüklemeyle görünür. Ama bunun karşılığında bir bedel var: dosya boyutu ve performans. Bu rehber, o bedeli makul tutmanın yollarını anlatıyor.

Her ürün için 3D şart değildir. Düz, tek açıdan anlaşılan bir ürün için iyi çekilmiş bir görsel çoğu zaman yeterlidir. 3D'nin ne zaman anlamlı, ne zaman gereksiz olduğunu web'de 3D kullanmanın avantajları ve web sitesinde 3D ne zaman gereksiz yazılarında ayrı ayrı ele aldım. Burada kararı verdiğinizi varsayıp uygulamaya odaklanıyorum.

Hangi format? GLB (glTF)

Web için fiilî standart glTF'tir; tek dosyalı sürümü GLB'dir. Geometriyi, malzemeleri ve dokuları tek dosyada taşır ve tarayıcıda Three.js gibi kütüphanelerle doğrudan açılır. Yüksek poligonlu bir üretim modeli doğrudan webe uygun değildir; sıkıştırılıp hafifletilmesi gerekir.

glTF, Khronos Group tarafından yönetilen açık bir standarttır ve "3D'nin JPEG'i" benzetmesiyle anılır: tarayıcıda hızlı yüklenmek ve doğrudan görüntülenmek üzere tasarlanmıştır. Standart, malzemeleri PBR (fiziksel tabanlı) metallic-roughness modeliyle tanımlar; yani yüzeyin ne kadar metalik ve ne kadar pürüzlü olduğunu belirleyen değerler dosyanın içinde taşınır. Bu malzeme mantığını merak ediyorsanız PBR malzeme nedir yazısı faydalı olur.

GLB, bu yapının tek dosyaya paketlenmiş halidir. Ayrı bir `.gltf` dosyası ile ayrı doku dosyaları yerine, her şeyi tek bir ikili dosyada toplar. Web için bunun pratik faydası, tek bir istek ile tüm modelin yüklenmesi ve doku dosyalarının yolunu karıştırma riskinin ortadan kalkmasıdır. Diğer formatlarla (FBX, OBJ, USDZ) kıyaslama için 3D dosya formatları farkları yazısına, formatın ne olduğunu daha temelden okumak için GLB dosyası nedir yazısına bakabilirsiniz.

Sayfaya nasıl eklenir?

En kısa yol, Google'ın geliştirdiği açık kaynaklı `model-viewer` web bileşenidir. Bir HTML etiketiyle GLB dosyasını gösterir; döndürme, yakınlaştırma, ışık ve gölge gibi şeyleri hazır sunar. Temel kullanım şuna benzer:

<model-viewer
  src="urun.glb"
  poster="urun-poster.webp"
  alt="Ürünün üç boyutlu modeli"
  camera-controls
  loading="lazy"
  reveal="interaction"
  style="width:100%;height:480px">
</model-viewer>

Buradaki öznitelikler küçük ama anlamlıdır. `camera-controls` fare ve dokunmatikle döndürme ve yakınlaştırmayı açar. `poster`, model yüklenene kadar gösterilecek görseldir. `loading="lazy"` modelin yalnızca görünür alana yaklaşınca yüklenmesini sağlar. `reveal="interaction"` ise modelin kullanıcı dokunana kadar yüklenmesini ya da gösterilmesini erteler. `alt` metni erişilebilirlik için vazgeçilmezdir. Adım adım kod örnekleri, çalıştırma ve ince ayarlar için model-viewer ile web sitesine 3D model ekleme yazısına bakabilirsiniz.

Daha özel bir deneyim istiyorsanız (örneğin sahnede birden fazla nesne, özel kontrol arayüzü ya da kendi renk seçici) Three.js gibi bir kütüphaneyle doğrudan çalışmak gerekir. Bu daha fazla kod ve bakım demektir; sadece bir ürünü döndürmek isteyen çoğu site için `model-viewer` yeterlidir.

Dosya boyutu ve performans

• Geometri sıkıştırma (Meshopt ya da Draco) dosya boyutunu birkaç kat düşürür.
• Dokular 2048 piksel ve WebP gibi modern formatlarla küçültülür.
• Model yalnızca kullanıcı açtığında yüklenir; ana sayfa hafif kalır.
• Telefonlarda yansıma ve gölge gibi pahalı efektler sadeleştirilir.

Bu dört maddeyi tek tek açalım, çünkü her biri farklı bir darboğazı çözer.

Geometri sıkıştırma. glTF için iki yaygın sıkıştırma uzantısı var: Draco (`KHR_draco_mesh_compression`) ve Meshopt (`EXT_meshopt_compression`). İkisi de köşe noktalarını daha az yer kaplayacak şekilde paketler. Tarayıcıda açılırken küçük bir çözme adımı gerekir; `model-viewer` ve Three.js bu çözücüleri destekler, ama dekoder dosyalarının erişilebilir olması gerekir. Sıkıştırma kayıp içerebilir (nicemleme nedeniyle), bu yüzden sonucu gözle kontrol etmek şarttır; özellikle ince, düz yüzeylerde ya da yumuşak kıvrımlarda tuhaf kırışmalar fark edilebilir.

Dokular. Çoğu GLB'de dosya boyutunun büyük kısmını geometri değil, dokular oluşturur. Bir ürün modelinde dört beş malzemenin her birine 4096 piksellik doku vermek, dosyayı gereksiz şişirir. Ürünün ekranda kapladığı alana ve kullanıcının ne kadar yaklaşabileceğine bakıp 1024 ya da 2048 piksel yeterli mi diye karar vermek gerekir. WebP ve KTX2 gibi sıkıştırmalı formatlar da yardımcıdır. Kullanılmayan doku ve materyal artıklarını temizlemek bu açıdan ihmal edilmesin; bununla ilgili Blender'da texture temizliği yazısı doğrudan dosya boyutuna etki eden küçük bir alışkanlığı anlatıyor.

Tembel yükleme. Ürün sayfasının asıl işi ürünü tanıtmaktır; 3D model destekleyici bir parçadır. Eğer model sayfa açılırken yüklenip ana içeriğin önüne geçerse, ziyaretçi sayfayı yavaş bulur. `poster` görseli sayesinde sayfa hemen dolu görünür, model arka planda ya da kullanıcı etkileşiminde yüklenir.

Mobil sadeleştirme. Telefonlarda ekran küçük ama yoğunluk yüksektir ve GPU belleği sınırlıdır. Gerçek zamanlı yansıma, yüksek çözünürlüklü gölge ve çok sayıda ışık, telefonda masaüstüne göre çok daha hızlı yorar. Gölge yoğunluğunu ya da kalitesini sadeleştirmek ve mümkünse ortam ışığını hafif bir HDR ile sınırlamak mantıklıdır. Poligon bütçesi konusunda sayısal bir çerçeve arıyorsanız web'de 3D model için kaç polygon kullanılmalı yazısına bakın.

Tüm bu adımları modelin üretim sonrasında toplu bir süreç olarak ele almak da mümkün: 3D modeli web için optimize etme yazısı bu akışı baştan sona anlatıyor. Blender'dan dışa aktarırken seçilecek ayarlar ise Blender'dan GLB export notlarında.

Renk ve malzeme seçenekleri

Aynı model üzerinde döşeme, kaplama ya da boya rengini seçtirmek mümkündür: model hazırlanırken değiştirilebilir malzemeler işaretlenir, sitede bir renk seçici bu malzemelerin rengini anında günceller. Böylece her renk için ayrı fotoğraf ya da ayrı model gerekmez.

Burada tasarım kararı modelleme aşamasında verilir. Değişecek yüzeylerin ayrı malzemelere sahip olması gerekir. Koltuğun döşemesi ile ayağı aynı malzemeyi paylaşıyorsa, yalnızca döşemenin rengini değiştirmek mümkün olmaz. Bu yüzden hangi parçaların seçilebilir olacağını modellemeye başlamadan belirlemek, sonradan malzeme ayrıştırmak için zaman harcamaktan çok daha verimli. Malzemelere anlamlı adlar vermek de sitedeki koddan o malzemeye ulaşmayı kolaylaştırır.

Teknik olarak iki yöntem öne çıkar. Birincisi, malzemenin temel renk değerini kodla değiştirmek: hızlıdır ve ek dosya gerektirmez, ama dokulu yüzeylerde (örneğin desenli kumaş) sınırlıdır. İkincisi, glTF'in malzeme varyantları uzantısıdır (`KHR_materials_variants`); birden fazla malzeme setini dosyada tutup aralarında geçiş yapmayı sağlar. Hangi yöntemin seçileceği projedeki varyant sayısına ve dokunun türüne bağlıdır. Renk seçeneklerinin ticari tarafı için renk seçenekli ürünler için 3D render avantajı yazısına bakabilirsiniz.

Işık, gölge ve görünüm ayarı

Tarayıcıdaki model, Blender'daki render ile birebir aynı görünmez; çünkü gerçek zamanlı çizim, render'daki gibi ışığın yüzeyler arasında yüzlerce kez sekmesini hesaplamaz. Bunun yerine ortam görseli (bir HDR/ortam haritası) ve birkaç basit ışık kullanılır. Bu nedenle web'de "render ile aynı görünsün" beklentisi yerine "ürün doğru ve çekici görünsün" hedefi koymak daha gerçekçidir. `model-viewer` içinde `environment-image="neutral"` gibi hazır bir ortam seçeneği, `shadow-intensity` ile zemin gölgesi ve `exposure` ile genel parlaklık ayarlanabilir; ürünün kendi renk ve malzeme hissini bozmayan sade bir ortam çoğu zaman en iyisidir.

Metal ve parlak yüzeyler ortam görseline en çok bağımlı olanlardır. Çevresinde yansıtacak bir şey bulamayan krom bir parça, düz ve cansız görünür. Mat yüzeyler ise ortam seçimine daha toleranslıdır. Bu yüzden ürünün malzeme karakterine göre ortam görselini birkaç seçenek arasında denemek, kararı gözle vermek gerekir. Işıklandırmanın mantığını daha geniş ele alan HDRI ile ürün ışıklandırma yazısı, render tarafında aynı kavramları anlatıyor ve web'de de karar verirken referans olur.

Bir de "baked" ayrıntı meselesi var: render'da gerçek zamanlı hesaplanan bazı gölgelenme ve kontak gölgeleri, web modelinde dokuya önceden işlenebilir. Böylece çalışma anında hesaplanması gereken yük azalır. Ancak bu, modelin hazırlık aşamasında planlanması gereken bir karardır; sonradan eklemek zordur.

Hazırlık sırası: pratik bir yol haritası

Bir web 3D projesini baştan sona şu sırayla yürütmek çoğu zaman en az yeniden iş çıkarır:

• Hedefi yazın: model hangi sayfada, hangi boyutta, hangi cihazlarda gösterilecek?
• Bütçeyi belirleyin: dosya boyutu, doku boyutu ve poligon için kabaca üst sınırlar koyun.
• Modeli bu bütçeye göre kurun: görünmeyen yüzeyleri ve aşırı ayrıntıyı baştan modellemeyin.
• Değiştirilebilir malzemeleri ayırın: renk seçici olacaksa bunları baştan işaretleyin.
• Dışa aktarın ve sıkıştırın: GLB'yi üretin, sıkıştırmayı uygulayın, sonucu gözle kontrol edin.
• Sayfaya yerleştirin: poster, tembel yükleme ve kamera sınırlarını ayarlayın.
• Gerçek cihazda deneyin: telefon, orta seviye bir dizüstü ve yavaş bağlantıda test edin.

Bu sıralamanın özü, optimizasyonu işin sonunda yapılan bir düzeltme olarak değil, baştan bir tasarım kısıtı olarak görmektir. Bitmiş ağır bir modeli geriye doğru küçültmek, hem zaman hem kalite kaybettirir.

Kullanıcı deneyimi: kontrol ve erişilebilirlik

Model hızlı yüklense bile deneyim kötü olabilir. Telefonda sayfayı kaydırmaya çalışan biri modele takılıp kalıyorsa, 3D bir avantaj olmaktan çıkıp engele dönüşür. Dokunmatik ekranlarda dikey kaydırmayı serbest bırakmak, kamera hareket sınırlarını ürünün etrafında tutmak, modelin içine girmeyi engellemek ve ilk yüklemede net bir poster göstermek, küçük ama kritik ayrıntılardır. Bunları web'deki 3D ürün görüntüleyicisinde kontroller nasıl tasarlanır yazısında daha derin işledim.

Erişilebilirlik de ihmal edilmemeli. Klavye ile odaklanabilme, `alt` metni, hareketi azaltma tercihine saygı ve modele ek olarak statik görsellerin sunulması, 3D'yi kullanamayan ya da kullanmak istemeyen ziyaretçileri dışarıda bırakmamanın yollarıdır. 3D bir ek katmandır; sayfanın bilgi akışı model olmadan da çalışmalıdır.

Sık yapılan hatalar

• Üretim modelini olduğu gibi yüklemek. Milyonlarca poligonlu ya da onlarca malzemeli bir dosya mobilde sorun çıkarır.
• Dokuları gereğinden büyük bırakmak. Dosya boyutunun çoğu genellikle dokulardan gelir.
• Poster görseli koymamak. Yükleme sırasında boş bir kutu görmek, ziyaretçide "çalışmıyor" hissi bırakır.
• Sadece masaüstünde test etmek. Gerçek bir telefonda, mobil ağ koşullarında denemek şarttır.
• Model dışındaki sayfa performansını unutmak. Ağır bir modelin yanında optimize edilmemiş görseller ve betikler birleşince sorun büyür.

Bu hataların çoğu, projenin sonunda değil başında alınan kararlarla önlenir. Ayrıntılı bir hata listesi için 3D ürünü web'e taşırken en çok yapılan hatalar yazısına göz atın. Tasarım ile performans arasındaki dengeyi ise 3D web sitesi yaparken tasarım mı performans mı yazısında tartıştım.

Yayına çıkmadan önce kontrol listesi

• Model, sıkıştırma sonrası da gözle kontrol edildi mi (kırışma, delik, bozulmuş gölgelenme var mı)?
• Dosya boyutu hedefinize uygun mu, gerçek ağ koşullarında deneyildi mi?
• Poster görseli var mı ve model görünene kadar sayfa düzeni kayıyor mu?
• Telefonda kaydırma ile model döndürme birbirine karışıyor mu?
• Renk seçici her malzeme kombinasyonunda doğru görünüyor mu?
• Model olmadan da sayfadaki ürün bilgisi eksiksiz mi?

Canlı örnek

Aura Reformer çalışmasında altı pilates ekipmanı döndürülüp yakınlaştırılabiliyor ve döşeme renkleri Aspendos, Harşena ve Toskanto Keçeli koleksiyonlarından seçilebiliyor. Gemi çalışması ise aynı teknikle sinematik bir ortamda sunuluyor. Renk seçicinin arka planındaki mantık için pilates ekipmanı 3D modeli ve renk seçici nasıl çalışır yazısı var.

Kendi ürününüz için web 3D modeli hazırlatmayı düşünüyorsanız web için 3D ürün modeli hizmeti sayfasında kapsamı görebilir, ürününüze özel bir değerlendirme için teklif sayfasına uğrayabilirsiniz.

Sık sorulan sorular

Sonuç

Web'de döndürülebilir bir 3D ürün modeli, doğru format (GLB), sıkıştırma ve sade malzeme yapısıyla hem hızlı hem etkileyici olabilir. Başarı, modelin ne kadar ayrıntılı olduğundan çok, sayfanın yükü ve kullanıcı deneyimiyle dengelenmesinden gelir. Artırılmış gerçeklik tarafını merak ediyorsanız AR ile ürün gösterme yazısı bir sonraki adımdır.

İlgili çalışmaAura ReformerÜrün Modelleme · Müşteri Çalışması · Blender · EEVEE · 6 ürün

İlgili çalışmaGemiSinematik kamera yolu · Blender · EEVEE · 1.500 kare · 24 fps