Tarayıcıda açık dünya oluşturmak, bölüm 5: Görsel zenginlikleri bütçelemek

Oleg Sidorkin, Cinevva CTO'su ve Kurucu Ortağı

Burada yeni misiniz? Seri rehberine göz atın. Bu rehber, spike'ın ne olduğunu açıklıyor ve tüm bölümlere bağlantı veriyor.

Bu bölümde görsel iddialar matematikle yüzleşti.

Bir arada elde edilen sonuçları teşhis etmek zor olduğundan, render maliyetini ayrı spike'lara böldük. Her şeyi aynı anda açarsanız yalnızca karenin yavaş olduğunu öğrenirsiniz. Bütçeyi hangi özelliğin tükettiğini öğrenemezsiniz.

Spike 7, bitki örtüsü yoğunluğunu ve animasyon maliyetini hedefliyordu. Yaklaşımımız, her arazi parçası için 32x32 yoğunluk haritalarından çalışma zamanında dağıtım yaparak büyük InstancedMesh kümelerini beslemekti. Her çimen sapına ve çalı kümesine, kayan bir gürültü dokusuyla yönlendirilen vertex shader tabanlı rüzgâr animasyonu uygulandı. İzlediğimiz temel ölçüt üçgen sayısı değil, orta seviye GPU'lardaki draw call ek yükü ve vertex işleme kapasitesiydi. Örnekleri daha az sayıda mesh içinde toplamanın, çimen sapı başına poligon sayısını azaltmaktan daha önemli olduğunu gördük.

Spike 7'yi yeni sekmede aç ↗ · Kaynağı görüntüle

Spike 8, arazi malzemelerinin karmaşıklığını artırdı. Eğim açısına ve rakıma göre ağırlıklandırılan çok katmanlı harmanlama, uçurum yüzeyleri için isteğe bağlı triplanar projeksiyon ve katman başına normal haritaları kullandık. Shader, dört doku katmanıyla eğim tabanlı splatting yapıyordu ve her katman için bir diffuse ve bir normal örneği gerekiyordu. Bu da herhangi bir aydınlatma eklenmeden önce fragment başına $4\times 2=8$ doku okuması demekti. Sayı, katmanlarla doğrusal olarak arttığından beşinci katman her piksel için 10 okuma anlamına geliyordu. Alt sınırı belirlemek için özellikle tümleşik Intel GPU'larda profil çıkardık. Sonuç olarak, dikey yüzeylerde triplanar projeksiyonun maliyetine değdiğini, ancak beşinci bir splat katmanı eklemenin değmediğini gördük.

Spike 8'i yeni sekmede aç ↗ · Kaynağı görüntüle

Spike 9, gerçekçi arazi ve nesne yükü altında kademeli gölge haritası maliyetine odaklandı. Üç kademeli CSM temel yapılandırmamızdı. Kademe baskısının en kötü olduğu durum bu olduğundan, özellikle alçak açılı güneş konumlarıyla test yaptık. En uzak kademe, görüş hacminin çok büyük bir bölümünü kapsar ve gölge ayrıntısı texel yoğunluğuyla belirlenir: $\rho \approx \frac{R^2}{A}$ ($A$ büyüklüğündeki zemin alanına yayılan, $R$ çözünürlüklü bir gölge haritası). Tüm görüş mesafesini tek bir haritayla kaplamak $A$ değerini devasa hâle getirir ve $\rho$ çöker. Kademeler, görüş hacmini bölerek bu sorunu çözer; böylece her bölüm, küçük bir $A$ alanı üzerinde kendi $R\times R$ haritasına sahip olur ve $\rho$ yakından uzağa yaklaşık olarak sabit kalır. Önce iki ve dört kademe arasındaki, ardından 1024 ve 2048 gölge haritası çözünürlüğü arasındaki GPU süresi farkını ölçtük. Sonuç olarak 1024 çözünürlükte üç kademe, hedef donanımımızda 2 ms GPU süresini aşmadan kameraya yakın bölgelerde kabul edilebilir temas gölgeleri sağladı.

Spike 9'u yeni sekmede aç ↗ · Kaynağı görüntüle

Bu aşamanın zor kısmı ürün disiplinini korumaktı. Bazı efektler mükemmel görünse de görsel etkilerine kıyasla kare bütçesinin çok büyük bölümünü tükettikleri için sınırlandırılmaları gerekiyordu.

Kuralımız basitti. Bir özellik, ancak maliyetini ölçülmüş kare süresi verileriyle açıklayabiliyorsa ilerler.

Kulağa bariz geliyor. Ancak herkesin bir sonraki görsel kazanım için heyecanlandığı hızlı prototipleme döngülerinde bu yaklaşım yaygın değil. Bu kuralı en baştan uygulamak, daha sonra clipmap'ler ve hacimsel bölgelerle ilgili mimari kararları çok daha anlaşılır hâle getirdi; çünkü aynı 16 ms için yarışan her özelliğin ayrı ayrı maliyetini zaten biliyorduk.

6. bölümde, geometry clipmap'lerle birlikte ilk büyük arazi mimarisi değişikliğine gidiyoruz.

Bu bölümde değinilen teknolojiler

InstancedMesh ve GPU bitki örtüsü. Three.js'in InstancedMesh sınıfı, aynı geometrinin N kopyasını tek bir draw call ile render eder. Bitki örtüsü için bir yoğunluk haritası (parça başına 32x32), çimen saplarının ve çalı kümelerinin çalışma zamanında dağıtılarak instance buffer'lara yerleştirilmesini sağlar. Rüzgâr animasyonu, kayan bir gürültü dokusu kullanılarak vertex shader içinde çalışır. Büyük ölçekte WebGPU'nun ComputeInstanceCulling özelliği, rasterleştirmeden önce ekran dışındaki ve uzaktaki örnekleri eler; IndirectBatchedMesh ise birden fazla bitki örtüsü türünü, multi-draw indirect ile çizilen tek bir buffer içinde toplar. GPU bitki örtüsü ayıklamayla ilgili arazi rehberimize bakın.

Triplanar eşleme. Standart UV eşlemeli dokular, UV koordinatları sıkıştığı için dik eğimlerde gerilir. Triplanar eşleme, dokuları üç eksenin (X, Y, Z) tamamı boyunca yansıtır ve yüzey normaline göre harmanlar. Uçurum yüzeyleri X veya Z projeksiyonunu alırken (gerilme olmaz), düz zemin Y projeksiyonunu alır. Harmanlama yumuşak ve otomatiktir; UV açılımı gerektirmez. PBR arazilerde aynı harmanlama ağırlıkları albedo, normal, pürüzlülük ve ortam örtme kanallarına uygulanır. Triplanar eşleme ayrıntılarına bakın.

Eğim ve rakım tabanlı malzeme splatting'i. Elle boyanmış splat haritaları yerine malzemeler, arazi özelliklerine göre fragment shader içinde prosedürel olarak atanır. Alçak rakımdaki düz zemine çimen, dik eğimlere kaya, yüksek rakımlara kar (yalnızca birikmeye yetecek kadar düz yüzeylerde), deniz seviyesine yakın bölgelere ise kum atanır. Geçişlerde yumuşak harmanlama için smoothstep kullanılır. Bizim uygulamamızda her arazi parçası, katman başına diffuse ve normal örnekleriyle dört doku katmanını değerlendiriyor; bu da aydınlatmadan önce fragment başına sekiz doku okumasıyla sonuçlanıyor. Eğim ve rakım tabanlı malzeme atamasına bakın.

Kademeli Gölge Haritaları (CSM). CSM, kameranın görüş hacmini 3-4 mesafe aralığına (kademeye) böler. Her kademe, mesafesine uygun bir çözünürlükte güneşin perspektifinden bir gölge haritası render eder. Yakın kademeler yüksek çözünürlüklü gölgeler (ağaçların ve binaların altındaki ayrıntılı temas gölgeleri), uzak kademeler ise daha düşük çözünürlüklü gölgeler (geniş dağ gölgeleri) alır. Arazi shader'ı tüm kademeleri örnekler ve her fragment için uygun olanı seçer. Performans maliyeti: 1024x1024 çözünürlükte 3-4 kademe, gölge haritası render'ına yaklaşık 0,5-1 ms, örneklemeye ise yaklaşık 0,2-0,3 ms ekler. Arazi gölgelerine bakın.

---

12 bölümün 5.'si.
Önceki: Bölüm 4 - Gösterişli araziden önce streaming
Sonraki: Bölüm 6 - Clipmap'ler gidişatı değiştirdi
Seri rehberi: /blog/2026-02-25-open-world-browser-series-guide