Web'de 3D Model İçin Kaç Polygon Kullanılmalı?

Tek bir cevap yok

“Kaç polygon kullanmalıyım?” sorusunun tek bir cevabı yok.

Çünkü ürünün kendisi önemli. Basit bir sandalye ile çok detaylı mekanik bir ürün aynı polygon ihtiyacına sahip değil.

Bu soruya "şu kadar" diye kesin bir rakamla cevap veren kaynaklara temkinli yaklaşıyorum. Çünkü polygon sayısı tek başına bir kalite ya da performans ölçüsü değil. Aynı sayıdaki polygon, iyi dağıtıldığında temiz bir ürün çıkarır, kötü dağıtıldığında hem ağır hem çirkin bir model verir. Üstelik web'de modelin çalıştığı cihaz, tarayıcı ve sayfadaki diğer öğeler de denklemin parçası. Bu yazıda sayı yerine karar çerçevesi veriyorum: Hangi sorulara bakıyorum, neyi önce azaltıyorum, neyi koruyorum.

Polygon, üçgen ve ekran

Önce küçük bir terim düzeltmesi. Modelleme yazılımında çoğu zaman dört kenarlı yüzeylerle (quad) çalışırız. Ama GPU'ya giderken her şey üçgene çevrilir. Yani Blender'da gördüğün "yüz sayısı" ile tarayıcıda çizilen üçgen sayısı aynı olmayabilir. Dışa aktarım sırasında quad'lar ikiye bölünür. Bu yüzden web için bütçe düşünürken üçgen sayısına bakmak daha doğru.

Bir diğer nokta: Ekranda çizilen şey modelin kendisi değil, onun ekrana düşen görüntüsü. Model ekranın küçük bir köşesinde görünüyorsa, üçgenlerin çoğu birkaç pikseli paylaşır ve ayrıntının büyük kısmı zaten fark edilmez. Aynı model tam ekran yakınlaştırılabiliyorsa, tablo değişir.

Mesafe ve detay

Benim burada baktığım temel şey şu: Model hangi mesafeden görülecek?

Kullanıcı ürünü uzaktan görüyorsa küçük detayların tamamını gerçek geometriyle yapmak gerekmeyebilir. Bazı detaylar texture veya normal map ile çözülebilir.

Mesafe sorusunu pratikte üç alt soruya bölüyorum.

• Kullanıcı modeli yakınlaştırabilir mi, yoksa sabit bir kadrajda mı dönüyor? Yakınlaştırma serbestse yüzeyin eğriliği ve kenar kalitesi daha fazla korunmalı.
• Ürün sayfada ne kadar yer kaplıyor? Küçük bir kartta dönen ürünle, tam ekran bir görüntüleyici aynı bütçeyi gerektirmez.
• Aynı sayfada birden fazla model var mı? Katalog sayfasında birkaç model aynı anda yükleniyorsa, her birinin bütçesi bir ürün sayfasındakinden daha sıkı olmalı.

Bu sorular cevaplanmadan verilen herhangi bir sayı varsayımdır.

Siluet önce gelir

Bir başka konu da siluet. Bir modelin uzaktan bakıldığında genel şekli bozuk görünüyorsa düşük polygon kullanmak avantaj değil, problem haline geliyor.

Bu yüzden polygon azaltırken ilk koruduğum şey genellikle siluet oluyor. İkinci olarak önemli mekanik ve tasarımsal detaylara bakıyorum. Sonra görünmeyecek alanlarda gereksiz geometriyi azaltıyorum.

Siluetin neden bu kadar önemli olduğunu şöyle açıklayabilirim. İnsan gözü bir nesnenin dış hattındaki kırılmaları çok kolay yakalar. Yuvarlak olması gereken bir tekerlek köşeli görünüyorsa, doku ne kadar güzel olursa olsun model "ucuz" okunur. Buna karşılık yüzeyin ortasındaki küçük bir girinti normal map ile verilebilir; kenarı kurtaramazsın ama yüzeyi kurtarabilirsin.

Bu yüzden eğrilerin dış hatta denk geldiği yerlerde, örneğin silindirik gövdelerin kenarında, kavisli kolçaklarda, yuvarlatılmış köşelerde segment sayısını korumak, düz yüzeylerin ortasındaki geometriyi azaltmaktan daha önceliklidir. Düşük polygonlu bir modelin neden kötü görünmek zorunda olmadığını düşük polygon model yazısında ayrıca ele aldım.

Geometri ile texture arasında takas

Polygon azaltırken kaybolan detayı geri kazandırmanın klasik yolu normal map. Yüksek detaylı bir modelin yüzey eğimini bir görsele aktarıp, düşük polygonlu modele bu görseli uygulayarak ışık altında detay varmış hissi vermek mümkün. Blender'da bu işlem Cycles render motorunda bake menüsünden yapılır; Bake Type olarak Normal seçilir ve yüksek detaylı model, düşük polygonlu modelin üzerine "Selected to Active" seçeneğiyle aktarılır. UV haritasının düzgün açılmış olması şart, bunun için UV açma yazısındaki temel ilkeler geçerli.

Ama bu takasın bir bedeli var: Normal map silueti değiştirmez, yalnızca ışığın yüzeyi nasıl algıladığını değiştirir. Dolayısıyla normal map ile çözülebilecek detaylar ile gerçek geometri gerektiren detayları ayırmak gerekiyor.

• Normal map ile çözülebilir: Yüzey desenleri, kabartma yazılar, küçük vida başları, ince oluklar, kumaş dokusu.
• Geometri gerektirir: Dış hattı etkileyen çıkıntılar, delikler, kenar yarıçapları ve kullanıcının yakından ya da farklı açıdan bakacağı büyük detaylar.

Dosya boyutu tarafında da bir denge var. Normal map bir görsel dosyasıdır ve dosya boyutuna eklenir. Polygon azaltmak ile texture eklemek arasında net bir kazanç hesabı yapmak gerekir. Bu konuya optimizasyon sürecimi anlattığım yazıda geniş yer verdim.

Düz gölgelendirme ile pürüzsüz gölgelendirme

Polygon sayısının algısını en çok etkileyen etkenlerden biri gölgelendirme. Düşük polygonlu bir silindir, eğer pürüzsüz (smooth) gölgelendirme ile gösterilirse, yüzey eğri gibi görünür; sadece dış hat köşeli kalır. Düz (flat) gölgelendirmede ise her yüzey ayrı ayrı görünür.

Bu nedenle bir modeli azaltırken yalnızca geometriyle uğraşmak yetmez. Blender'da Shade Smooth uygulayıp gerekli kenarları keskin işaretlemek, düşük polygonlu bir modeli çok daha pürüzsüz gösterebilir. Ama yanlış uygulandığında yüzeyde gölge lekeleri oluşabilir. Bunun nedeni genellikle yüzeydeki üçgen dağılımının düzensiz olması. Bu yüzden temiz topoloji, düşük polygon çalışmasında da önemli; temiz topoloji yazısı bu konuyu detaylandırıyor.

Pratik bir sıralama

• Önce görünmeyen iç yüzeyleri ve kapalı kalan parçaları temizlemek.
• Sonra düz yüzeylerdeki gereksiz bölünmeleri azaltmak.
• Ardından kıvrımlı kenarlarda siluet bozulmadan inen en düşük değeri aramak.
• En sonda normal map ya da texture ile hissedilen detayı geri kazandırmak.

Bu sıralama, düşük polygon sayısına ulaşırken görsel kaliteyi koruyor. Daha geniş çerçeve için optimizasyon sürecimi de okuyabilirsin.

Bu sırayı uygularken kullandığım araçlar da şöyle:

• Kopya ya da üst üste binen noktaları birleştirmek için Blender'daki Merge by Distance komutu.
• Düz yüzeylerdeki gereksiz kenarları kaldırmak için Limited Dissolve ya da elle seçip Dissolve.
• Modifier tarafında, Subdivision ile oluşturulmuş modeli azaltmak istediğinde, Decimate modifier'ı. Decimate otomatik çalışır ve topolojiyi bozabilir; bu yüzden düzgün bir ağ yapısı gerekiyorsa elle temizleme çoğu zaman daha iyi sonuç verir.
• Gölgelendirmeyi korumak için Weighted Normal modifier'ı gibi çözümler.

Bu araçların hiçbiri otomatik bir "kaliteyi koru" düğmesi değil. Her birinin sonucunu siluet ve gölgelendirme açısından gözle kontrol etmek gerekiyor.

Sahne düzeyinde düşünmek: materyal ve nesne sayısı

Web performansı yalnızca üçgen sayısına bağlı değil. Bir modeldeki nesne ve materyal sayısı da çizim maliyetini etkiler. Çok sayıda ayrı materyal ve ayrı mesh, tarayıcıda çok sayıda çizim çağrısı demek. Bazen düşük polygonlu ama onlarca materyali olan bir model, orta polygonlu ama tek-iki materyalli bir modelden daha ağır çalışabilir.

Dolayısıyla polygon azaltmaya girişmeden önce şunlara bakıyorum:

• Aynı materyali paylaşabilecek parçalar ayrı materyal kullanıyor mu?
• Birleştirilebilecek küçük mesh'ler ayrı ayrı mı duruyor?
• Kullanıcıya hiç gösterilmeyecek parçalar, örneğin iç mekanizma, hâlâ dosyada mı?
• Texture boyutları modelin ekrandaki yerine göre makul mü?

Çoğu zaman bu soruların cevabı, polygon azaltmaktan daha büyük kazanç getiriyor. Yanlış yerde optimizasyon yapmamak için önce dosyanın neyle şiştiğini teşhis etmek gerekiyor.

Bütçeyi nasıl belirlerim

Net bir rakam vermemekle birlikte, bütçeyi şöyle bir mantıkla belirliyorum:

• Hedef cihazı belirle: Yalnızca masaüstü mü, telefonlar da mı? Telefonlar daha sınırlı olduğundan, bütçe genellikle zayıf cihaza göre kurulur.
• Sayfadaki modelin rolünü belirle: Ana kahraman mı, yardımcı bir görsel mi?
• İlk sürümü makul bir detayla çıkar, hedef ortamda dene.
• Takılma ya da uzun yükleme gözlemlersen sorunun geometriden mi, texture'dan mı geldiğini teşhis et.
• Gerekirse kademeli olarak düşür; her adımda siluet ve gölgeyi gözle kontrol et.

Burada anahtar sözcük "dene". Bütçe kâğıtta değil, gerçek cihazda belirlenir. Telefonda, tarayıcıda ve mümkünse eski bir cihazda modeli açıp akıcılığa bakmak, hiçbir tablo ya da genel kuraldan daha güvenilir.

Üç varsayımsal ürün üzerinden düşünmek

Karar çerçevesini somutlaştırmak için üç kurgusal ürün alalım. Rakam vermeden, hangi sorulara nasıl cevap verdiğimi göstereyim.

Birinci ürün, sade bir ahşap sandalye olsun. Silüet çok önemli, çünkü ayakların ve arkalığın dış hattı ürünün kimliği. Oturma yüzeyindeki küçük kenar yuvarlamaları gerçek geometriyle verilebilir ama sayıyı küçük tutmak mümkün; ahşap damarı ise zaten texture'dan gelir. Burada geometri hafif, texture dengeli olabilir.

İkinci ürün, çok parçalı bir mekanik cihaz olsun: düğmeler, vidalar, havalandırma ızgaraları, bağlantı noktaları. Bu üründe iç mekanizma kullanıcıya hiç gösterilmiyorsa, kasanın içindeki her şey silinebilir. Düğme ve ızgara gibi yüzeyden taşan öğelerin siluete katkısı varsa geometri kalır; ince oluklar ve yazılar normal map'e geçer. En büyük kazanç genellikle görünmeyen parçaları atmaktan gelir.

Üçüncü ürün, yumuşak kıvrımlı bir koltuk olsun. Burada siluet doğrudan eğrilerden oluştuğu için düşük segment sayısı hemen fark edilir. Bu tür ürünlerde yüzeyi azaltmak yerine topolojiyi düzenli tutmak, kıvrımların dağılımını kontrollü kurmak daha çok yarar sağlar. Kumaş dokusu da normal ve roughness ile verilir; gerçekçi kumaş dokusu yazısındaki dengeleri burada web bütçesine göre tartmak gerekir.

Üç ürünün üçünde de sıralama aynı kalıyor; değişen, hangi adımın en çok kazandırdığı.

Web'e çıkmadan önce kontrol listesi

Polygon bütçesinden memnun olduktan sonra modeli yayına almadan bir kez daha şunlara bakıyorum.

• Model farklı açılardan döndürüldüğünde siluet bozuk görünen bir yer var mı?
• Yüzeyde gölge lekeleri ya da tuhaf parlamalar oluşuyor mu?
• Modeli yakınlaştırdığımda kenarlar kabul edilebilir bir yumuşaklıkta mı?
• Telefon ve masaüstünde yükleme ve döndürme akıcı mı?
• Dosya boyutu, sayfanın geri kalanıyla birlikte düşünüldüğünde makul mü?
• Model yalnızca kullanıcı ürünle etkileşime girdiğinde ya da sayfa kaydırılıp görünür olduğunda mı yükleniyor?

Son madde, polygon bütçesinden bağımsız ama çok etkili. Hafif bir model bile sayfa açılırken gereksiz yere yüklenirse deneyimi yavaşlatabilir. Web'e taşırken sık yapılan hatalara 3D ürünü web'de kullanırken yapılan hatalar yazısında ayrıca değindim. Görüntüleyiciyi sayfaya yerleştirmek için de model-viewer ile web sitesine 3D model ekleme yazısındaki örnek koddan başlayabilirsin.

Sık sorulan sorular

Sonuç

Ben artık optimizasyonu “mümkün olan en düşük polygon” şeklinde düşünmüyorum. Benim için hedef: görüntüyü bozmadan mümkün olan en verimli model.

Verimli model, her üçgenin görsel bir işe yaradığı modeldir. Silüete katkısı olmayan, gölgelendirmeye faydası olmayan ve kullanıcının hiç görmeyeceği bir yerde duran geometri, dosyada yer kaplayan ve işlemciyi yoran ama kimseye fayda sağlamayan bir yüktür. Bu bakışla çalışınca polygon sayısı bir hedef olmaktan çıkıyor, doğru kararların yan ürününe dönüşüyor.

Bunu yaparken önce mesafeye ve ekrandaki role bakıyor, siluetin korunmasına öncelik veriyor, ardından geometri ile texture arasındaki takası bilinçli yapıyorum. Dışa aktarım aşamasında dikkat edilmesi gerekenleri Blender'dan GLB export yazısında anlattım. Web'de kullanılacak bir ürün modeli için destek arıyorsan web için 3D ürün modeli hizmeti sayfasına göz atabilirsin.

İ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