Tarayıcıda açık dünya inşa etmek, bölüm 27: Gürültüden bir ada, zemine benzeyen zemin

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

Burada yeni misiniz? Seri rehberini kullanın. Rehber, spike'ın ne olduğunu açıklıyor ve tüm bölümlere bağlantı veriyor.

Bölüm 26 dünyaya su ekledi. Bu bölüm, gerçek bir yerin oluşumunu yansıtan iki aşamada suyun altındaki karayı inşa ediyor. Spike 54, arazinin kendisi: elle şekillendirilmiyor, gürültüden oluşturuluyor ve ardından suyun gerçekten üzerinden aktığı bir yere ait drenaj sistemine ve kıyı şeridine kavuşana kadar aşındırılıyor. Spike 55 ise bu arazinin yüzeyi: neredeyse tüm prosedürel zeminleri ele veren sorunu, yani döşenen bir dokunun döşenmiş gibi görünmesini çözüyor. İkisi birlikte şu soruyu yanıtlıyor: Bir içerik üreticisi, bir sanatçı ikisine de dokunmadan makul bir ada ve gerçekten zemin gibi görünen bir yüzey elde edebilir mi? Doğru tarifleri kopyalarsanız yanıt evet.

Gürültünün tek başına veremeyeceği bir kıyı şeridi

Spike 54'ü yeni sekmede aç ↗ · Kaynak kodunu görüntüle

Yükseklik haritası, her biri ham gürültüdeki belirli bir kusuru gideren küçük dönüşümler yığını olan Red Blob Games tariflerini izliyor. Kesirli Brown hareketi, birkaç Perlin gürültüsü oktavını toplayarak araziye hem geniş tepeler hem de ince ayrıntılar kazandırıyor; ancak düz FBM yumuşak ve ızgaraya hizalı göründüğü için önce örnekleme noktasına alan bükme uygulanıyor: her koordinatı başka bir gürültü alanıyla kaydırıyorsunuz, $p^{\prime }=p+\text{noise}(p)\cdot s$; bu da sırtları eksenlere kilitli görünmek yerine organik bir biçimde büküyor. Ardından yükseltiyi $e^k$ kuvvetine çıkaran yeniden dağıtım, orta tonları aşağı itiyor; böylece her yer aynı yumuşak eğimde kalmak yerine dünya düz vadilere ve keskin zirvelere kavuşuyor. Araziyi sonsuz tepeler yerine ada yapan parça ise radyal düşüş: merkezden Öklid uzaklığını $d=min(1,\sqrt{n_x^2+n_y^2})$ olarak hesaplıyor ve yükseltiyi $1-d$ yönünde harmanlıyorsunuz; böylece arazi kenarlarda okyanusa doğru alçalıyor. İkinci bir bağımsız gürültü alanı, biçimi etkilemeyen ancak daha sonra biyom adımını besleyen bir nem haritasına dönüşüyor.

Bu size bir biçim veriyor, ancak bu hâlâ bir gürültü biçimi. Ne nehirleri ne suyun oyduğu vadileri ne de tortu yelpazeleri var; çünkü üzerinden henüz hiçbir şey akmadı. Çözüm, Sebastian Lague'ın MIT lisanslı uygulamasından taşınan hidrolik erozyon. Binlerce su damlası rastgele noktalarda oluşup yokuş aşağı yuvarlanıyor. Her biri sert, dik açılı dönüşler yapmamak için atalet taşıyor; hızlandığında tortu topluyor, yavaşladığında veya göllendiğinde bunu bırakıyor. Önceden hesaplanan dairesel bir fırça, her erozyon olayını küçük bir yarıçapa yayarak oyuğu tek piksellik bir çizik yerine pürüzsüz hâle getiriyor; buharlaşma ise kullanım ömrü boyunca damlayı ortadan kaldırıyor. Yeterince damla çalıştırıldığında arazi, gürültünün taklit edemeyeceği özellikler kazanıyor: birleşen drenaj ağları, aşağı akış yönünde genişleyen vadiler ve tortunun çöktüğü düzlükler.

GPU'da erozyon ve nerede olduklarını bilen nehirler

CPU erozyonu doğru ancak yavaş; bu nedenle spike bunu bir WebGPU hesaplama gölgelendiricisine de taşıyor. İlginç olan kısım, GPU atomik işlemlerinin sizi neye zorladığı. Yükseklikler, bir milyon ölçekli sabit noktalı i32 değerleri olarak saklanıyor; çünkü WGSL'de kayan noktalı değerler üzerinde atomik toplama yok ve binlerce damlanın aynı hücreye paralel biçimde, yarış durumlarına yol açmadan tortu bırakıp kaldırabilmesinin tek yolu tamsayılar üzerinde atomicAdd ve atomicSub kullanmak. Sabit noktalı gidiş dönüş, yoğun eşzamanlı sürükleme altında bir hücrenin zaman zaman biraz negatife düşebileceği anlamına geliyor; bu zararsız ve geri okumada sınırlandırılıyor. CPU sürümü her hücre için bir fırça tablosunu önceden hesaplıyor, ancak ${1001}^2$ boyutundaki bir ızgarada bu tablo yaklaşık 100 MB tutuyor. Bu yüzden GPU uyarlaması, az miktarda ek hesaplama karşılığında büyük miktarda bellek tasarrufu yapmak için her damlanın fırçasını anında yeniden hesaplıyor. Damla başlangıç konumları, çalıştırmaların deterministik kalması için hâlâ CPU'daki bir Mulberry32 üretecinden geliyor.

İki ek geçiş, aşınmış araziyi okunabilir bir haritaya dönüştürüyor. Drenaj, Red Blob D8 akış birikimi yöntemini kullanıyor: her hücreye bir birim yağmur bırakıyor, tüm hücreleri yükseltiye göre azalan sırada diziyor ve her hücrenin biriken suyunu tek en alçak komşusuna aktarıyorsunuz. Böylece su doğal vadiler boyunca birikiyor ve birikimi belirli bir eşiği aşan her hücre nehir olarak işaretleniyor. Ancak aşınmış bir yükseklik haritasında çukurlar, yani yokuş aşağı çıkışı olmayan yerel çöküntüler bulunur. Bir çukura giren su orada durur ve birikim zincirini bozar. Bu nedenle drenaj çalıştırılmadan önce Planchon-Darboux çukur doldurma yöntemi, her çukuru en alçak komşusunun hemen üzerine, $\text{minNeighbour}+ϵ$ seviyesine yükseltiyor ve her hücrenin suyu tahliye edebileceği bir yer oluşana kadar yirmiden az geçişle yineliyor. Son olarak biyomlar Red Blob yöntemiyle, yükselti ve nem üzerinden iki eksenli bir aramayla atanıyor. Böylece yüksek ve kuru bir hücre kayaya, alçak ve ıslak bir hücre bataklığa dönüşüyor. Buna eğimi hesaba katan geçersiz kılmalar ekleniyor: dik yüzeyler nemden bağımsız olarak kayaya zorlanıyor, su çizgisi şeridi plaja dönüşüyor ve en yüksek bölgeler karla kaplanıyor. Sonuç, iki gürültü tohumundan uçtan uca üretilmiş ve tek bakışta okunabilen bir ada.

Tekrarlamayı bırakmayan döşeme

Spike 55'i yeni sekmede aç ↗ · Kaynak kodunu görüntüle

Bir arazinin, yalnızca birkaç metre genişliğindeki bir dokuyla kilometrelerce alanı kaplayan bir malzemeye ihtiyacı vardır. Bir döşemeyi zemini kaplayacak biçimde ölçeklediğiniz anda göz, tekrarı fark eder. Spike 55, aynı geometri ve ışıklandırma üzerinde dört örnekleme modunu karşılaştıran bir A/B test düzeneği; dolayısıyla tek değişken dokunun nasıl okunduğu. Temel yöntem plain: ölçeklenmiş UV'den tek bir örnek alıyor, birkaç metrede bir açıkça tekrarlanıyor ve yalnızca aşılması gereken referans olarak bulunuyor. Ücretsiz PBR katmanları Poly Haven'ın CDN'inden geliyor: dağınık renk, paketlenmiş ARM haritası (ortam perdeleme, pürüzlülük, metallik) ve GL normal haritası. Tümü CC0 lisanslı ve anizotropi 8 ile mipmap'ler kullanılarak yükleniyor.

İlginç olan diğer üçü, tekrara farklı biçimlerde saldırıyor. hex-linear modu, Heitz-Neyret üçgen ızgarasıdır: yüzeyin üzerine eğriltilmiş üçgen bir kafes yerleştiriliyor ve her parça, üç köşesinin her birinin rastgele kaydırılmış bir örnek aldığı tek bir üçgenin içinde bulunuyor. Örnekler barisentrik ağırlıklarla harmanlanıyor; böylece komşu bölgeler dokunun farklı kısımlarını örnekliyor ve büyük ölçekli döşeme görünümü dağılıyor. Ancak üç örneğin düz doğrusal harmanı, üçgen kenarlarında renklerinin ortalamasını alıyor. Bu da görünür bir üçgen deseni bırakıyor; Spike 48'in karşılaştığı kusurun aynısı. hex-vp modu, aynı 2018 makalesinde yayımlanan çözüm: barisentrik toplamdan sonra dokunun ortalama rengini çıkarıyor, varyansı sabit tutmak için karesi alınmış ağırlıklar toplamının ters kareköküyle yeniden ölçekliyor ve ardından ortalamayı geri ekliyor. Bu yöntem harman boyunca kontrastı sabit tutarak üçgenleri ortadan kaldırıyor. Bu nedenle malzeme, başlangıçta ortalama rengini tahmin etmek için yüklenen her dokudan 1'e 1 bir geri okuma yapıyor. Dördüncü mod iq-untiled, Inigo Quilez'in Texture Repetition tekniği 3: düşük frekanslı bir varyasyon deseniyle harmanlanan iki kaydırılmış örnek; üç yerine yalnızca iki örnek kullanıyor ve en başta üçgen yapısı içermiyor. Dayanıklılığını koruyan ucuz seçenek bu.

Her modun üzerinde isteğe bağlı triplanar projeksiyon bulunuyor; aynı malzemenin gerilmeden bir uçurumu kaplamasını sağlayan da bu. Gölgelendirici, tek bir UV yerine üç dünya ekseni projeksiyonunu örnekliyor: X'e bakan yüzeyler YZ düzlemini, Y'ye bakanlar ZX'i, Z'ye bakanlar XY'yi okuyor. Ardından bunları, 45 derecelik bir eğimin üç projeksiyonu da bulanık bir karışıma dönüştürmemesi için abs(normalWorld) değerini dört ile sekiz arasında bir keskinleştirme kuvvetine yükselterek harmanlıyor. Test düzeneği ödünleşimi açıkça gösteriyor: varyansı koruyan altıgen harman kalite açısından kazanırken, Quilez'in iki örnekli yöntemi performansı gözeten seçenek oluyor. İkisi de düz yöntemi o kadar büyük farkla geçiyor ki hiçbir içerik üreticisi düz döşemeyi yayımlamamalı.

Bu bölümde başvurulan teknolojiler

Tariflerin üst üste uygulandığı yükseklik haritası üretimi. Red Blob Games tarifleri, ham gürültüyü araziye dönüştürmek için işlemleri birleştiriyor: organik sırtlar için alan bükmeli FBM ($p^{\prime }=p+\text{noise}(p)\cdot s$), düz vadiler ve keskin zirveler için $e^k$ yeniden dağıtımı ve kenarları okyanusa indirip bir ada oluşturmak için $1-d$ yönünde harmanlanan Öklid tabanlı radyal düşüş. İkinci gürültü alanı, biyom atamasında kullanılan nem haritasıdır. Bkz. peyzaj üretimi.

CPU ve GPU'da hidrolik erozyon. Sebastian Lague'ın damla modeli (atalet, taşıma kapasitesi, önceden hesaplanan dairesel birikim fırçası ve buharlaşma), gürültünün taklit edemeyeceği gerçek drenaj kanalları açıyor. WebGPU hesaplama uyarlaması, damlaların aynı hücre üzerinde paralel biçimde atomicAdd/atomicSub kullanabilmesi için yükseklikleri bir milyon ölçekli sabit noktalı i32 değerleri olarak saklıyor; ${1001}^2$ boyutunda yaklaşık 100 MB'lık bir tablodan kaçınmak için her damlanın fırçasını anında yeniden hesaplıyor ve başlangıç konumlarını deterministik bir Mulberry32 üretecinden alıyor.

Çukur doldurmalı D8 drenajı. Red Blob D8 akış birikimi, her hücreye bir birim yağmur bırakıyor, hücreleri azalan yükseltiye göre sıralıyor ve suyu her hücrenin en alçak komşusuna geçirerek eşiğin üzerindeki birikimleri nehir olarak işaretliyor. Planchon-Darboux çukur doldurma yöntemi önce her yerel çöküntüyü $\text{minNeighbour}+ϵ$ seviyesine yükseltiyor (yirmiden az geçişle yineleyerek); böylece su hiçbir zaman hapsolmuyor ve birikim bağlantılı kalıyor. Yükselti ve neme göre iki eksenli bir arama biyomları atarken, eğim geçersiz kılmaları uçurumları kayaya, su çizgisini plaja ve zirveleri kara zorluyor.

Doku döşemesini dört farklı yöntemle kırmak. Aynı geometri ve ışıklandırma üzerinde: plain (tek örnek, açıkça tekrarlanıyor), hex-linear (Heitz-Neyret üçgen ızgarası; doğrusal harman bir üçgen deseni bırakıyor), hex-vp (ortalamayı çıkaran, karesi alınmış ağırlıkların ters kareköküyle yeniden ölçekleyen ve ortalamayı geri ekleyen EGSR 2018 §3.3 varyans koruma çözümü; her doku için 1×1 ortalama geri okuması gerekiyor) ve iq-untiled (Inigo Quilez'in iki örnekli tekniği 3). Triplanar projeksiyon, uçurumların gerilmemesi için üç dünya ekseni düzlemini abs(normalWorld) değerinin 4-8 arasındaki bir kuvvetiyle harmanlayarak örnekliyor. Varyansı koruyan yöntem kalitede, iki örnekli yöntem maliyette kazanıyor. Bkz. arazi malzemeleri.

---

29 bölümün 27.'si. Önceki: Bölüm 26 - Su yapmanın üç yolu Sonraki: Bölüm 28 - Ufka kadar uzanan çimenler ve kendini gizleyen zemin Seri rehberi: /blog/2026-02-25-open-world-browser-series-guide