Membangun dunia terbuka di browser, bagian 27: Pulau dari noise, permukaan tanah yang tampak nyata

Oleh Oleg Sidorkin, CTO dan Salah Satu Pendiri Cinevva

Baru di sini? Gunakan panduan seri. Panduan ini menjelaskan apa itu spike dan menautkan semua bagiannya.

Bagian 26 menambahkan air ke dunia. Bagian ini membangun daratan di bawahnya, dalam dua tahap yang mencerminkan cara sebuah tempat nyata terbentuk. Spike 54 adalah medannya sendiri: bukan dipahat dengan tangan, melainkan ditumbuhkan dari noise, lalu dilapukkan hingga memiliki drainase dan garis pantai seperti tempat yang benar-benar pernah dialiri air. Spike 55 adalah kulit pada medan tersebut: menyelesaikan masalah yang menggagalkan hampir setiap permukaan tanah prosedural, yaitu tekstur berubin yang tampak berulang. Keduanya bersama-sama menjawab satu pertanyaan: bisakah kreator mendapatkan pulau yang masuk akal dan permukaan tanah yang benar-benar terbaca sebagai tanah tanpa sentuhan seniman? Jawabannya ya, jika Anda meniru resep yang tepat.

Garis pantai yang tidak bisa diberikan oleh noise saja

Buka Spike 54 di tab baru ↗ · Lihat sumber

Heightmap ini mengikuti resep Red Blob Games, yaitu rangkaian transformasi kecil yang masing-masing memperbaiki kelemahan tertentu pada noise mentah. Fractional Brownian motion menjumlahkan beberapa oktaf noise Perlin sehingga medan memiliki bukit-bukit lebar sekaligus detail halus, tetapi FBM biasa tampak lembut dan sejajar dengan grid. Karena itu, titik sampelnya terlebih dahulu diberi domain warping: setiap koordinat digeser oleh medan noise lain, $p^{\prime }=p+\text{noise}(p)\cdot s$, yang membengkokkan punggungan menjadi bentuk organik alih-alih terkunci pada sumbu. Kemudian redistribusi, dengan memangkatkan elevasi menjadi $e^k$, menekan nada tengah sehingga dunia memiliki lembah datar dan puncak tajam, bukan seluruh permukaan berada pada kemiringan landai yang sama. Bagian yang menjadikannya pulau alih-alih perbukitan tak berujung adalah radial falloff: hitung jarak Euklides dari pusat, $d=min(1,\sqrt{n_x^2+n_y^2})$, lalu padukan elevasi menuju $1-d$ sehingga medan turun ke laut di bagian tepi. Medan noise independen kedua menjadi peta kelembapan, yang tidak memengaruhi bentuk tetapi nantinya digunakan dalam tahap bioma.

Itu menghasilkan suatu bentuk, tetapi masih berupa bentuk noise. Tidak ada sungai, lembah yang terkikis air, atau kipas sedimen, karena belum pernah ada sesuatu yang mengalir melintasinya. Solusinya adalah erosi hidraulis, yang di-port dari implementasi berlisensi MIT milik Sebastian Lague. Ribuan tetesan air muncul secara acak dan mengalir menuruni lereng. Masing-masing membawa inersia agar tidak berbelok tajam membentuk sudut siku-siku, mengangkut sedimen ketika bergerak semakin cepat dan mengendapkannya ketika melambat atau menggenang. Brush melingkar yang telah dihitung sebelumnya menyebarkan setiap peristiwa erosi dalam radius kecil sehingga kikisannya halus, bukan goresan selebar satu piksel, sementara penguapan mengakhiri tetesan selama masa hidupnya. Jalankan cukup banyak tetesan dan medan akan menumbuhkan sesuatu yang tidak bisa dipalsukan oleh noise: jaringan drainase yang bertemu, lembah yang semakin lebar ke arah hilir, serta dataran tempat sedimen mengendap.

Erosi di GPU, dan sungai yang tahu tempatnya

Erosi CPU memberikan hasil yang benar tetapi lambat, sehingga spike ini juga mem-port-nya ke compute shader WebGPU. Bagian yang menarik adalah konsekuensi yang dipaksakan oleh atomic GPU. Ketinggian disimpan sebagai i32 fixed-point dengan skala satu juta, karena WGSL tidak memiliki atomic add untuk float, dan satu-satunya cara agar ribuan tetesan dapat mengendapkan serta mengangkat sedimen dari sel yang sama secara paralel tanpa race condition adalah menggunakan atomicAdd dan atomicSub pada integer. Perjalanan bolak-balik fixed-point ini berarti suatu sel terkadang dapat menjadi sedikit negatif akibat tarikan bersamaan yang berat, tetapi hal itu tidak berbahaya dan nilainya dibatasi saat readback. Versi CPU menghitung tabel brush per sel terlebih dahulu, tetapi pada grid ${1001}^2$ tabel tersebut berukuran sekitar 100 MB. Karena itu, port GPU menghitung ulang brush setiap tetesan secara langsung, menukar sedikit komputasi dengan penghematan memori yang besar. Posisi awal tetesan tetap berasal dari CPU melalui generator Mulberry32 agar setiap proses berjalan deterministik.

Dua pass tambahan mengubah medan yang telah terlapukkan menjadi peta yang mudah dibaca. Drainase menggunakan metode akumulasi aliran D8 dari Red Blob: jatuhkan satu unit hujan pada setiap sel, urutkan semua sel berdasarkan elevasi dari tinggi ke rendah, lalu teruskan akumulasi air setiap sel ke satu tetangga terendahnya. Dengan demikian, air menumpuk di sepanjang lembah alami, dan setiap sel yang akumulasinya melewati ambang batas ditandai sebagai sungai. Masalahnya, heightmap yang telah tererosi memiliki cekungan, yaitu depresi lokal tanpa jalur keluar ke tempat yang lebih rendah. Air yang memasuki cekungan hanya akan berhenti dan memutus akumulasi. Karena itu, sebelum drainase dijalankan, pengisian cekungan Planchon-Darboux menaikkan setiap cekungan hingga sedikit di atas tetangga terendahnya, $\text{minNeighbour}+ϵ$, dengan iterasi kurang dari dua puluh pass sampai setiap sel memiliki tempat untuk mengalirkan air. Terakhir, bioma ditetapkan dengan cara Red Blob, yaitu pencarian dua sumbu berdasarkan elevasi dan kelembapan. Sel yang tinggi dan kering menjadi batu, sedangkan sel yang rendah dan basah menjadi rawa, ditambah override berdasarkan kemiringan: permukaan curam selalu dijadikan batu terlepas dari kelembapan, pita garis air menjadi pantai, dan elevasi tertinggi tertutup salju. Hasilnya adalah pulau yang dapat dipahami sekilas, dibuat sepenuhnya dari dua seed noise.

Tile yang terus berulang

Buka Spike 55 di tab baru ↗ · Lihat sumber

Medan memerlukan material yang mencakup area berkilo-kilometer dari tekstur yang lebarnya hanya beberapa meter, dan saat tile diperbesar untuk menutupi tanah, mata langsung menangkap pengulangannya. Spike 55 adalah pengujian A/B terhadap empat mode sampling pada geometri dan pencahayaan yang sama, sehingga satu-satunya variabel adalah cara tekstur dibaca. Baseline-nya adalah plain: satu sampel pada UV yang telah diskalakan, dengan pola pengulangan yang terlihat jelas setiap beberapa meter, dan keberadaannya hanya sebagai acuan yang harus dikalahkan. Layer PBR gratis berasal dari Poly Haven melalui CDN mereka, terdiri atas diffuse, peta ARM yang dipaketkan (ambient occlusion, roughness, metalness), serta normal GL. Semuanya berlisensi CC0 dan dimuat dengan anisotropy 8 serta mipmap.

Tiga mode lainnya menarik karena menggunakan pendekatan berbeda untuk mengatasi pengulangan. Mode hex-linear adalah grid segitiga Heitz-Neyret: hamparkan kisi segitiga miring di atas permukaan, lalu setiap fragmen berada di dalam satu segitiga yang ketiga verteksnya masing-masing mengambil tap dengan offset acak, kemudian dipadukan menggunakan bobot barycentric. Dengan demikian, wilayah yang bersebelahan mengambil sampel dari bagian tekstur yang berbeda dan pola tile berskala besar menghilang. Namun, perpaduan linear biasa dari tiga tap merata-ratakan warnanya di tepi segitiga, meninggalkan pola segitiga yang terlihat, yaitu artefak yang sama persis dengan yang ditemui spike 48. Mode hex-vp adalah perbaikan yang dipublikasikan dalam makalah tahun 2018 yang sama: setelah penjumlahan barycentric, kurangi warna rata-rata tekstur, skalakan ulang dengan kebalikan akar kuadrat dari jumlah bobot yang dikuadratkan agar varians tetap konstan, lalu tambahkan kembali nilai rata-ratanya. Hal ini mempertahankan kontras secara konsisten di seluruh perpaduan sehingga segitiganya menghilang. Itulah sebabnya material melakukan readback 1-kali-1 pada setiap tekstur yang dimuat untuk memperkirakan warna rata-ratanya sejak awal. Mode keempat, iq-untiled, adalah teknik 3 Texture Repetition milik Inigo Quilez: dua tap dengan offset yang dipadukan oleh pola variasi frekuensi rendah, hanya dua sampel alih-alih tiga dan tanpa struktur segitiga sejak awal—opsi ringan yang tetap memberikan hasil baik.

Di atas mode mana pun terdapat proyeksi triplanar opsional, yang memungkinkan material yang sama membungkus tebing tanpa meregang. Alih-alih satu UV, shader mengambil sampel dari tiga proyeksi sumbu dunia: permukaan yang menghadap X membaca bidang YZ, Y membaca ZX, dan Z membaca XY, lalu memadukannya berdasarkan abs(normalWorld) yang dipangkatkan dengan nilai penajaman antara empat dan delapan agar lereng 45 derajat tidak membaurkan ketiga proyeksi menjadi bubur. Pengujian ini memperjelas komprominya: perpaduan heksagonal yang mempertahankan varians unggul dalam kualitas, sedangkan metode dua tap Quilez lebih hemat performa. Keduanya mengalahkan mode plain dengan selisih yang begitu besar sehingga tidak ada kreator yang seharusnya merilis tile plain.

Teknologi yang dirujuk dalam bab ini

Pembuatan heightmap dengan rangkaian resep. Resep Red Blob Games menyusun noise mentah menjadi medan: FBM dengan domain warping ($p^{\prime }=p+\text{noise}(p)\cdot s$) untuk punggungan organik, redistribusi $e^k$ untuk lembah datar dan puncak tajam, serta radial falloff Euklides yang dipadukan menuju $1-d$ untuk menurunkan bagian tepi ke laut dan membentuk pulau. Medan noise kedua menjadi peta kelembapan untuk penetapan bioma. Lihat pembuatan lanskap.

Erosi hidraulis, CPU dan GPU. Model tetesan Sebastian Lague (inersia, kapasitas angkut, brush endapan melingkar yang dihitung sebelumnya, penguapan) mengukir drainase nyata yang tidak dapat dipalsukan oleh noise. Port compute WebGPU menyimpan ketinggian sebagai i32 fixed-point pada skala satu juta agar tetesan dapat menjalankan atomicAdd/atomicSub pada sel yang sama secara paralel, menghitung ulang brush setiap tetesan secara langsung untuk menghindari tabel berukuran ~100 MB pada ${1001}^2$, dan menentukan seed posisi awal dari generator Mulberry32 yang deterministik.

Drainase D8 dengan pengisian cekungan. Akumulasi aliran D8 Red Blob menjatuhkan satu unit hujan per sel, mengurutkan sel berdasarkan elevasi menurun, lalu meneruskan air ke tetangga terendah setiap sel dan menandai sungai di atas ambang batas. Pengisian cekungan Planchon-Darboux terlebih dahulu menaikkan setiap depresi lokal hingga $\text{minNeighbour}+ϵ$ (dengan iterasi kurang dari dua puluh pass) agar air tidak pernah terperangkap dan akumulasi tetap terhubung. Pencarian dua sumbu berdasarkan elevasi dan kelembapan menetapkan bioma, dengan override kemiringan yang memaksakan batu pada tebing, pantai di garis air, dan salju di puncak.

Memecah pengulangan tekstur dengan empat cara. Pada geometri dan pencahayaan yang identik: plain (satu tap, pengulangan tile terlihat jelas), hex-linear (grid segitiga Heitz-Neyret, perpaduan linear meninggalkan pola segitiga), hex-vp (perbaikan pemertahanan varians EGSR 2018 §3.3 yang mengurangi nilai rata-rata, menskalakan ulang dengan inverse-sqrt dari bobot kuadrat, lalu menambahkan kembali nilai rata-rata, sehingga memerlukan readback nilai rata-rata 1×1 per tekstur), dan iq-untiled (teknik dua tap 3 dari Inigo Quilez). Proyeksi triplanar mengambil sampel dari tiga bidang sumbu dunia yang dipadukan menggunakan abs(normalWorld) dengan pangkat 4–8 agar tebing tidak meregang. Pemertahanan varians unggul dalam kualitas, sedangkan dua tap unggul dalam biaya. Lihat material medan.

---

Bagian 27 dari 29. Sebelumnya: Bagian 26 - Tiga cara membuat air Berikutnya: Bagian 28 - Rumput hingga cakrawala, dan tanah yang menyembunyikan dirinya sendiri Panduan seri: /id/blog/2026-02-25-open-world-browser-series-guide