Web Sitesi İçin 3D Ürün Modeli Nasıl Hazırlanır?

Güzel görünen model ile web'e hazır model aynı şey değil

Bir ürünü sadece güzel görünen bir 3D modele dönüştürmek ile onu web sitesinde kullanılabilecek hale getirmek aynı şey değil.

Ben bir model hazırlarken artık sadece modelin görüntüsüne bakmıyorum. Modelin nerede kullanılacağını da baştan düşünüyorum. Çünkü web üzerinde açılacak bir model için dosya boyutu, polygon sayısı, texture çözünürlüğü ve materyal sayısı doğrudan deneyimi etkiliyor.

Özellikle döndürülebilir ürün modellerinde modelin güzel görünmesi kadar hızlı yüklenmesi de önemli. Kullanıcı birkaç saniye beklemek zorunda kalıyorsa çok gerçekçi bir model hazırlamış olmanın pek anlamı kalmıyor.

Bu fark ilk bakışta küçük görünür, ama iş akışını baştan sona değiştirir. Render için hazırlanan bir model, sonunda tek bir görüntüye dönüşür ve o görüntü bir kez hesaplanır. Web için hazırlanan model ise her ziyaretçinin cihazında, her seferinde yeniden çizilir. Yani modelin maliyetini siz değil, ziyaretçinin telefonu ve internet bağlantısı öder. Bu yüzden web modelinde "ne kadar ayrıntı koyabilirim?" sorusunun yerini "ne kadar ayrıntıyı karşılayabilirim?" sorusu alır.

Dört kalemde web bütçesi

Bir web modelinin ağırlığını dört kalem belirler. Bunları ayrı ayrı bilmek, optimizasyon kararlarını isabetli kılar.

• Polygon (geometri) sayısı: köşe noktaları ve yüzeyler. Hem dosya boyutunu hem de ekran kartının çizim yükünü etkiler.
• Texture (doku) çözünürlüğü: genelde dosya boyutunun en büyük payı. Her ek doku haritası (renk, pürüzlülük, normal vb.) ek yük demektir.
• Materyal sayısı: her materyal, çizim sırasında ayrı bir iş (draw call) anlamına gelebilir. Çok sayıda materyal, geometri az olsa bile yavaşlatabilir.
• Nesne sayısı: ayrı parçalar halinde duran onlarca nesne de yük bindirir; birleştirilebilecekler birleştirilmelidir.

Dikkat edilirse bunların hiçbiri "modelin ne kadar güzel göründüğü" ile doğrudan aynı şey değil. Aksine, çoğu zaman gözle görünmeyen israfları temizlemek, görünümü hiç bozmadan yükü ciddi ölçüde azaltır. Sayısal bir çerçeve için web'de 3D model için kaç polygon kullanılmalı yazısına bakabilirsiniz; orada polygon bütçesini hedef cihaz ve kullanım yakınlığına göre nasıl düşündüğümü anlatıyorum.

Benim sürecim

Benim için süreç kabaca şu şekilde ilerliyor:

• Önce ürünün formunu doğru kuruyorum.
• Daha sonra gereksiz geometrileri azaltıyorum.
• Materyalleri oluşturuyor, texture'ları mümkün olduğunca verimli kullanıyorum.
• Son aşamada modeli web'e uygun bir formatta dışarı aktarıyorum.

Burada GLB gibi formatlar önemli hale geliyor. Çünkü modelin geometri, materyal ve texture bilgilerini web tarafında daha pratik kullanılabilecek şekilde taşıyabiliyor. Konuyu ayrıca GLB dosyası nedir yazısında daha ayrıntılı ele alıyorum.

Şimdi bu dört adımı biraz açalım.

1. Önce formu doğru kurmak. Optimizasyonun en iyi yolu, baştan düzenli bir model kurmaktır. Siluet ve oranlar doğruysa geri kalanı hafifletmek kolaydır; yanlış kurulmuş bir form ise "daha az polygon" ile düzelmez. Düzenli bir yüzey örgüsü (topoloji) hem pürüzsüz görünüm hem de sonradan yapılacak sadeleştirmeler için temel oluşturur. Bu konuda temiz topoloji nedir yazısı faydalı olur.

2. Gereksiz geometriyi azaltmak. Bu aşamada şunlara bakılır: kameranın hiçbir zaman görmeyeceği yüzeyler (alt taban, bitişik parçaların temas eden iç yüzleri), kullanıcının zaten yaklaşamayacağı küçük detaylar, düz yüzeylerde gereksiz bölünmüş poligonlar. Bir bevel (kenar yuvarlatma) gibi gerçekçilik katan detaylar ise genelde korunur, çünkü ışığı yakalayan kenarlar ürünün kalitesini belirler; asıl kazanç, kıvrımsız ve basit yüzeylerdeki fazlalıkları temizlemekten gelir. Kenar yuvarlatmanın neden gerçekçiliği artırdığını Blender'da bevel yazısında anlattım. Önemli olan, azaltmayı yaparken görünen silueti ve ışığın kenarlardaki davranışını bozmamak.

3. Materyal ve texture'ı verimli kullanmak. Birkaç ilke işe yarar. Aynı yüzey karakterine sahip parçalar mümkün olduğunca aynı materyali paylaşmalı. Düz renkli ve düz yüzeyler için doku haritasına gerek yoktur; yalnızca renk ve pürüzlülük değerleri yeterlidir. Doku kullanılıyorsa çözünürlük, ürünün ekranda kaplayacağı alana göre seçilmelidir. Doku kullanımının temelinde UV açma yatıyor; bu konuyu ürün modellerinde UV açma yazısında işledim. Kullanılmayan doku ve materyal artıkları dosyada gereksiz yer kaplar; bunun için texture temizliği yazısındaki yaklaşım doğrudan işe yarar.

4. Doğru biçimde dışa aktarmak. Blender'dan GLB çıkarırken hangi ayarların seçildiği, sonucun ağırlığını ve doğruluğunu etkiler. Ölçek, eksen yönü, modifier'ların uygulanıp uygulanmaması ve sıkıştırma gibi ayarları Blender'dan GLB export yazısında ayrıca topladım. Dışa aktarımdan sonra dosyayı mutlaka web'de açıp kontrol etmek, bir ek adım değil sürecin parçasıdır.

Hangi sırayla karar vermek gerekiyor?

Pratikte en çok işe yarayan şey, işe başlamadan önce üç soruyu cevaplamak: Model hangi sayfada, hangi boyutta görünecek? Kullanıcı ne kadar yaklaşabilecek? Hedef cihaz ne olacak? Bu cevaplar polygon bütçesini, texture boyutunu ve materyal sayısını belirliyor. Cevapları sonradan aramak, bitmiş bir modeli geriye doğru küçültmeye çalışmak anlamına geliyor ve genellikle hem zaman hem kalite kaybettiriyor.

Bu üç sorunun nasıl bir bütçeye dönüştüğünü kavramsal bir örnekle düşünelim (rakamlar tamamen varsayımsaldır). Ürün, sayfada orta büyüklükte bir kutuda gösterilecek ve kullanıcı yalnızca biraz yaklaşabilecekse, ince vida başlarını ya da dikiş dokusunu modellemenin anlamı yoktur; doku çözünürlüğü de düşük tutulabilir. Aynı ürün tam ekran bir inceleme moduna açılıyor ve kullanıcı yakınlaştırarak ayrıntıya bakabiliyorsa, ana yüzeylerde daha fazla ayrıntı ve daha yüksek doku çözünürlüğü haklı hale gelir. Hedef cihaz olarak eski telefonlar da düşünülüyorsa, bütçe yine aşağı çekilir. Yani aynı ürünün iki farklı web modeli olabilir ve ikisi de doğru olabilir.

Örnek bir karar tablosu

Aşağıdaki sorular, bütçeyi şekillendirmek için bir kontrol listesi gibi kullanılabilir:

• Kullanıcı modeli tam ekran açabiliyor mu? Açabiliyorsa yakın plan kalitesi önem kazanır.
• Modelde seçilebilir renk ya da kaplama var mı? Varsa ilgili parçalar baştan ayrı materyal olmalıdır.
• Ürünün hangi yüzleri hiç görünmeyecek? Bunlar sadeleştirilebilir.
• Sayfada aynı anda birden fazla model gösterilecek mi? Öyleyse her modelin bütçesi düşer.
• Aynı model artırılmış gerçeklik için de kullanılacak mı? O zaman format ve ölçek hassasiyeti artar; ayrıntılar için AR ile ürün gösterme yazısına bakılabilir.

Materyal ve doku için pratik bir yaklaşım

Çok parçalı bir ürünü, örneğin metal çerçeveli, döşemeli ve plastik ayaklı bir ekipmanı düşünelim (varsayımsal bir örnek). Her parça ayrı bir fiziksel malzemeden oluşsa da, web modelinde amaç "kaç malzeme var?" sorusuna doğru ama mümkün olduğunca küçük bir cevap vermektir. Metal çerçeve için tek bir materyal, döşeme için tek bir materyal, plastik parçalar için tek bir materyal çoğu zaman yeterlidir. Aynı metalden yapılmış on parçaya on ayrı materyal vermek, görünüme hiçbir şey katmadan çizim yükünü artırır.

Burada bir istisna var: kullanıcının renk ya da kaplama seçebileceği parçalar. Bunlar kendi materyallerine sahip olmalıdır; aksi halde yalnızca o yüzeyin rengini değiştirmek mümkün olmaz. Yani materyal sayısını azaltma kuralı, işlevsel ayrımları korumak şartıyla geçerlidir.

Doku tarafında ise şu soru işe yarar: bu yüzeyin bir doku haritasına gerçekten ihtiyacı var mı? Düz renkli, düz bir plastik için hayır; yalnızca renk, pürüzlülük ve metaliklik değerleri yeterlidir. Deri ya da kumaş gibi yüzeyin karakterini doku veriyorsa evet, ama o zaman da haritaların birleştirilmesi (örneğin pürüzlülük ve metaliklik bilgilerinin tek dokunun farklı kanallarında tutulması, glTF'in metallic-roughness düzeninde olduğu gibi) toplam doku sayısını azaltır. Bu mantık PBR malzeme sisteminin temelinde yatıyor; kavramları PBR malzeme nedir yazısında açıkladım.

Bir diğer ilke de doku alanının verimli kullanımıdır. Ürünün çok görünen yüzeyleri doku alanında daha geniş yer kaplamalı, hiç görünmeyen yüzeyler ise küçük tutulmalı ya da hiç yer almamalıdır. Bunu UV açma aşamasında yapmak mümkündür ve aynı doku çözünürlüğünde belirgin bir kalite farkı yaratır.

Dışa aktardıktan sonra neyi kontrol ederim?

Dışa aktarma bir bitiş çizgisi değil, bir kontrol noktasıdır. GLB dosyasını ürettikten sonra aşağıdaki adımlar hem sorunları erken yakalar hem de yayın gününde sürprizleri önler:

• Dosyayı gerçek bir web görüntüleyicide açın; yalnızca 3D yazılımın önizlemesine güvenmeyin. Işık ve malzeme web'de farklı görünebilir.
• Dosya boyutunu not edin ve hedefinizle karşılaştırın. Beklenenden büyükse hangi dokunun ya da hangi nesnenin sorumlu olduğunu araştırın.
• Modeli her açıdan döndürün: arka yüz, alt yüz ve kenarlarda eksik yüzey, ters dönmüş yüzey (normal) ya da titreyen bölge olup olmadığına bakın.
• Ölçeği ve duruşu kontrol edin. Modelin ekranda beklenen büyüklükte ve doğru yönde açılması gerekir.
• Renk seçici gibi etkileşimli parçalar varsa her seçeneği tek tek deneyin.
• Gerçek bir telefonda ve yavaş bağlantıda açın; yükleme süresini ve döndürme akıcılığını gözlemleyin.

Bu listedeki her kontrol, gerçek hayatta rastlanan bir hata sınıfına karşılık gelir. Özellikle ters dönmüş normaller ve unutulmuş modifier'lar, 3D yazılımda fark edilmeyip web'de belirginleşebilir. Bu yüzden dışa aktarım ayarlarını bilinçli seçmek ve sonucu hemen test etmek alışkanlık haline getirilmelidir.

Yaygın hatalar

• Render modelini olduğu gibi göndermek. Render için kurulan yoğun geometri ve büyük dokular web için gereksizdir.
• Her küçük parçaya ayrı materyal vermek. Materyal sayısı arttıkça çizim yükü de artar.
• Aşırı büyük doku kullanmak. Küçük bir ürün için 4096 pikselik dokular çoğu zaman gereksiz bir lükstür.
• Son dakikada optimizasyon yapmak. Yayın tarihine yakın bir ağır model, kaliteden ödün vermeyi zorunlu kılar.
• Testi yalnızca güçlü bilgisayarda yapmak. Gerçek ziyaretçilerin cihazları çok daha çeşitlidir.

Bu hataların tamamı üzerine ayrı bir yazı da var: 3D ürünü web'e taşırken en çok yapılan hatalar. Toplu bir optimizasyon akışı için 3D modeli web için optimize etme yazısı süreci adım adım ele alıyor.

Modelleme ve görselleştirme farkı burada neden kritik?

Render almak için kullanılan bir modelle web için kullanılan bir model arasında çoğu zaman farklı bir hazırlık gerekir. Aynı ürün için iki ayrı sürüm tutmak (yüksek ayrıntılı render sürümü ve hafifletilmiş web sürümü) bu yüzden olağan bir yaklaşımdır. İkisi arasındaki fark 3D modelleme ile görselleştirme farkı yazısında daha geniş ele alınıyor. Bir markanın hem görsel hem web modeline ihtiyacı varsa bunu baştan planlamak, aynı kaynak modelden iki çıktı almayı mümkün kılar ve çalışmaları boşa harcamaz.

Hizmet tarafında bu işi web için 3D ürün modeli sayfasında özetliyorum; ürününüzün durumuna göre ne yapılabileceğini konuşmak için teklif sayfasından bana ulaşabilirsiniz.

Bir optimizasyon işi

Bu yüzden web için 3D modelleme benim gözümde sadece “3D model yapmak” değil. Aynı zamanda bir optimizasyon işi.

İyi model, sadece yakından güzel görünen model değil. Kullanıcı onu açtığında, döndürdüğünde ve yakınlaştırdığında hızlı ve düzgün çalışan model.

Optimizasyonu bir kayıp olarak değil, bir tasarım disiplini olarak düşünmek gerekir. Kısıtlar bazen daha iyi kararlara yol açar: hangi ayrıntı gerçekten önemli, hangi yüzey kullanıcının göreceği şey, hangi malzeme ayrımı gerekli? Bu soruları cevaplamak zorunda kalmak, modelin daha odaklı ve tutarlı olmasını sağlar. Tasarım ile performans arasındaki dengeyi 3D web sitesi yaparken tasarım mı performans mı yazısında ayrıca tartıştım.

Sık sorulan sorular

Sonuç

Web'e uygun 3D ürün modeli; hedefi baştan belirlemek, bütçeyi dört kalemde (polygon, texture, materyal, nesne) takip etmek ve dışa aktarmayı sürecin bir parçası saymakla ortaya çıkıyor. Güzel görünmek yetmiyor; hızlı açılması, rahat dönmesi ve her cihazda tutarlı davranması gerekiyor.

İ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