Bir Ürünü Web'de Gerçekçi Göstermek İçin Neler Önemli?

Her şeyi geometriyle çözmeye çalışmak

Web üzerinde gerçekçilik konusunda en büyük hata, her şeyi geometriyle çözmeye çalışmak olabilir. Poligon sayısını artırmak, kenarları daha da yumuşatmak, küçük detayları tek tek modellemek cazip gelir; çünkü geometri somuttur, sayılabilir, ekranda dönerken görülür. Oysa bir ürünün gerçekçi görünmesini sağlayan şeylerin büyük kısmı mesh'in dışında kalır.

Bir yüzeyin gerçekçi olması sadece mesh ile ilgili değil. Materyal, ışıklandırma, roughness, normal detayları, renk yönetimi ve hatta çevresindeki ışık koşulları birlikte çalışıyor. Bunlardan biri eksik ya da yanlışsa, çok yüksek poligonlu bir model bile sahte durur. Tersine, makul bir poligon sayısıyla kurulmuş ama materyali ve ışığı doğru ayarlanmış bir model, çoğu zaman daha inandırıcıdır.

Bunu denemek kolay: gerçekçi görünmeyen bir modeli aklınıza getirin ve kendinize şunu sorun: "Burada eksik olan şekil mi, yoksa yüzeyin ışığa verdiği tepki mi?" Çoğu zaman cevap ikincisidir. Kenarlar çok keskin ve ışığı yakalamıyorsa bu geometri sorunudur, ama küçük bir bevel gibi ucuz bir müdahale bunu çözer. Yüzey her yerde aynı parlaklıktaysa bu geometri sorunu değil, roughness sorunudur.

Gerçekçiliğin dört ayağı

Web'de bir ürünün inandırıcı görünmesini dört başlık altında düşünmek işe yarıyor. Hangisinin eksik olduğunu bulmak, nereye vakit harcayacağınızı da belirliyor.

• Şekil: Doğru oran, makul kenar yumuşatma, temiz silüet. Burada amaç mikro detay değil, ürünün tanınır olması.
• Materyal: Base color, roughness, metallic, normal ve gerekiyorsa coat ya da sheen gibi katmanlar. Gözün "bu deri, bu metal" dediği yer burası.
• Işık: Ortam aydınlatması, yansımalar, gölge. Materyal ancak ışıkla birlikte okunur.
• Görüntü yönetimi: Renk uzayı, tone mapping, pozlama. Aynı model farklı ayarlarda bambaşka görünebilir.

Bu dört ayaktan şekil en az hata yapılan, görüntü yönetimi en çok unutulan olanıdır. Çoğu "neden gerçekçi durmuyor?" sorusunun cevabı üçüncü ve dördüncü ayakta çıkar.

Işıkla nasıl davranıyor?

Ben özellikle ürün görselleştirmede şu soruyu soruyorum: "Bu ürünün gerçek hayatta ışıkla nasıl davrandığını nasıl gösterebilirim?"

Çünkü gözümüz malzemenin ne olduğunu sadece rengine bakarak anlamıyor. Deri başka, kumaş başka, metal başka tepki veriyor. Cilalı metal çevresini yansıtır; yüzeyinde neredeyse hiç kendi rengi görünmez, gördüğünüz şey çevredir. Kumaş ışığı dağıtır, kenarlarında hafif bir yumuşak parlama verir. Deri ise ikisinin arasında, geniş ve yumuşak bir parlaklık verip kıvrımlarda koyulaşır.

Bu yüzden iyi bir ışıklandırma, ürünün "ne olduğunu" anlatan bir araçtır. Web'de bunun en pratik yolu görüntü tabanlı aydınlatmadır, yani bir ortam haritasıyla (HDRI) sahneyi aydınlatmak. Bu konuyu HDRI ile ürün ışıklandırma yazısında ayrıntılı ele aldım; burada özetle şunu söylemek yeter: ortam haritası hem ışığı hem yansımayı birlikte verdiği için, metal ve cilalı yüzeylerde en büyük farkı o yaratır.

Dikkat edilecek bir nokta: ortam haritasının kendisi çok parlak ve kontrastlıysa yansımalar da sert olur. Ürün fotoğrafçılığındaki softbox mantığıyla düşünmek iyi bir kıstas: geniş, yumuşak ışık kaynakları çoğu ürün için daha güvenlidir. Sert, dar ışık kaynakları yalnızca özellikle vurgulamak istediğiniz parlak detaylarda mantıklıdır.

Materyal değiştirirken

Bu nedenle aynı model üzerinde materyalleri değiştirirken sadece base color değiştirmek çoğu zaman yeterli olmuyor. Renk seçeneği sunulan ürünlerde (örneğin döşeme rengi değişen bir ürün) her seçeneğin yüzey karakterini de düşünmek gerekiyor: keçe ile deri aynı roughness ile aynı hissi vermiyor. Kumaş ve deri yüzeyler için ayrıca kumaş dokusu ve deri materyali yazılarıma bakabilirsin.

Pratik bir yaklaşım şu: her materyal için base color dışında en az iki ayar belirleyin. Biri roughness, diğeri yüzey detayı (normal ya da bump). Metal parçalarda buna metallic değeri eklenir. Bir ürün beş farklı renkte sunuluyorsa, bu beş renk için sadece renk kodunu değiştirmek yetmez; "bu renk bu malzemede nasıl görünür?" sorusunu her biri için sormak gerekir. Koyu bir renkte yansımalar daha belirgin olur, açık renkte ise yüzey detayı daha az okunur. Aynı roughness değeri iki rengi aynı hissettirmeyebilir.

Renk seçenekli ürünlerde sistemli düşünmenin avantajını renk seçenekli ürünler yazısında anlattım. Web tarafında bunun anlamı, tek bir modeli paylaşıp materyal parametrelerini değiştirerek varyasyon üretmek; ama her varyasyonun kendi gözle kontrolünden geçmesi gerektiği.

Roughness: gerçekçiliğin sessiz kahramanı

Başlangıç seviyesinde en sık görülen hata, roughness'ı tüm yüzeyde tek bir sabit değer bırakmak. Gerçek dünyada hiçbir yüzey tamamen homojen değildir. Parmak izi, tozlanma, aşınma, kıvrım ve kenar etkileri parlaklığı bölgeden bölgeye değiştirir. Web'de bunun için tam bir shader ağı kurmaya gerek yok; küçük bir roughness haritası bile fark yaratır.

Roughness haritası, bir görüntü dosyası olarak GLB içine gömülebilen ucuz bir bilgidir. Metallic ve roughness kanalları glTF'te tek bir doku içinde birlikte taşınabilir (roughness yeşil, metallic mavi kanalda). Bu paketleme dosya boyutunu da küçültür. PBR kavramlarını yeni öğrenenler için PBR malzeme yazısı bu iki değerin ne yaptığını baştan açıklıyor.

Küçük bir ipucu: bir yüzeyin roughness değerini belirlerken en parlak ve en mat bölgeyi ayrı ayrı düşünün. Örneğin bir deri koltuğun oturma yüzeyi kullanımdan dolayı biraz daha parlaktır, dikiş kenarları ise daha mattır. Bu fark birkaç yüzde değil, gözle fark edilen bir fark olmalı; ama abartı da plastik hissi verir.

Normal ve bump: geometri olmadan yüzey

Yüzeydeki küçük kabartıları gerçek mesh yerine normal haritasıyla vermek, web için en önemli tekniklerden biri. Normal haritası ışığın yüzeyi sanki girintili çıkıntılıymış gibi hesaplamasını sağlar; poligon sayısı artmaz. Deri gözenekleri, kumaş örgüsü, kaplama dokusu gibi mikro detaylar bu yolla çözülür.

Bir uyarı: normal haritası siluetı değiştirmez. Yüzeye yakından bakıldığında ya da çok eğik açıdan bakıldığında detay "yapıştırılmış" gibi görünebilir. Bu yüzden kenar ve siluet detayları (örneğin bir dikiş çıkıntısı ya da kalın bir kabarıklık) için hâlâ gerçek geometri gerekir; ince yüzey dokusu için ise normal haritası yeterlidir. Hangisinin hangi iş için olduğuna karar vermek, web optimizasyonunun yarısıdır.

Kenarların kendisi de bir normal meselesidir. Keskin kenarlar ışığı yakalamadığı için "bilgisayar yapımı" görünür; küçük bir yuvarlatma (bevel) ince bir parlama çizgisi oluşturur. Bu çizgi ürün fotoğraflarında gördüğümüz o "gerçek" kenar parlamasıdır.

Yansıma ve ortam: metalin ve cilanın kaderi

Metalik ve cilalı yüzeyler çevrelerini yansıttığı için, ortam haritasının kalitesi doğrudan gerçekçiliği belirler. Düz gri bir ortam haritası metali donuk gösterir; içinde ışık kaynakları ve yön değişimleri olan bir ortam haritası ise metali canlandırır. Metal materyallerin kendine özgü sorunlarını krom, alüminyum ve fırçalanmış metal yazısında topladım.

Web görüntüleyicilerinde ortam haritasının çözünürlüğü de dosya boyutunu etkiler. Yansımanın keskin olması gereken parlak krom için yüksek çözünürlüklü bir harita mantıklı olabilir; ama yüzeyleri çoğunlukla mat olan bir ürün için küçük bir ortam haritası yeterlidir. Hedef, yansımanın "gerçekçi hissettirmesi", ortam haritasının kendisinin görünmesi değil.

Ayrıca arka plan ile ortam aynı olmak zorunda değil. Birçok görüntüleyici ortam haritasını yansıma için kullanırken arka planı düz renk ya da şeffaf bırakabilir. Bu, sayfa tasarımıyla uyumu korurken gerçekçi yansıma verir.

Gölge ve zemin: ürünü yere bağlamak

Havada süzülen bir ürün, ne kadar iyi modellenmiş olursa olsun, gerçek görünmez. Gözümüz nesneyi zemine bağlayan iki ipucu arar: temas gölgesi ve yumuşak bir gölge dağılımı. Web'de gerçek zamanlı gölge pahalıdır; bu yüzden çoğu ürün görüntüleyicisi basit bir "yumuşak gölge" yaklaşımı kullanır. Bunun render tarafındaki karşılığını gerçekçi zemin ve gölge yazısında ele aldım.

Bir yöntem, gölgeyi önceden pişirip (bake) zemine düz bir doku olarak koymak. Ürün dönerken gölge sabit kalır; döndürülebilir bir ürün için bu genellikle sorun olmaz, çünkü gölge ürünün altında, kontakt bölgesinde yoğunlaşır. İkinci yöntem, çok basit bir gerçek zamanlı yumuşak gölge kullanmak. Hangisini seçeceğiniz, kullanıcının ne kadar serbest dönebildiğine ve cihaz bütçesine bağlı.

Önemli olan, gölgenin ürünle uyumlu olması: ışığın geldiği yön, ürünün ağırlığı, zeminin türü. Sert ve kısa bir gölge güçlü bir tek ışığı anlatır; geniş ve silik bir gölge yumuşak, dağınık ışığı. Seçiminiz ürünün karakteriyle uyuşmalı.

Renk yönetimi: aynı model, farklı görünüm

Gerçekçiliği bozan en gizli etkenlerden biri renk yönetimidir. Doku haritaları farklı renk uzaylarında olabilir: base color dokusu genellikle sRGB olarak, roughness, metallic ve normal gibi veri dokuları ise lineer (renk olmayan veri) olarak okunmalıdır. Bunlardan biri yanlış işaretlenirse renkler solar ya da fazla kontrastlı görünür, roughness haritası beklenmedik biçimde davranır.

Bir de tone mapping var. Gerçek zamanlı görüntüleyiciler genellikle yüksek dinamik aralıklı ışığı ekranın gösterebildiği aralığa sıkıştırmak için bir tone mapping uygular. Hangi yöntemin seçildiği, ürünün renginin ekrandaki görünümünü değiştirir. Marka rengi önemli bir üründe, ekranda görülen rengin referansa uyup uymadığını mutlaka kontrol edin; aksi halde kullanıcıya gösterilen ile ürün sayfasındaki fotoğraf arasında fark olur.

Pozlama da ayrı bir ayar. Çok parlak bir sahne yüzey detayını yutar, çok karanlık bir sahne ise yansımaları kaybettirir. Mat siyah gibi zor yüzeylerde bu daha da belirgin; mat siyah ürün ışıklandırma yazısı bu konunun uç bir örneğini işliyor.

Performansı bozmadan gerçekçilik

Web'de gerçekçilik bir bütçe meselesidir: her şey için yer yok, seçmek gerekir. Birkaç genel kural işe yarıyor:

• Mesh'i, siluetin ve kenarların okunacağı kadar detaylı tutun; ince yüzey detayını normal haritasına bırakın.
• Doku çözünürlüğünü ürünün ekranda kaplayacağı alana göre seçin. Küçük bir ürün için 4096 piksellik doku çoğu zaman gereksizdir.
• Aynı materyali paylaşan parçaları birleştirin ya da ortak doku atlasları kullanın; her ek materyal ek bir çizim çağrısıdır.
• Kullanılmayan dokuları ve fazla materyal slotlarını temizleyin. Bu konuda texture temizliği yazısına bakabilirsiniz.
• Modeli GLB olarak, sıkıştırma seçeneklerini bilerek dışa aktarın. Ayrıntılar için GLB export yazısı var.

Bütün bu kararların ortak noktası şu: kullanıcının gözü neye bakıyor? Ürünün ana yüzeyine, kenar parlamalarına, ürünün zemine oturuşuna. Gözün bakmadığı yerlere bütçe harcamak, bakılan yerleri yoksul bırakır. Poligon sayısı konusunda rakamsal bir fikir istenirse web için kaç polygon yazısı bir çerçeve sunuyor; ama her ürünün ihtiyacı farklıdır.

Sade ama doğru

Web tarafında da aynı prensip geçerli. Sade ama doğru kurulmuş bir materyal sistemi, gereksiz detaylarla doldurulmuş bir sistemden daha iyi sonuç verebilir.

Sadelik burada eksiklik değil, disiplin demek. Her materyal için "hangi bilgiyi taşıyor?" diye sormak gerekiyor. Roughness haritası yüzeyi canlandırıyorsa kalsın; üç ayrı gürültü dokusu üst üste biniyor ve göz farkı seçemiyorsa gereksizdir. Web için hazırlanan bir modelde en sevdiğim yöntem, render için kurduğum karmaşık materyali önce sade bir hâle indirmek: temel ışık davranışını koruyup, gözün fark etmeyeceği katmanları atmak.

Bu yaklaşımı canlı örnekle görmek istersen Aura Reformer çalışmasına bakabilirsin: tek bir modelin farklı renk seçenekleriyle web'de nasıl sunulduğunu orada görebilirsin. Kendi ürününüz için benzer bir sistem düşünüyorsanız web için 3D ürün modeli hizmet sayfası sürecin nasıl işlediğini anlatıyor.

Gerçekçilik kontrol listesi

Bir ürün modelini web'e koymadan önce şu soruları sırayla sorun:

• Kenarlarda ince bir parlama çizgisi var mı, yoksa her şey "kesilmiş" gibi mi duruyor?
• Roughness yüzeyin her yerinde aynı mı? Bir miktar değişim eklenebilir mi?
• Metal parçalar çevrelerini yansıtıyor mu, yoksa düz gri mi görünüyor?
• Ürün zemine bağlı mı, yoksa havada mı duruyor?
• Base color dokusu sRGB, diğer haritalar lineer mi işaretlenmiş?
• Ekrandaki renk referans fotoğrafla uyuşuyor mu?
• Farklı renk seçeneklerinin her biri tek tek incelendi mi?
• Mobil cihazda akıcı mı dönüyor, yükleme süresi makul mü?

Bu listenin amacı mükemmeliyetçilik değil; hangi eksiğin gerçekçiliği en çok düşürdüğünü bulmak. Çoğu zaman bir ya da iki madde, modelin "iyi" ile "inandırıcı" arasındaki farkını oluşturur.

Sık sorulan sorular

Sonuç

Web'de gerçekçi bir ürün göstermek, daha fazla poligon üretmek değil; materyali, ışığı ve renk yönetimini doğru kurmak demektir. Geometri iskeleti verir, ama inandırıcılığı yüzeyin ışığa verdiği tepki yaratır. Projeniz için nasıl bir yaklaşım uygun olur diye düşünüyorsanız teklif formundan ürününüzü anlatabilirsiniz.

İ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