Pembuatan Lanskap dengan LOD Dinamis dan Streaming untuk Dunia Terbuka di Browser
Heightmap dengan noise Perlin adalah titik awal standar untuk medan prosedural. Tumpuk beberapa oktaf fBm, terapkan gradasi warna, dan Anda mendapatkan sesuatu yang tampak seperti medan. Setiap tutorial berhenti di sini. Namun, lanskap nyata tidak tampak seperti noise yang ditumpuk. Lanskap nyata memiliki lembah sungai yang dipahat oleh air, permukaan tebing yang dibentuk oleh retakan tegangan, serta gua dan lengkungan yang terbentuk oleh erosi selama jutaan tahun. Lanskap nyata memiliki tekstur yang saling berkorelasi (rumput di tanah datar, batu di lereng curam, salju di atas batas pepohonan) yang muncul dari proses fisik yang sama dengan proses yang membentuk geometrinya.
Panduan ini membahas apa yang hadir setelah noise: metode pembuatan berbasis fisika, representasi volumetrik yang mendukung gua dan bagian menjorok, sintesis medan neural berbasis difusi, serta pipeline LOD dan streaming berbasis GPU yang diperlukan untuk merender semuanya di tab browser pada 60 fps.
Semua yang dibahas di sini ditujukan untuk batasan spesifik kami: dunia terbuka multipemain yang berjalan di WebGL 2 / WebGPU, di-streaming melalui jaringan, dan dapat diedit oleh kreator.
Mengapa Heightmap Tidak Cukup
Heightmap menyimpan satu nilai ketinggian untuk setiap titik kisi. Ini adalah fungsi 2D: dengan masukan (x, z), hasilkan y. Representasi ini ringkas, ramah GPU, dan cepat dirender. Namun, representasi ini memiliki keterbatasan mendasar yang penting bagi dunia kreator.
Tidak ada gua atau bagian menjorok. Heightmap tidak dapat merepresentasikan medan saat satu titik memiliki dua ketinggian berbeda. Gua, lengkungan, tebing menjorok, terowongan, dan pulau terapung semuanya mustahil dibuat. Karena alasan inilah Minecraft, No Man's Sky, dan Deep Rock Galactic memerlukan medan volumetrik.
Tidak ada fitur vertikal. Permukaan tebing vertikal dalam heightmap merupakan lereng yang nyaris tak terhingga, sehingga menyebabkan peregangan tekstur ekstrem dan artefak tabrakan. Tebing nyata memiliki fitur horizontal (tepian, celah) yang tidak dapat direpresentasikan oleh heightmap.
Noise tampak seperti noise. Bahkan dengan 8 oktaf fBm dan domain warping, medan tetap memiliki kesan sintetis. Medan tersebut tidak memiliki struktur terarah seperti geologi nyata: garis punggungan, jaringan drainase, endapan sedimen, dan lipatan tektonik. Pola-pola ini muncul dari proses fisik, bukan dari fungsi noise.
Pengeditan oleh kreator terbatas. Jika kreator hanya dapat mengubah ketinggian, mereka tidak dapat menggali terowongan, membuat gua, atau membangun ruang bawah tanah. Untuk dunia yang benar-benar dapat dibentuk oleh kreator, representasi medan perlu mendukung pengurangan maupun penambahan.
Solusinya bukan meninggalkan heightmap sepenuhnya. Heightmap tetap menjadi representasi terbaik untuk 90% medan yang berupa permukaan sederhana. Solusinya adalah pendekatan hibrida: medan dasar heightmap dengan lapisan volumetrik di lokasi yang memerlukan geometri kompleks, pembuatan berbasis fisika untuk bentang alam realistis, dan sintesis neural untuk menghasilkan keragaman yang tidak dapat dicapai oleh noise.
Jawaban Singkat: Apa yang Sebenarnya Akan Kami Bangun
Sebelum membahasnya secara mendalam, berikut kerangka pengambilan keputusannya. Bagian selanjutnya dari artikel ini menjelaskan setiap komponennya.
Representasi medan
Gunakan sistem heightmap + SDF hibrida. Heightmap mencakup seluruh dunia (murah, ringkas, teruji). Volume SDF hanya tersedia di tempat yang memerlukan gua, bagian menjorok, atau fitur yang dipahat kreator (mungkin 5–10% chunk). Dengan demikian, 90% dunia tetap memiliki biaya setara heightmap sambil mendukung geometri arbitrer di tempat yang diperlukan.
Pipeline pembuatan
Jalankan di sisi server sebagai proses berantai:
- Terrain Diffusion (atau MESA untuk prompt teks) menghasilkan heightmap dasar dari seed. Ini menggantikan noise dengan bentang alam realistis secara geologis yang dilatih menggunakan data elevasi nyata.
- Erosi analitis (hukum daya aliran) menyempurnakan heightmap dengan jaringan sungai dan garis punggungan dalam hitungan milidetik.
- TerraFusion atau Geodiffussr menghasilkan tekstur yang saling berkorelasi dari heightmap (atau gunakan aturan prosedural berbasis kemiringan/ketinggian sebagai fallback WebGL 2).
- Simulasi ekosistem menghasilkan peta kepadatan vegetasi.
- Erosi bergaya Arenite menghasilkan volume SDF untuk permukaan tebing, lengkungan, dan gua di tempat yang sesuai dengan karakter medannya.
- Bagi menjadi chunk, kompres, lalu unggah ke CDN. Rata-rata chunk: 2–8 KB. Chunk kompleks dengan data volumetrik: 20–100 KB.
Kreator berinteraksi dengan pipeline ini dengan menyesuaikan parameter ("lebih basah", "lebih bergunung", "tambahkan gua"), membuat sketsa maksud desain, atau memahat langsung menggunakan kuas dan alat SDF.
Strategi LOD
| Kemampuan browser | LOD heightmap | LOD volumetrik | LOD vegetasi |
|---|---|---|---|
| WebGPU | Quadtree berbasis GPU (CDLOD) dengan compute culling + indirect draw | SDF multiresolusi dengan compute marching cubes + Transvoxel | ComputeInstanceCulling dengan indirect draw |
| WebGL 2 | Geometry clipmap dengan pembaruan ring di sisi CPU | Mesh yang dibuat sebelumnya pada 2–3 tingkat LOD, lalu disimpan dalam cache | CPU frustum cull, InstancedMesh |
Kedua jalur menggunakan geomorphing dalam vertex shader agar transisi bebas dari efek popping. Keduanya menggunakan impostor billboard untuk vegetasi di kejauhan. Jalur WebGPU lebih cepat (anggaran medan 3,5 ms), tetapi jalur WebGL 2 tetap layak (6,5 ms).
Streaming
Pemuatan progresif: geometri medan terlebih dahulu (<100 ms), tekstur kedua (<300 ms), vegetasi ketiga (<1 dtk), data volumetrik keempat (❤️ dtk). Lakukan prefetch berdasarkan kecepatan pemain. Anggaran memori: total 256 MB untuk medan.
Pengeditan
Kuas heightmap untuk memahat permukaan (menaikkan, menurunkan, menghaluskan, mengikis). Primitif SDF untuk pengeditan volumetrik (memahat gua, menambahkan lengkungan). Keduanya langsung diterapkan secara lokal, disinkronkan ke server dalam 100–300 ms, dan disiarkan kepada pemain lain melalui pembaruan delta.
Urutan pembangunan
Bulan 1–2: Medan heightmap dengan geometry clipmap. Hanya WebGL 2. Streaming dari CDN. Material prosedural berbasis kemiringan/ketinggian. Ini menampilkan medan di setiap browser. Gunakan noise + erosi analitis untuk pembuatannya (Terrain Diffusion dapat menyusul).
Bulan 3–4: Vegetasi dan atmosfer. Rumput dan pepohonan dengan instancing GPU berdasarkan peta kepadatan. Langit prosedural dengan siklus siang/malam. Kabut atmosfer. Cascaded shadow map. Dunia mulai terasa seperti sebuah tempat yang nyata.
Bulan 5–6: Pengeditan oleh kreator. Alat kuas heightmap. Sinkronisasi berbasis delta untuk pengeditan medan multipemain. Penguncian spasial untuk pengeditan serentak. Pada tahap inilah kreator mulai membentuk dunia.
Bulan 7–9: Medan volumetrik dan jalur WebGPU. Lapisan SDF untuk gua dan bagian menjorok. Marching cubes dalam compute WebGPU. Transvoxel untuk batas LOD. Alat pemahatan SDF. Ini membuka toolkit kreasi lengkap.
Bulan 10–12: Pembuatan neural dan penyempurnaan. Terrain Diffusion atau MESA untuk heightmap dasar. TerraFusion/Geodiffussr untuk tekstur. Noise fasor untuk detail mikro. Hex-tiling untuk mencegah pengulangan. Virtual texturing. Laplacian blending. Kualitas medan mencapai tingkat produksi.
Urutan ini berarti sesuatu yang dapat dimainkan tersedia setelah 2 bulan, sesuatu yang indah setelah 4 bulan, sesuatu yang dapat diedit setelah 6 bulan, dan sesuatu yang mutakhir setelah 12 bulan.
Bagian selanjutnya dari artikel ini membahas riset yang mendasari setiap keputusan.
Representasi Medan di Luar Heightmap
Signed Distance Field (SDF)
Signed distance field menyimpan jarak ke permukaan terdekat pada setiap titik dalam ruang 3D. Nilai positif berada di luar, nilai negatif berada di dalam, dan persilangan nol merupakan permukaannya. SDF merepresentasikan bentuk 3D arbitrer, termasuk gua, lengkungan, dan geometri terapung.
Untuk merender SDF sebagai mesh, Anda menjalankan marching cubes (atau variannya) untuk mengekstrak persilangan nol sebagai segitiga. Resolusi mesh bergantung pada resolusi kisi: kisi SDF 256x256x256 menghasilkan medan yang mencakup sekitar satu chunk pada resolusi 1 meter.
Implementasi browser: Marching cubes WebGPU berjalan sepenuhnya di GPU melalui compute shader. Implementasi webgpu-marching-cubes buatan Will Usher memproses kisi 256^3 secara real-time di browser, dengan performa setara aplikasi native. Algoritma ini sangat mudah diparalelkan (setiap sel diproses secara independen), sehingga ideal untuk compute GPU.
@compute @workgroup_size(4, 4, 4)
fn marchingCubes(@builtin(global_invocation_id) id: vec3<u32>) {
let sdfValues = sampleSDF(id);
let caseIndex = classifyCell(sdfValues);
if (caseIndex == 0u || caseIndex == 255u) { return; }
let triangles = lookupTriangulation(caseIndex);
let vertices = interpolateEdges(sdfValues, triangles);
appendToMeshBuffer(vertices);
}Biaya penyimpanan: SDF 256^3 dengan presisi terkuantisasi 8-bit memerlukan 16 MB tanpa kompresi. Namun, sebagian besar volume kosong (jauh dari permukaan). Run-length encoding atau penyimpanan sparse octree biasanya menguranginya menjadi 100–500 KB per chunk, sebanding dengan medan heightmap.
Pengeditan: Medan SDF secara alami dapat diedit. Penambahan material adalah operasi min() pada distance field. Penghapusan material (penggalian) adalah operasi max() dengan bentuk yang dinegasikan. Pencampuran halus antar-bentuk menggunakan smoothMin(). Operasi ini berjalan dalam compute shader dengan kecepatan interaktif.
Dual Contouring
Marching cubes menempatkan vertex pada tepi kisi, sehingga menghasilkan permukaan halus tetapi menghilangkan fitur tajam (tepi tebing, sudut batu). Dual contouring menempatkan satu vertex per sel pada posisi yang paling baik merepresentasikan permukaan di dalam sel tersebut, sehingga mempertahankan tepi dan sudut tajam.
Algoritma ini memerlukan nilai distance field dan normal permukaan (gradien SDF) pada setiap titik kisi. Algoritma tersebut menyelesaikan masalah least-squares kecil per sel untuk menemukan posisi vertex yang optimal. Hasilnya adalah mesh yang menangkap medan halus sekaligus fitur bebatuan yang tajam.
Neural Dual Contouring (Chen dkk., 2022, arXiv:2202.01999) mengganti solver least-squares dengan jaringan neural yang memprediksi posisi vertex dan persilangan tepi yang optimal. Metode ini menghasilkan akurasi rekonstruksi permukaan dan pelestarian fitur yang lebih baik, terutama untuk formasi batuan alami yang kompleks.
Algoritma Transvoxel
Masalah tersulit dalam medan volumetrik bukanlah menghasilkan mesh, melainkan transisi LOD. Ketika chunk beresolusi tinggi berdampingan dengan chunk beresolusi rendah, mesh keduanya tidak sejajar pada batasnya sehingga menciptakan retakan yang terlihat.
Algoritma Transvoxel, yang dirancang oleh Eric Lengyel (transvoxel.org), menyelesaikannya dengan menyisipkan sel transisi khusus di sepanjang batas antartingkat resolusi. Sel-sel ini menjembatani perbedaan resolusi menggunakan segitiga tambahan yang cocok secara presisi dengan kedua sisi. Algoritma ini menyederhanakan masalah batas yang kompleks menjadi 73 kelas ekuivalensi (dibandingkan sekitar 1,2 juta kasus untuk pendekatan brute-force).
Transvoxel dirancang secara khusus untuk aplikasi real-time yang data voxel-nya berubah secara dinamis (pengeditan oleh kreator, erosi, penambangan). Algoritma ini bebas paten dan telah digunakan dalam game yang dirilis (Space Engineers, Astroneer). Untuk dunia browser dengan medan volumetrik yang dapat diedit, Transvoxel adalah solusi LOD yang tepat.
Hibrida: Dasar Heightmap + Lapisan Volumetrik
Pendekatan praktis untuk dunia terbuka di browser adalah sistem berlapis:
Lapisan 1: Medan heightmap mencakup seluruh dunia. Ini merupakan representasi murah dan ringkas untuk perbukitan, lembah, dan pegunungan. Data di-streaming sebagai patch heightmap kecil per chunk (masing-masing 2–4 KB). Rendering menggunakan geometry clipmap dengan biaya GPU konstan.
Lapisan 2: Lapisan volumetrik hanya tersedia dalam chunk yang memerlukan geometri kompleks. Gua, permukaan tebing, lengkungan, terowongan yang dipahat kreator, dan ruang bawah tanah disimpan sebagai volume SDF sparse. Hanya chunk yang memiliki data volumetrik yang menanggung biaya penyimpanan SDF dan marching cubes.
Lapisan 3: Modifikasi kreator disimpan sebagai pengeditan SDF di atas lapisan dasar. Kreator yang menggali terowongan menyimpan bentuk SDF terowongan tersebut. Sistem rendering menggabungkan permukaan heightmap dengan pengurangan dan penambahan volumetrik untuk menghasilkan mesh akhir.
Sistem hibrida ini hampir tidak menambah biaya untuk medan datar (hanya heightmap) dan hanya meningkat skalanya di tempat yang memiliki kompleksitas. Dalam dunia pada umumnya, mungkin hanya 5–10% chunk yang memerlukan data volumetrik.
Pembuatan Medan yang Akurat secara Fisik
Noise menghasilkan medan acak. Fisika menghasilkan medan realistis. Perbedaannya terlihat jelas: medan noise tidak memiliki struktur (permukaannya bergelombang acak di mana-mana), sedangkan medan fisik memiliki jaringan sungai, garis punggungan, kipas aluvial, dan lapisan tebing yang terbentuk dari erosi dan aktivitas tektonik.
Erosi Hidraulis: Fondasinya
Air mengalir menuruni lereng, membawa sedimen, lalu mengendapkannya ketika alirannya melambat. Satu proses ini, yang disimulasikan selama jutaan tahun virtual, mengubah noise tanpa ciri menjadi medan dengan fitur geologis yang dapat dikenali. Pendekatan berbasis partikel menjatuhkan tetesan hujan simulasi ke peta ketinggian. Setiap tetesan mengalir menuruni lereng (mengikuti gradien), mengikis material berdasarkan kecepatan dan kemiringan, membawa sedimen sebagai muatan terlarut, lalu mengendapkan sedimen ketika kecepatannya menurun atau kapasitasnya terlampaui. Setelah 200.000-500.000 partikel, medan membentuk:
- Lembah sungai yang mengikuti jalur aliran air maksimum
- Garis punggungan yang memisahkan daerah aliran sungai
- Kipas aluvial di tempat lembah curam terbuka menuju dataran rata
- Lembah berbentuk V di medan pegunungan dan berbentuk U di medan glasial
Implementasi GPU: Simulasi partikel dapat diparalelkan. Setiap partikel bersifat independen (aproksimasi ini mengabaikan interaksi antarpartikel, yang tidak menjadi masalah untuk erosi). Shader komputasi WebGPU memproses 10.000 partikel per frame pada 60fps, menyelesaikan 200.000 partikel dalam waktu nyata sekitar 3 detik.
Implementasi sumber terbuka Sebastian Lague (GitHub) adalah titik awal standar. Implementasi tersebut berjalan pada satu thread dalam C# dan memproses peta ketinggian 1024x1024 dalam beberapa detik. Versi GPU 50-100x lebih cepat.
Erosi Termal
Air bukan satu-satunya kekuatan erosi. Perubahan suhu menyebabkan batuan retak dan hancur (pelapukan termal). Ketika kemiringan antara dua titik medan melampaui sudut diam suatu material, material jatuh dari titik yang lebih tinggi ke titik yang lebih rendah. Proses ini menghasilkan:
- Lereng talus di dasar tebing (tumpukan batuan yang jatuh)
- Garis punggungan yang melunak seiring waktu
- Profil yang bergantung pada material (batuan keras mempertahankan lereng curam, sedangkan tanah lunak runtuh menjadi lereng landai)
Erosi termal lebih sederhana daripada erosi hidraulis. Ini merupakan operasi lokal: untuk setiap sel, bandingkan perbedaan ketinggiannya dengan sel-sel tetangga. Jika kemiringan melampaui ambang batas, pindahkan material menuruni lereng. Proses ini berjalan sebagai satu pass shader komputasi per iterasi dan mencapai konvergensi dalam 50-100 iterasi.
Menggabungkan erosi hidraulis dan termal menghasilkan medan yang tampak jauh lebih alami daripada jika hanya menggunakan salah satunya. Air mengukir lembah; erosi termal melunakkan punggungan di antaranya dan mengisi dasar lembah dengan material runtuhan.
Hukum Daya Aliran: Erosi Analitis
Penelitian terbaru menawarkan alternatif untuk simulasi berbasis partikel. Hukum daya aliran (persamaan geomorfologi yang menghubungkan laju erosi dengan luas drainase dan kemiringan) dapat diselesaikan secara analitis alih-alih disimulasikan secara iteratif.
Cordonnier dkk. (2024, HAL) menggabungkan hukum daya aliran analitis dengan proses longsor dan difusi lereng bukit. Hasilnya adalah pembuatan medan yang berlandaskan fisika, tetapi berjalan sebagai fungsi matematis alih-alih simulasi temporal. Anda memasukkan peta ketinggian berbasis noise beserta parameter (tingkat curah hujan, kekerasan batuan, laju pengangkatan tektonik), lalu memperoleh medan yang tererosi dalam hitungan milidetik.
Pendekatan analitis ini ideal untuk dunia berbasis browser karena hanya berjalan sekali di sisi server saat pembuatan medan, bukan secara iteratif. Parameternya dapat disesuaikan oleh kreator ("buat wilayah ini lebih bergunung-gunung" menyesuaikan laju pengangkatan; "buat lebih basah" meningkatkan curah hujan dan memperdalam lembah).
Arenite: Erosi Multifisika (SIGGRAPH 2025)
Arenite (Halaman proyek) adalah simulator batu pasir berbasis fisika yang menghasilkan lengkungan, ceruk, hoodoo, dan bukit meja dari kondisi awal yang sederhana. Pengguna melukis peta ketererosian (lapisan batuan lunak vs. batuan keras) dan vegetasi, lalu sistem menyimulasikan:
- Distribusi tegangan melalui kolom batuan
- Erosi angin yang secara selektif menghilangkan material lunak yang terekspos
- Erosi fluvial akibat aliran air
- Pengendapan partikel yang menciptakan formasi baru
Implementasi GPU berjalan dalam waktu kurang dari 5 menit untuk formasi kompleks pada GPU desktop. Meskipun terlalu lambat untuk penggunaan browser secara real-time, ini cukup cepat untuk pembuatan di sisi server. Kreator dapat menentukan permukaan tebing dengan lapisan batuan lunak/keras dan memperoleh formasi lengkungan yang realistis dalam hitungan menit.
Keluarannya berupa medan voxel 3D, yang langsung cocok dengan pipeline SDF/marching cubes kita.
Erosi Fleksibel pada Berbagai Representasi
Makalah tahun 2024 dari IRIT-STORM ("Flexible Terrain Erosion," Springer) memecahkan masalah praktis: sebagian besar metode erosi hanya berfungsi pada heightfield. Jika medan Anda menggunakan voxel, SDF, atau material berlapis, Anda memerlukan kode erosi terpisah untuk masing-masing representasi.
Metode erosi fleksibel menguraikan erosi menjadi dua proses independen: perubahan medan (menghilangkan material dari permukaan) dan pengangkutan material (memindahkan sedimen dengan partikel yang diatur oleh fisika dasar). Setiap partikel memiliki ukuran, densitas, restitusi, dan kapasitas sedimen yang dapat dikonfigurasi. Medan vektor opsional mengendalikan pergerakan partikel untuk menghasilkan dinamika fluida yang realistis.
Karena partikel berinteraksi dengan medan melalui antarmuka perubahan material terpadu, simulasi yang sama dapat digunakan pada heightfield, kisi voxel, permukaan implisit, dan tumpukan material berlapis. Untuk medan hibrida kita (dasar peta ketinggian + overlay SDF), ini berarti satu sistem erosi menangani kedua representasi. Simulasi partikel berjalan secara paralel pada GPU.
Jaringan Sungai dan Daerah Aliran Sungai
Erosi mengukir sungai, tetapi menghasilkan jaringan sungai yang meyakinkan memerlukan lebih dari sekadar mengalirkan air menuruni lereng. Dua pendekatan berikut menghasilkan hasil yang lebih baik:
Pembuatan yang mendahulukan drainase (Amit Patel, Red Blob Games, Proyek) membangun jaringan sungai sebelum menetapkan elevasi. Mulailah dengan sebuah graf (Voronoi atau mesh segitiga). Klasifikasikan sisi sebagai punggungan (tidak ada aliran), jalur masuk (air mengalir masuk), atau saluran keluar (air mengalir keluar). Pendekatan ini menciptakan hierarki drainase yang realistis, tempat sungai menyatu dari anak-anak sungai kecil menjadi aliran air utama, dengan mengikuti sistem klasifikasi Rosgen untuk berbagai jenis sungai (saluran berjalin di medan datar, ngarai sempit di pegunungan).
Akumulasi aliran melacak jumlah air yang melewati setiap sel medan. Jatuhkan hujan simulasi secara merata, alirkan ke bawah, lalu hitung jumlah lintasan pada setiap sel. Sel dengan akumulasi tinggi menjadi saluran sungai. Sel dengan akumulasi sedang menjadi aliran musiman. Peta akumulasi juga mengendalikan intensitas erosi (lebih banyak air = lebih banyak erosi) dan distribusi vegetasi (tepian sungai lebih basah sehingga mendukung spesies tumbuhan yang berbeda).
Untuk dunia buatan kreator, jaringan sungai dibuat di sisi server saat pembuatan medan dan disimpan sebagai peta arah aliran 2D beserta peta akumulasi air untuk setiap chunk. Klien browser menggunakan peta-peta ini untuk merender permukaan air (bidang datar pada ketinggian yang tepat di saluran sungai) dan mengendalikan distribusi vegetasi (lebih rimbun di dekat air).
Pembuatan Pesisir dan Garis Pantai
Pesisir adalah tempat medan bertemu air, dan memiliki ciri khas yang tidak dihasilkan oleh erosi standar: tebing laut, endapan pantai, dataran pasang surut, tunggul laut, dan pelataran abrasi.
NEWTS1.0 (2024, MIT) memodelkan evolusi garis pantai berbatu menggunakan dua mekanisme erosi: kemunduran seragam (laju erosi konstan) dan erosi yang digerakkan gelombang (laju erosi sebagai fungsi jarak fetch dan sudut datang gelombang). Model ini berjalan selama ribuan tahun simulasi dan menghasilkan tanjung, teluk, tunggul laut, serta lengkungan yang sesuai dengan geomorfologi pesisir dunia nyata.
Untuk dunia berbasis browser, fitur pesisir akan dibuat terlebih dahulu saat penciptaan dunia. Parameternya (arah gelombang dominan, variasi kekerasan batuan di sepanjang pesisir) memungkinkan kreator mengendalikan karakter garis pantai mereka. Pengaturan "fjord Norwegia" menghasilkan ceruk dengan sisi curam. Pengaturan "atol tropis" menghasilkan pesisir berpasir rendah dengan laguna.
Pembuatan Gua dan Area Bawah Tanah
Gua memerlukan medan yang sepenuhnya volumetrik (SDF atau voxel) karena peta ketinggian tidak dapat merepresentasikan ruang tertutup. Pendekatan pembuatannya meliputi:
Penerapan ambang batas noise 3D adalah metode paling sederhana. Ambil sampel noise Perlin atau simplex 3D pada setiap voxel. Nilai di bawah ambang batas bersifat padat, sedangkan nilai di atasnya kosong. Sesuaikan ambang batas dan parameter noise untuk mengendalikan diameter terowongan, konektivitas, dan ukuran ruang. Metode ini menghasilkan sistem gua organik menyerupai cacing seperti di Minecraft.
PLUME (Procedural Layer Underground Modeling Engine) (2024, arXiv:2508.20926) menghasilkan lingkungan gua dan tabung lava yang realistis menggunakan aturan prosedural berlapis. Awalnya dibuat untuk penelitian eksplorasi ruang angkasa (menyimulasikan tabung lava Mars), sistem ini menghasilkan struktur bawah tanah yang masuk akal secara geologis, lengkap dengan stalaktit, kolom, dan sistem ruangan.
Terowongan L-system dengan pengukiran metaball menggunakan tata bahasa L-system untuk menumbuhkan jalur terowongan bercabang menembus medan, lalu mengukir geometri terowongan sebenarnya menggunakan permukaan implisit metaball. Metaball menghasilkan dinding gua yang halus dan membulat. Beberapa pass dengan parameter berbeda menciptakan lorong utama, ruang samping, dan terowongan penghubung yang sempit.
Untuk dunia buatan kreator, pembuatan gua terhubung dengan sistem overlay SDF. Medan dasar berupa peta ketinggian (tanpa gua). Ketika suatu chunk memerlukan gua (baik dari pembuatan prosedural maupun desain kreator), volume SDF dibuat untuk mengurangi geometri gua dari medan dasar. Pipeline marching cubes merender permukaan gabungannya.
Vegetasi sebagai Proses Fisik
Vegetasi dalam game biasanya ditempatkan secara prosedural dengan aturan seperti "rumput di bawah 2000m, pohon di bawah 1500m, salju di atas 3000m." Cara ini cepat, tetapi menghasilkan distribusi yang seragam dan tidak realistis.
Simulasi vegetasi yang berlandaskan fisika memodelkan setiap tumbuhan sebagai organisme yang bersaing memperebutkan sumber daya (cahaya, air, unsur hara tanah). Simulasinya:
- Benih disebarkan ke seluruh medan
- Setiap tumbuhan tumbuh berdasarkan sumber daya yang tersedia (air mengalir dari simulasi erosi hidraulis, sinar matahari bergantung pada kemiringan dan arah hadap lereng, sedangkan kedalaman tanah bergantung pada riwayat erosi)
- Tumbuhan bersaing: pepohonan menaungi rumput, dan kanopi rapat mencegah tumbuhnya bibit baru
- Seiring waktu simulasi, bioma muncul secara alami: hutan di lembah yang berair, vegetasi jarang di punggungan yang tersapu angin, dan lahan basah di tempat air menggenang
Simulasi ekosistem Deussen dkk. (Makalah) menghasilkan distribusi hutan yang sesuai dengan pola ekologi dunia nyata. Simulasi berjalan pada kisi 2D (satu sel per chunk medan) dan menghasilkan peta densitas serta penetapan spesies yang digunakan sistem rendering untuk penempatan vegetasi dengan instancing GPU.
Untuk dunia berbasis browser, simulasi vegetasi berjalan sekali saat pembuatan dunia (di sisi server). Keluarannya berupa sekumpulan peta densitas per chunk: densitas pohon, densitas rumput, densitas bunga, dan densitas serpihan batuan. Klien browser menggunakan peta-peta ini bersama instancing GPU untuk menyebarkan vegetasi saat runtime.
Sintesis Medan Berbasis Difusi
Bidang ini berkembang paling cepat. Model difusi (teknologi yang sama di balik Stable Diffusion untuk gambar) mulai diterapkan pada pembuatan medan, dan hasilnya jauh lebih realistis daripada metode berbasis noise.
Terrain Diffusion: Penerus Perlin Noise
Terrain Diffusion (Goslin, 2025, arXiv:2512.08309, Halaman proyek) merupakan kemajuan paling signifikan dalam pembuatan medan prosedural sejak Perlin noise pada 1985. Karya ini kemudian diterima di SIGGRAPH 2026, dan judul arXiv kanonisnya kini adalah "InfiniteDiffusion: Bridging Learned Fidelity and Procedural Utility for Open-World Terrain Generation." Algoritma InfiniteDiffusion dan framework Terrain Diffusion merupakan dua bagian dari makalah yang sama.
Inovasi utamanya adalah InfiniteDiffusion, algoritma yang memformulasikan ulang sampling difusi untuk domain tak terbatas. Model difusi tradisional menghasilkan keluaran berukuran tetap (misalnya, peta ketinggian 512x512). InfiniteDiffusion menghasilkan medan dengan bentang tak terbatas yang memiliki:
- Konsistensi seed: Seed yang sama selalu menghasilkan medan yang sama, seperti Perlin noise
- Akses acak dalam waktu konstan: Anda dapat meminta ketinggian di titik mana pun tanpa perlu membuat wilayah tetangganya terlebih dahulu
- Tanpa artefak batas: Pembuatan tanpa batas tanpa sambungan atau pengulangan yang terlihat
Sistem ini menggunakan tumpukan hierarkis model difusi. Tingkat teratas menangkap fitur berskala planet (benua, rangkaian pegunungan). Setiap tingkat berikutnya menambahkan detail yang lebih halus (puncak individual, lembah, kekasaran berskala kecil). Enkode Laplacian yang ringkas menstabilkan keluaran pada rentang dinamis yang sangat besar, mulai dari permukaan laut hingga puncak Himalaya.
Performa: Kecepatan pembuatan mampu mengimbangi eksplorasi secara real-time. Makalah tersebut melaporkan bahwa bahkan pada kondisi ekstrem teoretis berupa kecepatan orbit (sekitar 7.700 m/s), sintesis medan berjalan 9x lebih cepat daripada penjelajahan pada GPU konsumen. Proyek ini menyertakan integrasi Minecraft yang mendemonstrasikan sintesis medan secara real-time. Mengapa ini penting bagi kita: Terrain Diffusion menghasilkan lanskap yang dilatih dengan data elevasi dunia nyata (topografi Bumi yang sebenarnya). Keluarannya memiliki jaringan sungai, rangkaian pegunungan, fitur pesisir, dan struktur dataran tinggi yang berasal dari data pelatihan, bukan dari parameter derau yang disetel secara manual. Kreator dapat mengatakan "hasilkan medan seperti Dataran Tinggi Skotlandia", lalu model difusi akan menghasilkan medan dengan karakter geologis yang sesuai.
Model berjalan di sisi server selama pembuatan dunia. Keluarannya berupa heightmap standar yang dialirkan ke browser seperti data medan lainnya. Metode pembuatannya tidak terlihat oleh klien.
TerraFusion: Geometri dan Tekstur Terpadu
TerraFusion (2025, arXiv:2505.04050) melangkah lebih jauh dengan menghasilkan heightmap dan tekstur medan secara terpadu. Gagasan utamanya: geometri medan dan tampilan permukaan saling berkorelasi (dasar sungai berpasir, permukaan tebing berbatu, area datar berumput). Menghasilkannya secara terpisah akan menimbulkan ketidakselarasan.
TerraFusion menggunakan model difusi laten dengan VAE terpisah untuk heightmap dan tekstur, yang dilatih untuk memodelkan distribusi gabungan keduanya. Sistem ini mendukung:
- Pembuatan tanpa kondisi: Medan acak yang masuk akal dengan tekstur yang selaras
- Pembuatan berbasis sketsa: Kreator menggambar peta kasar (lembah di sini, punggung bukit di sana, tebing di sepanjang sisi ini), lalu model menghasilkan geometri dan tekstur mendetail yang sesuai dengan sketsa
Untuk dunia buatan kreator, kemampuan ini sangat berguna. Kreator membuat sketsa tata letak umum lahannya, lalu sistem melengkapinya dengan medan yang masuk akal secara geologis beserta material permukaan yang sesuai. Tidak perlu mengecat heightmap, membuat texture splatting, atau menetapkan material secara manual.
MESA: Teks ke Medan
MESA (2025, arXiv:2504.07210, Lokakarya CVPR 2025) menghasilkan medan dari deskripsi teks. Model ini dilatih menggunakan data penginderaan jauh global dari program Copernicus sehingga mengenal setiap jenis lanskap daratan.
Perintah seperti "sebuah fyord dengan dinding granit curam yang terbuka ke garis pantai berbatu" menghasilkan heightmap dengan struktur geologis yang sesuai. "Lahan pertanian bergelombang dengan perbukitan landai dan lembah sungai yang lebar" menghasilkan sesuatu yang sama sekali berbeda.
MESA memperkenalkan kumpulan data ekstensi Major TOM Core-DEM, yang memasangkan citra satelit dengan model elevasi digital dari seluruh dunia. Data pelatihan ini memberikan pemahaman kepada model tentang tampilan medan nyata pada setiap skala dan di setiap zona iklim.
Geodiffussr: Pemberian Tekstur Medan Berpanduan Teks
Geodiffussr (2025, arXiv:2511.23029) menerima heightmap yang sudah ada dan menghasilkan tekstur berdasarkan deskripsi teks sambil tetap mengikuti data elevasi. "Hutan musim gugur" menghasilkan dedaunan jingga dan keemasan pada lereng sedang, dengan batuan terbuka pada permukaan yang curam. "Pesisir tropis" menghasilkan vegetasi palem di dataran rendah dengan pasir koral di permukaan laut.
Sistem ini menggunakan agregasi konten multiskala untuk memastikan penetapan tekstur mengikuti elevasi: salju hanya muncul di atas ketinggian yang masuk akal secara fisik, fitur perairan berada di cekungan, dan vegetasi menipis seiring bertambahnya ketinggian.
Untuk dunia buatan kreator, ini berarti tekstur medan dapat dibuat ulang dari perintah teks tanpa mengubah geometrinya. Kreator membentuk medan yang diinginkan, lalu mendeskripsikan suasananya ("gurun vulkanis gelap" atau "hutan beriklim sedang yang rimbun"), dan sistem akan menghasilkan material permukaan yang sesuai.
LOD Dinamis untuk Medan di Browser
Merender medan luas dengan resolusi penuh di semua tempat mustahil dilakukan di browser. Dunia berukuran 4 km x 4 km dengan resolusi 1 meter memiliki 16 juta vertex hanya untuk medannya. LOD dinamis menguranginya menjadi jumlah vertex yang konstan dan dapat dikelola, berapa pun ukuran dunianya.
Geometry Clipmap
Geometry clipmap (Losasso dan Hoppe, SIGGRAPH 2004, Makalah) tetap menjadi standar utama untuk LOD medan berbasis heightmap. Gagasannya: render medan sebagai serangkaian cincin persegi konsentris yang berpusat pada kamera. Setiap cincin mencakup area dua kali lebih luas daripada cincin sebelumnya, tetapi dengan separuh resolusinya.
Dekat dengan kamera (cincin terdalam): resolusi penuh, jarak grid 1 meter. Satu cincin ke luar: jarak 2 meter, mencakup area 4x lebih luas. Cincin berikutnya: jarak 4 meter, mencakup area 16x lebih luas. Begitu seterusnya untuk 6-8 tingkat, hingga cincin terluar mencakup seluruh jarak pandang.
Jumlah total vertex bersifat konstan: kira-kira N^2 * tingkat, dengan N sebagai lebar cincin dalam satuan vertex. Dengan N=256 dan 8 tingkat, totalnya sekitar 500 ribu vertex. Beban rendering tetap sama baik dunia memiliki lebar 1 km maupun 100 km.
Implementasi di browser: Geometry clipmap dapat digunakan di WebGL 2 karena hanya memerlukan pembaruan vertex buffer standar (tanpa compute shader). Saat kamera bergerak, CPU memperbarui data heightmap untuk setiap cincin dengan mengambil sampel medan pada resolusi yang sesuai. Vertex shader membaca nilai ketinggian dari tekstur dan menggeser grid datar.
Morphing: Transisi antartingkat LOD menghasilkan efek "popping" yang terlihat jika ditangani secara naif. Geomorphing (dijelaskan secara khusus di bagian berikutnya) memadukan posisi vertex antartingkat melalui zona transisi di dalam vertex shader, sehingga menghasilkan transisi mulus tanpa popping dan tanpa biaya draw call tambahan.
CDLOD: Clipmap Adaptif Berbasis Quadtree
CDLOD (Strugar, 2014, Makalah) menyempurnakan geometry clipmap dengan menggunakan quadtree sebagai pengganti cincin konsentris tetap. Quadtree menyesuaikan diri dengan medan: area datar menggunakan node kasar, sedangkan area yang sangat mendetail (tebing, punggung bukit) dibagi lebih halus.
Hal ini penting untuk dunia buatan kreator karena setiap chunk memiliki tingkat kerumitan berbeda. Padang rumput datar hanya memerlukan resolusi minimal. Wilayah pegunungan dengan tebing dan gua memerlukan detail maksimum. CDLOD mengalokasikan resolusi ke tempat yang benar-benar membutuhkannya.
Traversal quadtree di sisi CPU bersifat ringan (beberapa ratus node) dan menentukan patch medan mana yang perlu digambar serta pada resolusi berapa. GPU merender setiap patch sebagai grid terinstansiasi dengan uniform LOD per patch.
Concurrent Binary Tree: Teselasi Berskala Planet
Concurrent Binary Tree (CBT) adalah struktur data yang ramah GPU untuk teselasi medan adaptif, yang dipresentasikan oleh Benyoub dan Dupuy (Intel, HPG 2024, Makalah, GitHub).
Gagasan utamanya: representasikan medan sebagai binary tree dengan setiap node berupa segitiga. Pembagian adaptif memecah segitiga yang dekat dengan kamera dan menggabungkan segitiga yang jauh. Binary tree seluruhnya berada di memori GPU sebagai array 1D (binary heap), sedangkan operasi pembagian/penggabungan dijalankan sebagai compute shader.
Makalah tahun 2024 tersebut memperluas CBT dari domain heightmap persegi ke mesh poligon arbitrer. Artinya, Anda dapat melakukan teselasi pada bola (untuk rendering planet) atau base mesh arbitrer (untuk dunia game dengan batas nonpersegi panjang). Peningkatan utamanya: menggunakan CBT sebagai pengelola pool memori alih-alih pengodean implisit memungkinkan tingkat pembagian yang jauh lebih tinggi.
Performa: teselasi medan berskala planet dalam waktu kurang dari 0,2 md pada perangkat keras kelas konsol. Algoritmanya menskalakan secara linear terhadap jumlah prosesor. Untuk WebGPU, teknologi ini menyediakan jalur menuju rendering medan berskala planet di browser, meskipun kompleksitas implementasinya tinggi.
LOD Berbasis GPU dengan WebGPU
WebGPU memungkinkan pipeline medan yang sepenuhnya digerakkan GPU sehingga CPU tidak perlu terlibat dalam pengambilan keputusan LOD:
Compute pass 1: Frustum dan occlusion culling. Compute shader menguji bounding box setiap patch medan terhadap frustum tampilan dan occlusion buffer (depth buffer dari frame sebelumnya yang telah di-downsample). Patch yang tidak terlihat dibuang sepenuhnya.
Compute pass 2: Pemilihan LOD. Untuk patch yang terlihat, hitung ukurannya dalam screen space dan pilih tingkat LOD yang sesuai. Tulis tingkat LOD dan ID patch ke indirect draw buffer.
Compute pass 3: Pembuatan mesh (untuk medan volumetrik). Untuk chunk yang memiliki data SDF, jalankan marching cubes guna menghasilkan mesh pada resolusi LOD yang dipilih.
Indirect draw. Satu panggilan
drawIndexedIndirect()merender semua patch medan. GPU memutuskan semuanya: apa yang digambar, pada resolusi berapa, dan dalam urutan apa.
Pipeline ini memiliki biaya CPU konstan (menjalankan compute shader dan indirect draw call), berapa pun ukuran atau kompleksitas dunia. GPU menangani semua keputusan per patch.
@compute @workgroup_size(64)
fn lodSelection(@builtin(global_invocation_id) id: vec3<u32>) {
let patchIdx = id.x;
let bounds = patchBounds[patchIdx];
if (!frustumTest(bounds, viewProjection)) { return; }
if (occlusionTest(bounds, depthPyramid) == OCCLUDED) { return; }
let screenSize = projectedSize(bounds, viewProjection, screenDimensions);
let lod = clamp(u32(log2(maxScreenSize / screenSize)), 0u, MAX_LOD);
let drawIdx = atomicAdd(&drawCount, 1u);
drawArgs[drawIdx] = DrawArgs(patchIdx, lod, indexCount[lod], indexOffset[lod]);
}Geomorphing: Transisi LOD Tanpa Popping
Artefak visual terbesar pada LOD medan adalah popping: vertex mendadak berpindah ke posisi baru saat sebuah patch beralih tingkat LOD. Geomorphing menghilangkan masalah ini dengan menginterpolasi posisi vertex secara mulus antartingkat LOD melalui zona transisi.
Implementasinya seluruhnya berada di vertex shader. Setiap vertex menyimpan posisi LOD saat ini sekaligus posisi LOD berikutnya yang lebih kasar. Saat jarak kamera melewati ambang transisi, faktor morph memadukan keduanya:
float morphFactor = smoothstep(lodNear, lodFar, distanceToCamera);
float morphedHeight = mix(fineLodHeight, coarseLodHeight, morphFactor);
gl_Position = viewProjection * vec4(worldPos.x, morphedHeight, worldPos.z, 1.0);Makalah geometry clipmap Hoppe (GPU Gems 2, Bab 2) menjelaskan implementasi lengkap untuk cincin clipmap. Zona morph adalah 20% bagian terluar dari setiap cincin. Di dalam zona ini, vertex secara mulus menyatu menuju resolusi cincin berikutnya. Efek visualnya: geometri medan "melebur" di antara tingkat detail alih-alih berubah secara mendadak. Pada kecepatan kamera normal, transisinya tidak terlihat.
Pemaduan dalam image space (Scherzer dkk., Makalah) merupakan alternatif yang memadukan gambar hasil rendering dari dua tingkat LOD dalam screen space. Metode ini menangani perbedaan LOD yang lebih ekstrem (misalnya transisi mesh ke billboard), tetapi memerlukan render pass tambahan untuk zona transisi.
Culling Vegetasi Berbasis GPU
Vegetasi (pohon, rumput, bebatuan) sering kali menjadi sumber draw call terbesar dalam dunia terbuka. Pendekatan naif menggambar setiap instance vegetasi pada setiap frame. Culling berbasis GPU, yang kini tersedia di Three.js melalui WebGPU, menghapus instance yang tidak terlihat sebelum mencapai rasterizer.
ComputeInstanceCulling milik Three.js (Dokumentasi) menyediakan frustum culling dan LOD culling untuk instanced mesh, dengan peningkatan performa 10-100x pada jumlah instance yang besar. Pipeline-nya:
- Compute shader membaca semua bounding sphere instance
- Menguji masing-masing terhadap frustum kamera (pengujian 6 bidang)
- Menerapkan LOD berbasis jarak: instance yang melewati ambang batas beralih ke detail lebih rendah atau di-cull sepenuhnya
- Instance yang lolos dipadatkan ke dalam buffer dan digambar melalui
drawIndirectCPU tidak melakukan pekerjaan per instans sama sekali. Setelah penyiapan awal, biayanya hanya satu dispatch komputasi ditambah satu indirect draw call per jenis vegetasi, berapa pun jumlah instansnya.
Untuk vegetasi yang lebih lebat, IndirectBatchedMesh milik Three.js (Dokumentasi) mengemas beberapa jenis geometri (pohon, semak, batu) ke dalam satu buffer dan menggambarnya dengan multi-draw indirect. Hanya satu draw call untuk seluruh vegetasi dalam sebuah chunk.
Jika digabungkan dengan penyebaran berbasis peta kepadatan dari sistem vegetasi kami, artinya: peta kepadatan menghasilkan 50.000 posisi helai rumput dalam compute shader, tahap culling menghilangkan 70% yang berada di luar layar atau terlalu jauh, dan satu indirect draw call merender 15.000 helai yang tersisa. Total biaya CPU: dapat diabaikan.
LOD untuk Medan Volumetrik
Medan volumetrik (SDF + marching cubes) memerlukan sistem LOD tersendiri karena mesh-nya dihasilkan, bukan dibuat sebelumnya. Pendekatannya:
Penyimpanan SDF multiresolusi. Simpan SDF pada beberapa resolusi dalam hierarki mirip mipmap. Level 0 memiliki resolusi penuh (voksel 1 meter). Level 1 menggunakan voksel 2 meter (data 8x lebih sedikit). Level 2 menggunakan voksel 4 meter. Pada setiap level, SDF di-downsample dengan mengambil jarak absolut minimum.
Marching cubes yang dipilih berdasarkan LOD. Jalankan marching cubes pada level SDF yang sesuai dengan LOD yang diinginkan. Chunk jarak dekat menggunakan level 0. Chunk yang jauh menggunakan level 2 atau 3. Algoritma Transvoxel menangani batas di antara level yang berbeda.
Caching. Mesh yang dihasilkan disimpan dalam cache hingga SDF berubah (karena pengeditan kreator) atau level LOD berubah (kamera berpindah cukup jauh). Untuk medan statis, mesh dibuat sekali lalu digunakan kembali.
Arsitektur Streaming untuk Medan
Format Data Chunk
Setiap chunk medan (64x64 meter) dialirkan sebagai paket biner ringkas:
ChunkPacket {
header: {
chunkX: i16, chunkZ: i16,
version: u32,
flags: u8 // hasHeightmap | hasVolumetric | hasVegetation
}
heightmap: {
resolution: u8, // 65x65 for full, 33x33 for half, 17x17 for quarter
quantizedHeights: u16[resolution * resolution], // delta-encoded, zlib compressed
splatMap: u8[4 * resolution * resolution] // RGBA blend weights, LZ4 compressed
}
volumetric?: { // only present if flags.hasVolumetric
sdfResolution: u8, // typically 32 or 64
sparseOctree: bytes // run-length encoded sparse SDF
}
vegetation?: { // only present if flags.hasVegetation
treeDensityMap: u8[16 * 16], // 4m resolution density grid
grassDensityMap: u8[32 * 32], // 2m resolution density grid
rockDensityMap: u8[16 * 16]
}
creatorObjects: {
count: u16,
objects: PlacedObject[] // assetId + transform + properties, ~40 bytes each
}
}Ukuran umum:
- Chunk yang hanya berisi heightmap (medan datar): 2–4 KB setelah dikompresi
- Heightmap + vegetasi: 4–8 KB
- Heightmap + volumetrik + vegetasi (chunk kompleks): 20–100 KB
- Area 5x5 dengan detail penuh: total 50–500 KB
Pemuatan Chunk Progresif
Chunk dimuat berdasarkan urutan prioritas yang ditentukan oleh jarak, arah pergerakan, dan jenis data:
Prioritas 1 (segera, <100 md): Geometri heightmap untuk chunk yang akan dimasuki pemain. Permukaan medan muncul terlebih dahulu. Bahkan pada resolusi terendah (17x17 per chunk), permukaannya sudah tersedia.
Prioritas 2 (cepat, <300 md): Splat map dan tekstur medan. Permukaan mendapatkan warna.
Prioritas 3 (streaming, <1 dtk): Peningkatan ke heightmap beresolusi penuh. Peta kepadatan vegetasi. GPU instancing menghasilkan pohon dan rumput.
Prioritas 4 (latar belakang, ❤️ dtk): Data SDF volumetrik untuk chunk yang memiliki gua atau tonjolan menggantung. Marching cubes menghasilkan mesh di dalam Web Worker, lalu mentransfer buffer ke thread utama.
Prioritas 5 (lazy, <10 dtk): Objek yang ditempatkan kreator. Tekstur beresolusi tinggi untuk struktur. Objek detail seperti bunga, batu kecil, dan puing-puing.
Pengambilan Awal Prediktif
Jangan menunggu pemain memasuki sebuah chunk sebelum memuatnya. Prediksi arah tujuan mereka berdasarkan kecepatan, lalu muat area di depan:
- Kecepatan berjalan (5 km/jam): Ambil lebih awal 2 chunk di depan (128 m). Dengan latensi broadband umum, ini memberikan waktu pendahuluan 200–400 md.
- Berlari/berkendara (15 km/jam): Ambil lebih awal 4 chunk di depan. Cincin pemuatan bergeser mengikuti arah kecepatan.
- Terbang/perjalanan cepat: Jeda rendering selama transisi. Alirkan chunk tujuan dengan prioritas tertinggi. Lanjutkan rendering ketika data yang tersedia sudah cukup untuk frame pertama.
Sistem pengambilan awal melacak chunk yang ada dalam cache, yang sedang dalam proses pengiriman (sudah diminta tetapi belum tiba), dan yang diperlukan. Antrean prioritas mengurutkan permintaan tertunda berdasarkan urgensi. Batalkan permintaan untuk chunk yang sudah dijauhi pemain.
Anggaran Memori dan Eviksi
Sebuah tab browser mendapatkan 2–4 GB di desktop. Sistem medan perlu menggunakan hanya sebagian dari jumlah tersebut (sisanya untuk rendering, fisika, jaringan, dan heap JavaScript).
Target anggaran: 256 MB untuk seluruh data medan.
Dengan ukuran chunk umum kami:
- Chunk detail penuh dalam cache: ~100 (area 10x10), masing-masing 5–100 KB = 5–10 MB untuk data mentah
- Geometri medan GPU: ~50 MB (vertex buffer dan index buffer untuk medan yang terlihat)
- Tekstur medan: ~100 MB (dikompresi dengan KTX2 dan dikemas dalam atlas)
- Buffer instans vegetasi: ~50 MB (posisi, rotasi, dan skala untuk GPU instancing)
- Volume SDF dan mesh marching cubes dalam cache: ~50 MB
Chunk di luar jangkauan pandang dikeluarkan dari memori GPU terlebih dahulu (tekstur, vertex buffer), lalu dari cache CPU. Data heightmap mentah dikeluarkan paling akhir karena paling murah untuk disimpan dan paling penting agar tersedia ketika pemain berbalik arah.
Transisi Bioma dan Anti-Tiling
Batas Bioma yang Mulus
Bentang alam nyata tidak memiliki batas tegas di antara bioma. Hutan tidak berhenti pada sebuah garis lalu langsung berubah menjadi gurun. Ada gradasi: hutan lebat menipis menjadi pepohonan yang tersebar, lalu semak belukar, kemudian vegetasi gurun yang jarang. Jika ini diterapkan dengan benar, dunia akan terasa berkesinambungan, bukan seperti susunan petak.
AutoBiomes (Kötter dkk., Makalah) menggabungkan pembuatan medan prosedural dengan simulasi iklim yang disederhanakan. Suhu, kelembapan, dan elevasi menentukan jenis bioma pada setiap titik. Di antara bioma, bobot material dan kepadatan vegetasi diinterpolasi sepanjang zona transisi (biasanya selebar 50–100 meter). Lebar transisi berbeda untuk setiap pasangan bioma: transisi hutan ke padang rumput lebar dan bertahap, sedangkan transisi tebing ke air sempit dan mendadak.
Untuk dunia buatan kreator, penetapan bioma dijalankan pada grid kasar (satu sampel bioma per area 16x16 meter). Shader medan membaca nilai bioma untuk fragmen saat ini dan tetangganya, menginterpolasi bobot material di zona transisi, lalu memadukan tekstur sesuai hasilnya. Penyebaran vegetasi menggunakan nilai kepadatan terinterpolasi yang sama, sehingga kepadatan pohon berkurang secara bertahap di tepi hutan.
Kontrol kreator: izinkan kreator mengecat penggantian bioma pada petak mereka. Sistem menghasilkan bioma bawaan berdasarkan karakteristik medan, tetapi kreator dapat menggantinya. Cat "rawa" pada area dataran rendah, lalu material akan berubah menjadi air keruh, lumut, dan pepohonan mati. Peta cat bioma adalah grid ID bioma 16x16 per chunk (256 byte) yang menggantikan penetapan prosedural.
Hex-Tiling: Menghilangkan Pengulangan Tekstur
Artefak visual yang paling umum dalam rendering medan adalah pengulangan tekstur. Tekstur rumput berukuran 1 meter yang diulang pada padang rumput selebar 100 meter menghasilkan pola grid yang terlihat. Dua teknik dapat mengatasinya:
Hex-tiling (Mikkelsen, Demo) mengganti grid pengulangan berbentuk persegi dengan grid heksagonal. Setiap petak heksagonal mengambil sampel tekstur dengan offset dan rotasi acak. Batas heksagonal dipadukan untuk menyembunyikan sambungan. Hasilnya adalah permukaan yang tampak acak secara merata, bukan seperti tekstur berulang. Biaya: sekitar 3 sampel tekstur tambahan per fragmen. Teknik ini banyak digunakan dalam gim produksi dan dapat berjalan di shader fragmen apa pun.
Pemfilteran tekstur stokastik (Pharr dkk., NVIDIA, 2024, Makalah) menerapkan pemfilteran setelah shading, bukan sebelumnya, dengan menggunakan sampling stokastik. Galat dari sampling stokastik sangat kecil dan dapat ditangani dengan baik oleh denoising spasiotemporal. Teknik ini menghasilkan pemfilteran yang lebih akurat dan dapat digunakan dengan tekstur terkompresi atau sparse. Untuk medan, teknik ini menghilangkan artefak pengulangan sekaligus artefak pemfilteran yang terkadang muncul akibat hex-tiling pada area transisi.
Untuk dunia berbasis browser, hex-tiling adalah pilihan praktis (dapat digunakan dalam shader apa pun). Pemfilteran stokastik memerlukan infrastruktur lebih banyak, tetapi menghasilkan kualitas lebih baik jika denoising temporal tersedia (seperti pada jalur WebGPU dengan TAA).
Sistem Material Medan
Pemetaan Triplanar
Tekstur dengan pemetaan UV standar mengalami peregangan parah pada lereng curam karena koordinat UV terkompresi. Pemetaan triplanar memproyeksikan tekstur sepanjang ketiga sumbu (X, Y, Z) dan memadukannya berdasarkan normal permukaan:
vec3 blending = abs(normal);
blending = normalize(max(blending, 0.00001));
blending /= (blending.x + blending.y + blending.z);
vec4 xaxis = texture(material, worldPos.yz * scale);
vec4 yaxis = texture(material, worldPos.xz * scale);
vec4 zaxis = texture(material, worldPos.xy * scale);
vec4 color = xaxis * blending.x + yaxis * blending.y + zaxis * blending.z;Permukaan tebing mendapatkan proyeksi X atau Z (tanpa peregangan). Tanah datar mendapatkan proyeksi Y. Pemaduannya mulus dan otomatis. Tidak memerlukan UV unwrapping.
Babylon.js memiliki Material TriPlanar bawaan. Three.js memerlukan shader khusus, tetapi implementasinya hanya sekitar 30 baris GLSL.
Untuk medan PBR, terapkan pemetaan triplanar ke semua kanal: albedo, normal, roughness, dan ambient occlusion. Bobot pemaduan yang sama diterapkan ke setiap kanal.
Penetapan Material Berdasarkan Kemiringan dan Ketinggian
Alih-alih mengecat splat map secara manual, tetapkan material secara prosedural berdasarkan karakteristik medan:
float slope = acos(dot(normal, vec3(0, 1, 0)));
float altitude = worldPos.y;
float grassWeight = smoothstep(0.3, 0.0, slope) * smoothstep(2000.0, 1500.0, altitude);
float rockWeight = smoothstep(0.2, 0.5, slope);
float snowWeight = smoothstep(2500.0, 3000.0, altitude) * smoothstep(0.4, 0.1, slope);
float sandWeight = smoothstep(5.0, 0.0, altitude) * smoothstep(0.15, 0.0, slope);Tanah datar pada ketinggian rendah mendapatkan rumput. Lereng curam mendapatkan batu. Ketinggian tinggi mendapatkan salju (tetapi hanya pada permukaan yang cukup datar agar salju dapat menumpuk). Area di dekat permukaan laut mendapatkan pasir. Transisinya mulus dan didasarkan pada kondisi fisik.
Untuk dunia buatan kreator, tampilkan ambang ketinggian dan zona pemaduan sebagai parameter yang dapat dicat per chunk. Kreator dapat menaikkan atau menurunkan garis pepohonan, memperluas cakupan salju, atau mengubah bukit berumput menjadi gurun pasir dengan menyesuaikan aturan material untuk petak mereka.
Pemaduan Tekstur Laplacian yang Ramah GPU
Pemaduan tekstur standar (interpolasi linear antar-lapisan) menghasilkan sambungan yang terlihat atau hasil pudar dengan kontras rendah. Pemaduan piramida Laplacian mengatasi masalah ini, tetapi secara tradisional memerlukan prakomputasi yang mahal.
Wronski (NVIDIA, 2025, JCGT) menyajikan varian ramah GPU yang bekerja dalam shader waktu nyata tanpa prakomputasi dan tanpa memori tambahan. Teknik ini menggunakan rangkaian mipmap standar sebagai pendekatan piramida Laplacian: ambil sampel tekstur pada level mip saat ini dan level yang lebih kasar, hitung selisihnya (Laplacian), lalu padukan kontribusi Laplacian dari setiap lapisan.
Hasilnya mempertahankan fitur lokal yang tajam (helai rumput individual, retakan batu) sekaligus berpadu mulus pada skala yang lebih besar. Biayanya adalah beberapa pengambilan sampel tekstur tambahan per fragmen. Untuk medan yang memadukan 4 atau lebih lapisan material per piksel, teknik ini menghasilkan kualitas yang jauh lebih baik daripada pemaduan linear, terutama pada transisi antara rumput, batu, dan pasir.
Noise Phasor untuk Detail Erosi
Medan standar sering terlihat datar dari jarak dekat karena simulasi erosi bekerja pada resolusi heightmap (grid 1 meter). Medan nyata memiliki pola erosi skala halus (alur kecil, parit, dan retakan akibat pelapukan) pada skala sentimeter.
Grenier dkk. (2024, CGF) menggunakan noise phasor untuk menambahkan detail mikro medan secara waktu nyata. Noise phasor menyintesis pola terstruktur dengan menentukan medan fase stokastik yang dimasukkan ke fungsi periodik. Saat diterapkan pada medan, teknik ini menciptakan pola erosi yang bervariasi secara spasial dan dapat:
- Menggabungkan alur sempit menjadi parit yang lebih besar pada berbagai skala
- Secara otomatis sejajar dengan kemiringan medan (pola erosi mengikuti garis jatuh)
- Mencapai amplifikasi hingga 32x (menambahkan detail pada 32x resolusi heightmap)
- Berjalan sepenuhnya dalam shader fragmen dengan frame rate interaktif
Untuk dunia berbasis browser, noise phasor berjalan dalam shader medan sebagai lapisan detail. Heightmap menyediakan bentuk skala besar. Noise phasor menambahkan erosi mikro yang meyakinkan dalam shader fragmen tanpa meningkatkan kompleksitas geometri. Parameternya (frekuensi pola, amplitudo, orientasi) dapat berbeda untuk setiap bioma: alur dalam pada batu terbuka, riak lembut pada bukit pasir, dan tekstur kasar seperti kulit kayu pada lumpur kering.
Tekstur Virtual untuk Medan
Pada skala besar, atlas tekstur medan menjadi sulit dikelola. Dunia berukuran 4 km x 4 km dengan 1 texel per sentimeter memerlukan tekstur berukuran 400.000 x 400.000 piksel. Jelas mustahil.
Tekstur virtual (juga disebut megatexture, dari Rage karya id Software) mengatasi masalah ini dengan memperlakukan tekstur medan sebagai struktur berhalaman. Tekstur lengkap ada secara konseptual, tetapi hanya petak yang terlihat di layar yang dimuat ke memori GPU. Alur pemrosesannya:
- Tahap umpan balik: Render medan dengan shader yang menghasilkan petak tekstur yang dibutuhkan setiap piksel (ID petak dan level mip). Baca kembali data ini ke CPU (atau proses dengan compute shader).
- Pemuatan petak: Muat petak yang diminta dari CDN atau hasilkan secara prosedural dari data splat map.
- Tekstur indireksi: Tekstur kecil memetakan koordinat petak virtual ke koordinat petak fisik dalam atlas tekstur.
- Tahap render: Shader medan membaca tekstur indireksi untuk menemukan petak fisik yang tepat, lalu mengambil sampel tekstur material dari atlas.
Compute shader WebGPU dapat menangani analisis umpan balik dan pengelolaan tabel halaman sepenuhnya di GPU. CPU hanya mengelola I/O petak.
Hasilnya: medan dengan tekstur unik pada resolusi apa pun tanpa ledakan penggunaan memori tekstur. Petak yang jauh dari kamera dimuat pada resolusi rendah. Petak jarak dekat dimuat pada resolusi tinggi. Total penggunaan memori tetap berada dalam anggaran tetap (biasanya atlas tekstur sebesar 128–256 MB).
Efek Medan Dinamis
Genangan dan Kebasahan
Hujan tidak sekadar turun. Air hujan terakumulasi. Di cekungan, air membentuk genangan. Pada permukaan, air menciptakan kilau basah. Di lereng curam, air mengalir turun. Simulasi ini membuat cuaca terasa menyatu dengan medan, bukan sekadar lapisan visual.
Pendekatan berbasis shader ini tidak menyimulasikan dinamika fluida. Pendekatan ini menggunakan heightmap medan untuk menentukan lokasi air menggenang:
float concavity = heightCenter * 4.0 - heightLeft - heightRight - heightUp - heightDown;
float puddleDepth = max(0.0, concavity * rainIntensity - evaporationRate * timeSinceRain);
float wetness = smoothstep(0.0, 0.02, puddleDepth);
vec3 wetColor = baseColor * 0.7;
float wetRoughness = baseRoughness * 0.3;
vec3 finalColor = mix(baseColor, wetColor, wetness);
float finalRoughness = mix(baseRoughness, wetRoughness, wetness);Area cekung (Laplacian negatif dari heightmap) menampung air. Semakin dalam cekungannya, semakin besar genangannya. Permukaan basah menjadi lebih gelap dan lebih reflektif (kekasaran lebih rendah). Efek ini memudar seiring waktu setelah hujan berhenti.
Untuk refleksi genangan penuh, tambahkan tahap refleksi planar pada permukaan genangan. Atau gunakan refleksi ruang layar (SSR), yang lebih ringan dan sudah tersedia dalam rangkaian pascapemrosesan Three.js maupun Babylon.js.
Tetes hujan pada permukaan genangan menggunakan persamaan gelombang 2D sederhana dalam tekstur umpan balik (Saurel, 2026, Blog). Setiap tetes hujan menciptakan riak yang merambat ke luar dan mereda. Tekstur gelombang memodulasi normal map genangan, sehingga menghasilkan pola riak yang meyakinkan pada 60 fps.
Jejak Kaki dan Deformasi Medan
Saat pemain berjalan di medan lunak (pasir, salju, lumpur), jejak kaki memperkuat kesan kehadiran fisik. Tekniknya: pertahankan tekstur deformasi kecil untuk setiap chunk (64x64 piksel = 4 KB) yang menyimpan offset ketinggian. Saat karakter menginjak medan lunak, cetakkan bentuk jejak kaki ke tekstur deformasi.
Vertex shader medan membaca tekstur deformasi dan mengurangi ketinggian dengan nilai offset tersebut. Fragment shader medan menggelapkan area jejak kaki (tanah yang tertekan lebih gelap) dan meningkatkan kekasaran (permukaan yang terusik).
Jejak kaki memudar seiring waktu (salju kembali menutupi jejak, hujan menghapus jejak lumpur) dengan mengembalikan tekstur deformasi ke nol secara bertahap. Laju pemudaran bergantung pada cuaca: cepat saat hujan, lambat dalam kondisi kering.
Untuk dunia multipemain, data jejak kaki bersifat sementara dan lokal. Setiap klien menghasilkan jejak kaki untuk pemain yang terlihat. Tekstur deformasi tidak perlu disinkronkan antarklien (setiap orang melihat versi jejak sementara mereka sendiri). Ini menghindari biaya jaringan untuk menyiarkan setiap langkah.
Langit Prosedural dan Siklus Siang/Malam
Langit adalah permukaan terlihat terbesar dalam dunia terbuka mana pun. Langit menentukan suasana seluruh medan.
Three.js memiliki sistem langit lengkap yang mencakup matahari/bulan prosedural, siklus siang/malam, awan, bintang, dan pijar lensa. Contoh bawaan Sky dari Three.js (juga tersedia dalam WebGPU) mengimplementasikan model langit analitis Preetham.
Untuk hasil yang lebih akurat secara fisik, webgpu-sky-atmosphere mengimplementasikan model atmosfer Hillaire sebagai pascaproses WebGPU. Sistem ini mendukung beberapa fungsi fase hamburan dan menghasilkan perspektif udara yang tepat (medan yang jauh tampak lebih berkabut), warna matahari/matahari terbenam, dan gradasi langit berdasarkan prinsip dasar fisika.
TerrainView7 mendemonstrasikan rendering planet skala penuh di WebGPU dengan hamburan atmosfer yang telah diprakomputasi, membuktikan bahwa rendering atmosfer yang akurat secara fisik dapat berjalan di browser.
Untuk dunia kreator, parameter langit (posisi matahari, cakupan awan, kepadatan kabut) disinkronkan ke semua klien dari jam dunia server. Shader langit berjalan secara lokal pada setiap klien, menghasilkan pencahayaan yang konsisten untuk semua pemain.
Pencahayaan Medan: Iluminasi Tidak Langsung
Sinar matahari langsung ditangani oleh shadow map. Namun, warna dan kecerahan medan dalam bayangan (cahaya ambien/tidak langsung) sama pentingnya bagi kualitas visual. Bayangan hitam pekat terlihat tidak alami. Bayangan seharusnya diwarnai oleh warna langit (biru pada hari cerah, abu-abu pada hari mendung).
Untuk dunia berbasis browser, pendekatan praktisnya:
Pencahayaan tidak langsung ruang layar dengan bitmask visibilitas (Jimenez dkk., 2023, Makalah) menyempurnakan SSAO standar dengan melacak 32 sektor visibilitas terarah per piksel. Teknik ini menangkap bukan hanya seberapa tertutup suatu titik, tetapi juga arah oklusinya. Permukaan tipis memungkinkan cahaya menembus dari sisi lain dengan tepat. Hasilnya adalah iluminasi tidak langsung yang bereaksi terhadap geometri di sekitarnya tanpa infrastruktur iluminasi global.
Biayanya sebanding dengan SSAO (1–2 md). Peningkatan visualnya signifikan: medan di dalam ngarai menerima pantulan cahaya dari dinding ngarai. Bagian bawah tonjolan diterangi oleh pantulan dari tanah. Efek ini berpadu dengan hamburan atmosfer dari shader langit untuk menghasilkan pencahayaan ambien yang berlandaskan fisika.
Integrasi Fisika Medan
Collider Heightfield Rapier
Mesin fisika WASM Rapier menyediakan collider heightfield native yang dioptimalkan untuk medan. Membuat collider medan cukup mudah:
const heights = new Float32Array(65 * 65);
// Fill with heightmap data...
const groundCollider = RAPIER.ColliderDesc.heightfield(
64, 64, heights, new RAPIER.Vector3(64.0, 100.0, 64.0)
);
world.createCollider(groundCollider);Collider heightfield menggunakan grid terstruktur untuk kueri broadphase yang efisien. Raycasting terhadap heightfield memiliki kompleksitas O(log n), bukan O(n) seperti pada mesh segitiga. Untuk chunk berukuran 65x65, kueri tabrakan diselesaikan dalam hitungan mikrodetik.
Untuk chunk dengan medan volumetrik (lapisan SDF), hasilkan mesh segitiga dari keluaran marching cubes dan gunakan collider trimesh. Ini lebih mahal daripada collider heightfield, tetapi dapat menangani geometri arbitrer. Hanya hasilkan collider trimesh untuk 3–5 chunk terdekat dari pemain. Chunk yang jauh tidak memerlukan fisika.
Performa: Collider heightfield Rapier untuk chunk 65x65 menambahkan sekitar 0,1 md per langkah fisika bagi kueri pengontrol karakter. 5 chunk aktif dengan collider heightfield: 0,5 md. Satu collider trimesh untuk chunk volumetrik: 0,2–0,5 md. Total anggaran fisika medan: di bawah 1 md, masih jauh dalam anggaran fisika 2–3 md untuk seluruh dunia.
Pengontrol Karakter yang Peka terhadap Medan
Pengontrol karakter perlu merespons properti medan:
- Pembatasan kemiringan: Karakter dapat berjalan pada lereng hingga 45 derajat. Lereng yang lebih curam menyebabkan karakter meluncur. Ini menggunakan normal medan pada posisi karakter (dihitung secara ringan dari gradien heightmap).
- Respons material permukaan: Berjalan di atas batu menghasilkan suara langkah dan kecepatan gerak yang berbeda dibandingkan berjalan di atas pasir atau lumpur. Splat map medan menyediakan material permukaan di titik mana pun.
- Menaiki undakan: Karakter dapat menaiki undakan setinggi hingga 0,5 meter.
KinematicCharacterControllerdari Rapier menangani ini secara otomatis dengan tinggi undakan yang dapat dikonfigurasi.
Pengeditan Medan Interaktif di Browser
Untuk dunia kreator, medan tidak sekadar dihasilkan. Medan dipahat, dimodifikasi, dan dibentuk ulang oleh pemain. Alat pengeditan harus responsif (umpan balik visual instan) dan terhubung melalui jaringan (pemain lain melihat perubahan dalam hitungan detik).
Editor SDF WebGPU
Editor SDF WebGPU karya Reinder Nijhoff menunjukkan bahwa pemodelan SDF berfitur lengkap dapat dilakukan di browser saat ini. Editor ini mendukung:
- Enam bentuk primitif (bola, kotak, kerucut, silinder, kapsul, torus) dengan posisi, rotasi, dan skala
- Operasi Boolean (gabungan, pengurangan, irisan) dengan pencampuran halus dan radius pencampuran yang dapat dikonfigurasi
- Graf adegan hierarkis dengan grup dan operasi bertingkat
- Rendering waktu nyata menggunakan beberapa tahap compute shader GPU, partisi ruang berbasis octree pada 16.384 sel grid, serta ekstraksi permukaan melalui marching cubes atau surface nets
- Antialiasing temporal dan oklusi ambien melalui shadow map
Setiap primitif disimpan sebagai 28 float (112 byte) dalam satu buffer GPU. Representasi ringkas ini berarti pengeditan medan yang kompleks (puluhan primitif SDF yang membentuk pintu masuk gua, lengkungan, atau tebing terpahat) berukuran kurang dari 5 KB dan dapat langsung disinkronkan ke pemain lain.
Untuk dunia kreator, alur kerja pengeditan SDF terlihat seperti berikut:
- Kreator memilih alat pahat (tambahkan bola, kurangi kotak, pencampuran halus)
- Klik/seret di dunia untuk menempatkan dan menentukan ukuran primitif SDF
- Klien segera menjalankan marching cubes pada SDF yang dimodifikasi untuk memperbarui mesh lokal (umpan balik dalam <16 md)
- Pengeditan SDF (jenis primitif + transformasi + mode pencampuran, ~100 byte) dikirim ke server
- Server memvalidasi pengeditan (berada di dalam petak milik kreator, tidak beririsan dengan area yang dilindungi) dan menyiarkannya kepada pemain di sekitar
- Klien pemain lain menerapkan pengeditan SDF dan menghasilkan ulang mesh lokal mereka
Total waktu pulang-pergi hingga pengeditan terlihat oleh pemain lain: 100–300 md, tergantung latensi jaringan. Kreator melihat pengeditannya secara instan karena perubahan diterapkan secara lokal sebelum konfirmasi server.
Pengeditan Heightmap Berbasis Kuas
Untuk lapisan heightmap (90% medan yang tidak membutuhkan fitur volumetrik), model pengeditan yang lebih sederhana sudah memadai. Kreator melukis perubahan ketinggian dengan kuas:
- Naikkan/turunkan: Tambahkan atau kurangi ketinggian dalam radius dengan falloff
- Haluskan: Ratakan ketinggian dalam radius, sehingga fitur tajam menghilang
- Ratakan: Atur semua ketinggian dalam radius ke nilai target
- Kuas erosi: Terapkan beberapa langkah erosi hidraulis secara lokal dalam radius kuas
Pengeditan heightmap berupa delta: petak kecil berisi perubahan ketinggian yang melapisi medan dasar. Petak delta ini sangat kecil (grid 32x32 berisi offset ketinggian 16-bit = 2 KB) dan disinkronkan ke pemain lain sebagai satu pesan. Beberapa petak delta terakumulasi per chunk dan secara berkala digabungkan di sisi server ke dalam heightmap persisten milik chunk.
Batasan Pengeditan Kolaboratif
Saat beberapa kreator mengedit chunk yang sama secara bersamaan, sistem memerlukan aturan:
- Penguncian spasial: Hanya satu kreator yang dapat mengedit subwilayah 8x8 meter tertentu pada satu waktu. Kunci diperoleh saat kreator memulai sapuan pengeditan dan dilepas saat mereka mengangkat kuas. Kunci kedaluwarsa setelah tidak ada aktivitas selama 10 detik.
- Pengeditan yang tidak tumpang tindih: Jika dua kreator mengedit bagian berbeda dari chunk yang sama, kedua pengeditan diterapkan tanpa konflik (keduanya memodifikasi sel heightmap atau wilayah SDF yang berbeda).
- Pengeditan yang tumpang tindih: Jika dua kreator mengedit lokasi yang sama, server mengurutkan pengeditan berdasarkan urutan kedatangan. Kedua klien melihat hasil akhir yang sama setelah rekonsiliasi.
Pendekatan ini lebih sederhana daripada pendekatan CRDT penuh yang digunakan untuk objek yang ditempatkan karena pengeditan medan merupakan operasi aditif pada bidang kontinu (ketinggian, jarak SDF), bukan status objek diskret.
Geometri Virtual Bergaya Nanite di WebGPU
Nanite dari Unreal Engine 5 merender miliaran segitiga dengan membangun DAG cluster (graf asiklik terarah) saat proses build dan memilih LOD yang tepat per cluster saat runtime berdasarkan galat ruang layar. Seluruh alur pemrosesan berjalan di GPU. Pendekatan ini telah diporting ke WebGPU.
Nanite WebGPU
Nanite WebGPU karya Scthe (lebih dari 1,1 ribu bintang GitHub) adalah implementasi browser lengkap dari arsitektur inti Nanite:
- Hierarki LOD meshlet yang dibangun secara offline menggunakan pembuatan cluster dari meshoptimizer
- Rasterizer perangkat lunak yang diimplementasikan dalam compute shader WGSL (bekerja dalam batasan WebGPU, ketika rasterisasi perangkat keras tidak dapat melakukan draw per cluster secara efisien)
- Culling per instance dan per meshlet menggunakan pengujian frustum dan oklusi
- Impostor billboard untuk objek yang sangat jauh
- Dukungan tekstur dan normal per vertex Pipeline-nya: mesh dibagi menjadi klaster yang masing-masing berisi ~128 segitiga. Klaster-klaster yang berdekatan dikelompokkan, lalu setiap grup disederhanakan (menggunakan meshoptimizer) sambil mempertahankan batas bersama. Proses ini berulang hingga seluruh mesh menyusut menjadi satu klaster. Saat runtime, compute shader menelusuri DAG dan memilih klaster paling kasar per grup yang menghasilkan galat kurang dari 1 piksel pada resolusi layar saat ini.
THREE-Nanite adalah implementasi Three.js yang sedang berkembang dan mampu mencapai 20–40fps pada perangkat keras grafis terintegrasi sambil menangani ratusan ribu segitiga. Implementasi ini menunjukkan bahwa rendering bergaya Nanite tetap layak bahkan pada perangkat keras browser kelas bawah.
meshoptimizer: Fondasi Pipeline LOD
meshoptimizer (oleh Arseny Kapoulkine) adalah pustaka yang mendasari sebagian besar pipeline LOD yang kompatibel dengan browser. Versi 1.0 (2025) menyediakan:
- Penyederhanaan mesh dengan metrik galat (seberapa banyak bentuk berubah, digunakan untuk pemilihan LOD)
- Pembuatan klaster untuk hierarki meshlet bergaya Nanite
- Optimalisasi cache verteks untuk pengurutan segitiga yang ramah GPU
- Optimalisasi overdraw untuk mengurangi biaya pixel shader
- Kuantisasi dan kompresi verteks untuk unduhan yang lebih kecil
meshoptimizer 1.0 (dirilis Desember 2025) menyertakan clusterlod.h baru berformat single-header yang secara langsung mengimplementasikan LOD kontinu bergaya Nanite. Fitur ini membangun hierarki klaster yang secara bertahap dikelompokkan dan disederhanakan, sehingga dapat langsung digunakan atau dijadikan referensi untuk pipeline khusus. Inilah tepatnya primitif cluster-DAG yang dibutuhkan pipeline medan untuk LOD mesh SDF/marching cubes.
Untuk pipeline medan kita, meshoptimizer memproses keluaran marching cubes dari medan SDF menjadi mesh yang dioptimalkan dan dikelompokkan ke dalam klaster dengan hierarki LOD. Pemrosesan offline berjalan di sisi server. Browser menerima mesh yang telah dikelompokkan sebelumnya dan melakukan pemilihan LOD berbasis GPU saat runtime.
Kombinasi meshoptimizer untuk pembuatan LOD dan komputasi WebGPU untuk pemilihan saat runtime memberikan medan browser pola arsitektur yang sama seperti Nanite, tetapi disesuaikan dengan keterbatasan web.
Desain Level yang Mempertimbangkan Medan
Medan bukan sekadar permukaan untuk berjalan. Bentuknya memandu pergerakan pemain, mengarahkan perhatian, dan menciptakan ritme emosional eksplorasi. Dunia terbuka terbaik menggunakan medan sebagai alat desain.
Garis Pandang dan Tengaran
Bab pencarian arah dalam The Level Design Book mendokumentasikan bagaimana elevasi medan mengendalikan apa yang dilihat pemain dan ke mana mereka pergi. Punggung bukit menyembunyikan apa yang ada di baliknya sehingga memancing rasa ingin tahu. Lembah menyalurkan pergerakan menuju titik terendahnya. Tengaran tinggi (menara, puncak gunung, pohon yang tidak biasa) yang terlihat dari kejauhan memberi pemain tujuan untuk dihampiri.
Untuk dunia kreator, ini berarti pembuatan medan harus menghasilkan fitur pencarian arah yang alami. Garis punggung bukit harus memutus garis pandang, menciptakan "momen pengungkapan" ketika pemain mencapai puncak bukit dan melihat area baru. Lembah harus bertemu menuju lokasi yang menarik. Harus tersedia titik-titik tinggi tempat kreator dapat menempatkan tengaran yang terlihat dari jauh.
Eksplorasi yang Didorong Rasa Ingin Tahu
Riset dari Purdue University (Makalah) mengidentifikasi empat pemicu eksplorasi spasial:
- Mencapai titik ekstrem (puncak tertinggi, tepian terjauh, gua terdalam). Medan harus memiliki titik-titik ekstrem yang jelas dan memberi imbalan kepada pemain yang mencapainya.
- Mengungkap penghalang visual (apa yang ada di balik tebing itu? di dalam gua itu?). Medan yang menghalangi pandangan mendorong pergerakan untuk menemukan hal yang tersembunyi.
- Objek yang tidak pada tempatnya (bangunan di alam liar, cahaya di tengah kegelapan). Objek yang ditempatkan kreator dengan latar medan alami menciptakan kontras yang menarik perhatian.
- Memahami hubungan spasial (bagaimana lembah ini terhubung dengan pesisir itu?). Medan yang menciptakan geografi yang mudah dipahami mendorong pembacaan peta dan perencanaan rute.
PlotMap: Penempatan POI Berbantuan AI
PlotMap (arXiv:2309.15242) mengotomatiskan tata letak titik penting dengan menerima persyaratan naratif (misi ini membutuhkan desa di dekat sungai, misi itu membutuhkan reruntuhan di puncak bukit), lalu menemukan lokasi medan yang memenuhi batasan spasial tersebut. Untuk dunia kreator, sistem serupa dapat menyarankan tempat untuk meletakkan bangunan berdasarkan karakteristik medan: "puncak bukit ini memiliki garis pandang yang bagus untuk menara pengawas," "lembah terlindung ini cocok untuk desa."
Air Mengalir dan Air Terjun
Sungai dan air terjun adalah fitur medan yang menggabungkan daya tarik visual dengan suara ambien dan peluang gameplay (air sebagai penghalang, sumber daya, atau jalur).
Rendering Sungai
Sungai di dunia terbuka biasanya dirender sebagai strip bertekstur yang mengikuti permukaan medan. Mesh strip dibuat dari spline sungai (disimpan sebagai titik kontrol) dan diproyeksikan ke heightmap medan. Shader sungai menerapkan:
- UV yang selaras dengan aliran dan bergulir mengikuti arah sungai sehingga menciptakan tampilan air mengalir
- Busa di tepian tempat sungai bertemu dengan bantaran (berbasis kedalaman, serupa dengan busa garis pantai)
- Variasi kecepatan berdasarkan lebar alur (bagian sempit mengalir lebih cepat, bagian lebar lebih lambat)
- Transparansi dengan warna berbasis kedalaman (bagian dangkal jernih, bagian dalam gelap)
Untuk dunia browser, data sungai bersifat ringkas: sebuah spline (20–50 titik kontrol per segmen sungai, ~400 byte), ditambah parameter lebar dan kecepatan aliran. Klien membuat mesh sungai secara lokal dengan memproyeksikan spline ke permukaan medannya.
Rendering Air Terjun
Ketika sungai jatuh dari permukaan tebing, sistem partikel air terjun menggantikan permukaan sungai yang datar. Pendekatan hibrida dari riset simulasi air waktu nyata (EG): wilayah yang tidak dapat direpresentasikan oleh height field (air terjun, cipratan) diubah menjadi partikel semburan, cipratan, dan busa yang saling bertukar massa dan momentum dengan simulasi fluida.
Untuk dunia browser, air terjun dibuat lebih sederhana: deteksi tempat spline sungai melintasi diskontinuitas ketinggian medan, munculkan sistem partikel di titik tersebut dengan kecepatan ke bawah, lalu tambahkan cipratan busa di dasarnya. Partikel-partikel tersebut berupa quad berbasis instancing GPU dengan tekstur alfa bergulir. 500 partikel per air terjun, satu draw call. Suara air jatuh menggunakan Web Audio API dengan atenuasi jarak.
Impostor untuk Fitur Medan yang Jauh
Pohon, batu, bangunan, dan fitur medan lainnya menjadi sangat kecil di kejauhan. Merendernya sebagai mesh 3D penuh memboroskan siklus GPU. Impostor mengganti objek jauh dengan gambar datar yang telah dirender sebelumnya dan selalu menghadap kamera.
Atlas Impostor Oktahedral
Impostor oktahedral menangkap tampilan objek 3D dari berbagai sudut pandang dan menyimpannya dalam atlas tekstur. Saat runtime, shader mengambil sampel atlas berdasarkan arah pandang saat ini, dengan interpolasi di antara dua sudut tangkapan terdekat.
Atlas hemi-oktahedral (hanya pandangan dari belahan atas karena Anda jarang melihat pohon dari bawah) memberikan resolusi sudut dua kali lipat dibandingkan atlas oktahedral penuh dengan ukuran tekstur yang sama. Sistem impostor Unity melaporkan waktu frame turun dari 111ms menjadi 5,78ms ketika 1.600 instans pohon dialihkan dari mesh nyata (masing-masing 140K segitiga) ke impostor.
Untuk dunia browser, pipeline impostor:
- Sisi server: render setiap aset dari 16–32 sudut pandang, dengan menangkap warna, normal, dan kedalaman
- Kemas ke dalam tekstur atlas (satu atlas per aset, ~256x256 piksel, <100 KB sebagai KTX2)
- Saat runtime: instans yang melampaui jarak impostor (biasanya 100–200m) dirender sebagai billboard yang mengambil sampel atlas
- Terapkan crossfade antara mesh dan impostor di sepanjang zona transisi 20m untuk menyamarkan pergantian
Billboard Splatting (BBSplat)
Billboard Splatting (2024, arXiv:2411.08508) mengembangkan pendekatan ini lebih jauh dengan menggunakan primitif planar bertekstur yang dapat dipelajari. Alih-alih menggunakan tampilan yang dirender sebelumnya, BBSplat mengoptimalkan posisi dan tekstur billboard agar dapat merepresentasikan objek 3D sebaik mungkin dari sudut mana pun. Pendekatan ini mencapai kompresi hingga 17x dibandingkan 3D Gaussian Splatting sambil mempertahankan tampilan yang bergantung pada sudut pandang. Untuk fitur medan jauh dalam dunia browser, BBSplat dapat mengurangi penyimpanan impostor per aset sekaligus meningkatkan cakupan sudut.
Alat Medan Profesional dan Pelajarannya
Sebelum membangun pipeline medan dari nol, ada baiknya memahami apa yang dilakukan alat offline profesional. Alat-alat ini mewakili riset pembuatan medan selama puluhan tahun yang telah disarikan menjadi alur kerja produksi.
Gaea (QuadSpinner) diakselerasi GPU dan memberikan umpan balik nyaris seketika terhadap perubahan. Gaea mendukung build berbasis ubin hingga 2 juta piksel per sisi, ekspor mesh LOD otomatis, dan graf berbasis node dengan setiap node merepresentasikan proses fisik (erosi, sedimentasi, pengangkatan, pelapukan termal). Node erosi Gaea menghasilkan medan yang tampak dipahat secara manual karena memodelkan proses fisik tertentu, bukan noise generik. Wawasan utamanya: Gaea tidak menggunakan satu algoritma erosi saja. Gaea menyediakan node terpisah untuk erosi fluvial (pengikisan oleh sungai), erosi termal (pelapukan tebing), erosi pesisir (aksi gelombang), dan erosi angin (pembentukan bukit pasir). Menggabungkannya dalam graf menghasilkan medan dengan karakter geologis iklim tertentu.
World Machine menggunakan pendekatan graf serupa dengan fokus pada struktur makro medan. "Layout generator"-nya memungkinkan seniman membuat sketsa bentuk kasar fitur medan (gunung di sini, lembah di sana, garis pantai di sepanjang tepian ini), lalu sistem mengisi detail yang masuk akal secara fisik. Inilah tepatnya alur kerja kreator yang kita inginkan: buat sketsa maksudnya, dapatkan geologinya.
World Creator membedakan dirinya melalui pratinjau waktu nyata selama pengeditan dan pembuatan sungai bawaan yang menganalisis medan serta otomatis menghitung jalur aliran berdasarkan analisis drainase.
Yang kita pelajari dari alat-alat ini: Pendekatan graf node untuk menggabungkan proses fisik lebih kuat daripada algoritma tunggal mana pun. Pipeline pembuatan di sisi server kita harus mendukung perangkaian: basis noise > pengangkatan tektonik > erosi hidraulis > pelapukan termal > erosi pesisir > vegetasi. Kreator mengendalikan parameter pada setiap tahap. Pipeline berjalan di sisi server dalam hitungan detik dan menghasilkan heightmap, splat map, serta peta kepadatan vegetasi.
SoilMachine: Geomorfologi Sumber Terbuka
SoilMachine adalah simulator geomorfologi modular sumber terbuka yang menggabungkan beberapa sistem erosi (hidraulis, termal, angin) dengan pengangkutan dan pengendapan sedimen. Dibangun menggunakan C++ dengan komputasi GPU, alat ini menyediakan implementasi referensi untuk pendekatan erosi multiproses yang digunakan alat profesional.
soillib terkait (C++20, lisensi MIT) menyediakan primitif simulasi geomorfologi yang mendasarinya sebagai pustaka yang dapat digunakan kembali. Sementara itu, hydro-gen mengimplementasikan erosi hidraulis berbasis grid (air dangkal) dan berbasis partikel (tetes hujan) dalam compute shader OpenGL dengan penyesuaian parameter waktu nyata.
Alat-alat sumber terbuka ini dapat diadaptasi untuk pipeline pembuatan sisi server kita. Implementasi compute shader-nya dapat diterjemahkan langsung ke WebGPU jika nantinya kita ingin menjalankan erosi di browser untuk memberikan umpan balik waktu nyata kepada kreator.
Material Medan Multilapis
Medan nyata bukanlah satu permukaan saja. Medan terdiri dari lapisan: batuan dasar di bagian bawah, tanah di atasnya, serta salju atau pasir yang menumpuk di permukaan. Pelapisan dinamis mengubah karakter visual medan seiring musim, cuaca, dan tindakan kreator.
Representasi Heightfield Berlapis
Alih-alih menggunakan satu heightmap, gunakan beberapa lapisan ketinggian per sel grid:
Cell {
bedrock_height: f16, // permukaan batuan permanen
soil_height: f16, // tanah/sedimen yang terakumulasi di atas batuan dasar
snow_height: f16, // akumulasi salju dinamis
water_height: f16 // kedalaman genangan air
}Total: 8 byte per sel (dibandingkan 2 byte untuk satu heightmap). Untuk chunk 65x65, ukurannya 34 KB sebelum kompresi. Masih ringkas.
Permukaan visualnya adalah bedrock + soil + snow. Shader medan membaca semua lapisan dan mencampur material sebagaimana mestinya: ketika tanah tipis, batu terlihat dari bawahnya. Ketika salju menumpuk, permukaan menjadi putih. Ketika air menggenang, terbentuk kubangan atau danau.
Akumulasi Dinamis
Salju menumpuk pada permukaan datar yang menghadap ke atas selama hujan salju. Laju akumulasi bergantung pada normal permukaan (lereng terjal tidak menahan salju), suhu (bergantung pada ketinggian), dan perlindungan (area di bawah bagian menggantung tetap bebas salju). Sebuah pass compute shader memperbarui lapisan salju sekali per tick cuaca (setiap beberapa detik).
Akumulasi pasir bekerja dengan cara serupa melalui pengendapan yang digerakkan angin. Angin membawa partikel dari permukaan terbuka dan mengendapkannya di belakang rintangan serta di area terlindung.
Untuk dunia kreator, akumulasi dinamis berarti medan tampak berbeda dalam cuaca yang berbeda. Salju menutupi dunia selama badai salju dan mencair saat cuaca cerah. Hujan mengisi cekungan dengan air. Hal ini membuat dunia terasa responsif tanpa kreator perlu melakukan apa pun.
Erosi Multilapis
Makalah tahun 2024 "3D Real-Time Hydraulic Erosion Simulation using Multi-Layered Heightmaps" (EG) memperluas erosi agar bekerja lintas lapisan. Air mengikis tanah lebih cepat daripada batuan dasar. Sedimen mengendap sebagai lapisan tanah baru. Simulasi mempertahankan integritas lapisan (batuan dasar tetap berada di bawah tanah) sekaligus memungkinkan fitur kompleks seperti bagian menggantung (ketika batuan dasar menggantung di atas tanah yang telah terkikis). Performa: sekitar 6 md per langkah simulasi pada RTX 3070 dengan resolusi 2048x2048. Ini cukup cepat untuk pembuatan di sisi server, tetapi terlalu lambat untuk simulasi per frame di browser. Representasi berlapis cocok untuk pembuatan medan statis, sedangkan akumulasi salju/air dinamis dijalankan sebagai shader per frame yang lebih ringan.
Rendering Rumput, Bebatuan, dan Detail
Lanskap membutuhkan lebih dari sekadar geometri dan tekstur medan. Lanskap memerlukan helai-helai rumput yang bergoyang tertiup angin, bebatuan yang tersebar di lereng, dan detail kecil seperti bunga, kerikil, serta ranting tumbang yang membuat tampilan jarak dekat terlihat alami.
Rumput dengan Instancing GPU
Rendering rumput berbasis browser telah terbukti andal di Three.js dan bekerja melalui instancing GPU. Pendekatan dari demo rumput al-ro merender 100.000 helai rumput dengan satu draw call menggunakan InstancedBufferGeometry.
Setiap helai rumput merupakan quad sederhana (4-8 segitiga). Atribut per instans menentukan posisi, tinggi, arah lengkungan, variasi warna, dan fase angin. Vertex shader:
- Membaca transformasi per instans
- Menerapkan animasi angin menggunakan gelombang sinus yang ditentukan oleh posisi dunia dan waktu
- Melengkungkan helai berdasarkan kekuatan angin (lebih melengkung di ujung, tanpa lengkungan di pangkal)
- Menerapkan gradien warna (lebih gelap di pangkal, lebih terang di ujung untuk hamburan bawah permukaan)
Tutorial rumput lebat Codrops (2025, Tutorial) mendemonstrasikan pendekatan shell texturing: render bidang tanah beberapa kali dengan offset yang terus bertambah, lalu setiap lapisan mengambil sampel tekstur noise untuk menciptakan tampilan volume rumput yang rapat. Pendekatan ini lebih ringan daripada instancing setiap helai untuk cakupan yang sangat rapat, tetapi kurang realistis dari jarak dekat.
Untuk dunia kreator, kepadatan rumput berasal dari peta kepadatan vegetasi per chunk. GPU menyebarkan posisi helai dari peta kepadatan pada saat rendering. Tidak ada data per helai yang disimpan atau dialirkan. Peta kepadatan berupa kisi 32x32 per chunk (1 KB), dan GPU menghasilkan ribuan instans helai rumput darinya.
Detail Bebatuan dan Tebing Prosedural
Permukaan tebing dan medan berbatu membutuhkan detail geometris yang tidak dapat disediakan oleh heightmap dasar atau SDF pada resolusi yang wajar. Dua pendekatan berikut saling melengkapi:
Pelapisan ulang dengan GPU mesh shader (Raad dkk., Eurographics 2025, Makalah) menghasilkan geometri prosedural pada saat rendering dari control mesh kasar. Mesh shader membaca permukaan medan dasar dan menambahkan displacement, retakan, serta tonjolan tanpa menyimpan geometri detail di memori. Ini mengurangi penggunaan VRAM dan memungkinkan LOD dinamis.
Penyebaran bebatuan dengan instancing menempatkan mesh bebatuan siap pakai pada lereng terjal dan tepi tebing menggunakan instancing GPU. Compute shader membaca normal dan kemiringan medan, lalu menyebarkan instans bebatuan di lokasi yang kemiringannya melebihi ambang batas. Setiap instans merupakan mesh kecil (200-500 segitiga) dengan rotasi dan skala acak. Dengan instancing, 10.000 bebatuan yang tersebar hanya menambah biaya rendering yang dapat diabaikan.
Jalan dan Jalur
Jalan, lintasan, dan jalur yang ditempatkan kreator harus mengikuti bentuk medan dan mengubah material permukaan (mengganti rumput dengan tanah atau batu).
Pendekatan yang digunakan oleh setiap game engine besar: definisikan jalur sebagai spline (serangkaian titik kontrol). Proyeksikan spline ke permukaan medan. Buat strip mesh yang mengikuti spline dan berada sedikit di atas medan. Terapkan tekstur jalan ke strip tersebut. Di dalam shader medan, padukan material medan menuju material jalan dalam batas lebar spline menggunakan tekstur terproyeksi atau decal.
Untuk dunia berbasis browser, kreator menggambar jalur pada medan. Klien menghasilkan titik-titik kontrol dan mengirimkannya ke server (beberapa lusin nilai vec3). Server menyimpan spline tersebut. Semua klien merender strip jalan secara lokal dengan memproyeksikan spline ke mesh medan mereka. Data jalannya sangat kecil (titik-titik spline jalur, mungkin 200 byte), tetapi dampak visualnya besar: jalur yang menghubungkan karya para kreator membuat dunia terasa dihuni.
Bayangan untuk Medan
Bayangan medan sangat penting untuk keterbacaan (memahami bentuk medan) dan atmosfer (nuansa berdasarkan waktu). Di dunia terbuka, matahari memancarkan bayangan ke seluruh medan yang terlihat.
Cascaded Shadow Maps (CSM)
CSM membagi frustum pandangan menjadi 3-4 rentang jarak (cascade). Setiap cascade merender shadow map dari perspektif matahari pada resolusi yang sesuai dengan jaraknya. Cascade dekat: resolusi tinggi (bayangan mendetail di bawah pohon dan bangunan). Cascade jauh: resolusi rendah (bayangan pegunungan yang luas).
Three.js dan Babylon.js sama-sama mendukung CSM. Optimalisasi utama untuk medan: hanya render medan ke dalam shadow map, bukan setiap helai rumput atau detail kecil. Rumput menggunakan bayangan dari shadow map medan, bukan bayangannya sendiri.
Anggaran performa: 3-4 cascade bayangan masing-masing berukuran 1024x1024. Merender medan ke shadow map memerlukan 0,5-1 md (geometri medan sudah berada di memori GPU). Mengambil sampel dari 4 cascade dalam shader medan menambah 0,2-0,3 md.
Bayangan Mandiri Medan dari Heightmap
Untuk medan yang sangat luas dan membuat CSM terlalu mahal, hitung sebelumnya sebuah horizon map: untuk setiap sel medan, simpan sudut elevasi maksimum dalam 8 arah mata angin. Saat rendering, bandingkan sudut matahari dengan horizon map untuk menentukan apakah suatu titik berada dalam bayangan. Beginilah Skyrim menangani bayangan mandiri medan untuk medan jauh (di luar jangkauan CSM).
Horizon map dihitung di sisi server dari heightmap (memerlukan beberapa detik pemrosesan) dan dialirkan sebagai tekstur 128x128 per chunk (16 KB setelah dikompresi). Dampak visualnya signifikan: lembah pegunungan menjadi gelap secara realistis bahkan pada jarak pandang yang ekstrem.
Kompresi Data Medan untuk Streaming
Jaringan adalah hambatan utama bagi dunia berbasis browser. Setiap byte yang dihemat dari data medan mempercepat waktu pemuatan.
Kompresi Heightmap
Heightmap mentah 16-bit dapat dikompresi dengan baik karena sel-sel yang berdekatan memiliki nilai serupa. Alur pemrosesannya:
- Delta encoding: Simpan selisih antara setiap sel dan nilai prediksinya (rata-rata sel tetangga). Nilai delta berukuran kecil dan mengelompok di dekat nol.
- Kuantisasi: Untuk chunk yang jauh, kurangi presisi dari 16-bit menjadi 12-bit atau 8-bit. Pada jarak 500 meter, presisi ketinggian 8-bit (resolusi 0,4 m pada rentang ketinggian 100 m) tidak dapat dibedakan dari 16-bit.
- Entropy coding: Terapkan kompresi zlib atau brotli ke aliran yang telah melalui delta encoding. Rasio kompresi umum: 4-8x.
Hasilnya: chunk 65x65 pada 16-bit berkurang dari 8,4 KB mentah menjadi 1-2 KB setelah dikompresi. Pada presisi 8-bit yang dikurangi: 0,5-1 KB.
Streaming Heightmap Progresif
Kirim medan beresolusi rendah terlebih dahulu, lalu sempurnakan secara bertahap. Heightmap 17x17 (ukuran minimum untuk chunk 64 m dengan jarak antarsel 4 m) berukuran 578 byte mentah dan kurang dari 200 byte setelah dikompresi. Medan langsung terlihat. Kemudian alirkan penyempurnaan 33x33 (menambahkan sampel baris/kolom ganjil). Setelah itu, alirkan resolusi penuh 65x65. Setiap tingkat menambahkan detail tanpa mengganti data sebelumnya.
Ini dipetakan ke cincin LOD geometry clipmap: medan jauh menggunakan versi beresolusi rendah (17x17), jarak menengah menggunakan resolusi sedang (33x33), dan tampilan jarak dekat menggunakan resolusi penuh (65x65). Prioritas streaming sesuai dengan LOD rendering.
Kompresi Volume SDF
Volume SDF sparse dapat dikompresi secara drastis karena sebagian besar voxel berada jauh dari permukaan (ruang kosong). Pilihannya:
Run-length encoding: Enkode rangkaian nilai identik (voxel kosong). Volume SDF umumnya lebih dari 95% kosong, sehingga RLE menghasilkan kompresi 10-50x.
Sparse octree: Hanya simpan node octree yang berisi voxel yang dilintasi permukaan. Ruang kosong tidak memiliki node. Volume SDF 64^3 dengan satu terowongan gua mungkin hanya memiliki 2.000-5.000 node terisi (dibandingkan total 262.144 voxel), masing-masing disimpan sebagai 1-2 byte.
Kompresi progresif berbasis entropi (2024, HAL) diterapkan pada data spasial 3D dengan membagi ruang secara rekursif menggunakan bidang yang dioptimalkan berdasarkan entropi dan kuantisasi adaptif. Ini menghasilkan aliran penyempurnaan yang dioptimalkan untuk kompromi laju-distorsi, terutama bermanfaat pada bitrate rendah dalam streaming jaringan.
Menggabungkan Semuanya: Pipeline Medan Browser
Ikhtisar strategis di bagian atas artikel ini memberikan kerangka pengambilan keputusan cepat dan rencana pembangunan bertahap. Bagian ini menyediakan detail teknis lengkap untuk pipeline pembuatan di sisi server dan pipeline rendering browser.
Pipeline Pembuatan (Sisi Server)
Pipeline pembuatan berjalan sebagai graf berarah dari berbagai proses fisik, terinspirasi oleh pendekatan graf node milik Gaea dan World Machine. Setiap tahap menerima keluaran tahap sebelumnya dan menyempurnakannya. Kreator mengendalikan parameter pada setiap tahap.
| Tahap | Input | Proses | Output | Waktu |
|---|---|---|---|---|
| 1. Medan dasar | Seed atau prompt teks | Terrain Diffusion / MESA / noise + fBm | Heightmap 16-bit | 1-5 dtk |
| 2. Erosi | Heightmap | Stream power analitis + erosi termal | Heightmap tererosi, peta akumulasi aliran, peta sedimen | 0,5-2 dtk |
| 3. Sungai | Heightmap tererosi, peta aliran | Ekstraksi jaringan drainase, pengukiran saluran | Spline sungai, peta ketinggian air | 0,5 dtk |
| 4. Pesisir | Heightmap di dekat permukaan laut | Erosi gelombang bergaya NEWTS | Fitur garis pantai (tebing, pantai, stack) | 1-3 dtk |
| 5. Volumetrik | Heightmap + maksud kreator | Erosi Arenite / pembuatan gua / pemahatan SDF | Volume SDF sparse untuk chunk yang terdampak | 1-60 dtk |
| 6. Material | Heightmap + peta erosi | TerraFusion / Geodiffussr / aturan prosedural | Splat map, tekstur medan | 1-5 dtk |
| 7. Vegetasi | Heightmap + peta aliran + material | Simulasi persaingan ekosistem | Peta kepadatan per bioma per chunk | 1-3 dtk |
| 8. Horizon map | Heightmap akhir | Sudut elevasi maksimum 8 arah | Tekstur bayangan mandiri per chunk | 2-5 dtk |
| 9. Pembagian chunk | Semua output | Potong, terapkan delta encoding, kompresi, hash | Paket chunk di CDN | 5-10 dtk |
| Total | 15-90 dtk |
Dunia baru berukuran 4x4 km dapat dibuat dalam 15-90 detik. Edit kreator (pemahatan, perubahan parameter) hanya menjalankan ulang tahap yang terdampak untuk chunk terkait, dan biasanya selesai dalam waktu kurang dari 5 detik.
Pipeline Rendering (Browser)
| Langkah | Jalur WebGPU | Fallback WebGL 2 | Anggaran frame |
|---|---|---|---|
| 1. Streaming | Antrean prioritas, pre-fetch prediktif | Sama | N/A (asinkron) |
| 2. Medan heightmap | Quadtree CDLOD berbasis GPU, compute culling, indirect draw | Geometry clipmap, pembaruan cincin oleh CPU | 0,5-1 md |
| 3. Mesh volumetrik | Compute marching cubes + Transvoxel | Mesh yang dibuat sebelumnya dari Web Worker, 2-3 LOD tersimpan dalam cache | 0,5-2 md |
| 4. Transisi LOD | Geomorphing dalam vertex shader | Sama | Termasuk di atas |
| 5. Material | PBR triplanar + Laplacian blending + detail phasor noise + virtual texturing | PBR triplanar + linear blending + splat map yang telah di-bake | 1-1,5 md |
| 6. Vegetasi | ComputeInstanceCulling + IndirectBatchedMesh, penutup tanah berubin heksagonal | Frustum culling CPU + InstancedMesh | 1-1,5 md |
| 7. Air | Strip sungai yang sejajar dengan aliran, buih garis pantai berbasis kedalaman | Sama (refleksi lebih sederhana) | 0,5 md |
| 8. Bayangan | CSM 3-4 cascade + bayangan mandiri horizon map | CSM 2 cascade | 0,5-1 md |
| 9. Atmosfer | Model langit Hillaire + kabut volumetrik + partikel cuaca | Langit Preetham + kabut jarak | 0,5 md |
| 10. Efek dinamis | Akumulasi genangan, deformasi jejak kaki, salju/hujan | Akumulasi genangan, partikel hujan | 0,3 md |
| Total medan | 3,5-6,5 md |
Pada 60 fps (16,6 md per frame), sistem medan menggunakan 21% anggaran frame di WebGPU dan 39% di WebGL 2. Sisanya tersedia untuk avatar pemain, objek kreator, UI, jaringan, dan pascapemrosesan.
Mengapa Ini Berfungsi di Browser
Seluruh pipeline dirancang dengan mempertimbangkan tiga keterbatasan browser:
Memori (maksimum 2-4 GB): Anggaran medan 256 MB mencukupi karena setiap chunk heightmap berukuran 2-8 KB (setelah delta encoding), volume SDF bersifat sparse (100-500 KB per chunk volumetrik), vegetasi dibuat saat runtime dari peta kepadatan 1 KB, dan tekstur menggunakan kompresi KTX2 (150 KB per 1024x1024). Pada waktu tertentu, dunia yang terlihat di browser memiliki ukuran total 50-200 MB.
Tanpa akses disk: Semuanya dialirkan melalui jaringan. Pemuatan progresif membuat pemain melihat medan dalam <100 md (heightmap resolusi rendah), medan bertekstur dalam <300 md, dan detail penuh dalam ❤️ dtk. Pre-fetch berdasarkan kecepatan menyembunyikan waktu pemuatan selama penjelajahan normal.
Kemampuan GPU sangat bervariasi: Jalur WebGPU menangani desktop kelas atas. Fallback WebGL 2 menangani perangkat lainnya, termasuk perangkat seluler. Data chunk yang sama menggerakkan kedua jalur. Perbedaannya terletak pada teknik rendering, bukan format data. Chromebook yang menjalankan WebGL 2 melihat dunia yang sama seperti RTX 4090 yang menjalankan WebGPU, hanya dengan detail lebih rendah dan jarak pandang lebih pendek.
Makalah Penelitian
Representasi Medan dan Pembuatan Mesh
"Marching Cubes: Algoritma Konstruksi Permukaan 3D Beresolusi Tinggi" -- Lorensen dan Cline (SIGGRAPH 1987). DOI. Algoritma fundamental untuk mengekstrak mesh segitiga dari data volumetrik. Masih menjadi metode ekstraksi isosurface yang paling luas digunakan 38 tahun kemudian. Implementasi paralel GPU berjalan secara real-time dalam compute shader WebGPU. "Dual Contouring Data Hermite" -- Ju, Losasso, Schaefer, Warren (SIGGRAPH 2002). DOI. Menghasilkan mesh yang mempertahankan fitur tajam (tepi tebing, sudut batu) yang dibulatkan oleh marching cubes. Memerlukan normal permukaan selain nilai jarak.
"Neural Dual Contouring" -- Chen dkk. (2022). arXiv:2202.01999. Menggantikan penempatan verteks kuadrat terkecil dalam dual contouring dengan prediktor terlatih. Menghasilkan kualitas permukaan yang lebih baik untuk fitur alami yang kompleks.
"Algoritma Transvoxel" -- Lengyel (2009, diperbarui 2024). transvoxel.org. Transisi LOD yang mulus untuk medan voxel. Menghilangkan retakan pada batas resolusi menggunakan 73 jenis sel transisi. Bebas paten dan dirancang untuk aplikasi waktu nyata.
LOD dan Rendering Medan
"Geometry Clipmaps: Rendering Medan Menggunakan Grid Reguler Bersarang" -- Losasso dan Hoppe (SIGGRAPH 2004). Makalah. Rendering medan dengan biaya konstan menggunakan cincin LOD konsentris. Menangani medan berukuran 40 GB dengan kecepatan interaktif. Menjadi dasar bagi sebagian besar renderer medan di browser.
"CDLOD: LOD Hibrida untuk Rendering Medan" -- Strugar (2014). Makalah. Penyempurnaan geometry clipmap yang adaptif terhadap quadtree. Mengalokasikan resolusi berdasarkan kompleksitas medan, bukan hanya jarak.
"Pipeline Rendering Berbasis GPU" -- Ubisoft (SIGGRAPH 2015), Wihlidal dan Hoppe. Memformalkan pendekatan berbasis GPU, dengan compute shader yang menangani culling, pemilihan LOD, dan pembuatan draw call. Pola arsitektur untuk pipeline medan WebGPU kami.
Pembuatan Medan Fisik
"Erosi Analitis Berbasis Fisika untuk Pembuatan Medan Secara Cepat" -- Cordonnier dkk. (2024). HAL. Erosi analitis berdasarkan hukum daya aliran yang tidak memerlukan simulasi iteratif. Menghasilkan medan yang masuk akal secara fisik dalam hitungan milidetik.
"Simulasi dan Visualisasi Erosi Hidraulis Cepat pada GPU" -- Mei, Decaudin, Hu (2007). HAL. Erosi hidraulis paralel pada GPU menggunakan simulasi air dangkal. Menjadi dasar bagi sebagian besar implementasi erosi di game engine.
"Arenite: Simulator Batu Pasir Berbasis Fisika" -- SIGGRAPH 2025. Proyek. Erosi multifisika yang menghasilkan lengkungan, hoodoo, dan ceruk dari simulasi tekanan dan erosi. Berjalan dalam waktu kurang dari 5 menit pada GPU desktop.
"Simulasi Aliran Rombakan yang Efisien untuk Erosi Medan Curam" -- Purdue CGVLAB (2024). Makalah. Aliran rombakan dan erosi lereng curam yang diakselerasi GPU untuk menghasilkan fitur medan pegunungan yang realistis.
"Erosi Medan Fleksibel" -- IRIT-STORM (2024). Springer. Erosi berbasis partikel yang dapat digunakan pada heightfield, grid voxel, permukaan implisit, dan material berlapis melalui satu antarmuka terpadu. Memungkinkan satu sistem erosi digunakan untuk representasi medan hibrida.
Detail dan Tekstur Medan
"Pencampuran Tekstur Laplacian yang Ramah GPU" -- Wronski (NVIDIA, 2025). JCGT. Pencampuran piramida Laplacian waktu nyata untuk material medan tanpa prakomputasi. Mempertahankan fitur tajam sekaligus menghilangkan artefak sambungan. Hanya memerlukan beberapa pengambilan sampel tekstur tambahan per fragmen.
"Penyempurnaan Medan Waktu Nyata dengan Pola Prosedural Terkendali" -- Grenier dkk. (2024). CGF. Detail mikroerosi berbasis phasor noise hingga 32 kali resolusi heightmap. Pola yang disejajarkan dengan lereng dijalankan sepenuhnya dalam fragment shader.
Teselasi Adaptif
"Pohon Biner Konkuren untuk Komponen Game Berskala Besar" -- Benyoub dan Dupuy (Intel, HPG 2024). Makalah. Struktur data pohon biner yang ramah GPU untuk teselasi medan adaptif. Merender geometri berskala planet dalam waktu kurang dari 0,2 md. Dikembangkan dari domain persegi ke mesh poligon arbitrer.
Pembuatan Gua dan Bawah Tanah
"PLUME: Engine Pemodelan Bawah Tanah Berlapis Secara Prosedural" -- 2024. arXiv:2508.20926. Framework sumber terbuka untuk menghasilkan lingkungan gua dan tabung lava realistis menggunakan aturan prosedural berlapis. Awalnya dibuat untuk robotika eksplorasi ruang angkasa.
Sintesis Medan Neural
"InfiniteDiffusion: Menjembatani Fidelitas Hasil Pembelajaran dan Kegunaan Prosedural untuk Pembuatan Medan Dunia Terbuka" -- Goslin (2025, SIGGRAPH 2026). arXiv:2512.08309. Pembuatan medan tanpa batas yang konsisten dengan seed menggunakan model difusi hierarkis dengan pengodean Laplacian. 9 kali lebih cepat daripada baseline pada GPU konsumen.
"TerraFusion: Pembuatan Bersama Geometri dan Tekstur Medan" -- 2025. arXiv:2505.04050. Difusi laten untuk sintesis heightmap dan tekstur secara bersamaan dengan pengondisian sketsa.
"MESA: Pembuatan Medan Berbasis Teks" -- Lokakarya CVPR 2025. arXiv:2504.07210. Pembuatan medan dari teks menggunakan data pelatihan penginderaan jauh Copernicus.
"Geodiffussr: Pembuatan Tekstur Medan Generatif dengan Fidelitas Elevasi" -- 2025. arXiv:2511.23029. Pembuatan tekstur medan berbasis teks yang menghormati data elevasi menggunakan flow-matching.
"Sketch2Terrain: Pemetaan Sketsa Medan Waktu Nyata Berbasis AI" -- 2025. Proyek. Konversi sketsa menjadi medan dalam realitas tertambah. Peningkatan efisiensi sebesar 38% dibandingkan pemetaan manual.
Simulasi Vegetasi dan Ekosistem
"Distribusi Prosedural Vegetasi Waktu Nyata Berbasis GPU pada Medan Virtual Berskala Besar" -- SBGames 2018. Makalah. Penyebaran vegetasi berbasis quadtree menggunakan faktor biotik/abiotik pada GPU.
"Pembuatan dan Rendering Hutan Secara Prosedural" -- 2022. Makalah. Pembuatan pohon dengan L-system yang dipadukan dengan simulasi persaingan ekosistem untuk menghasilkan distribusi hutan yang realistis.
"Pembuatan Prosedural Waktu Nyata dengan GPU Work Graphs" -- AMD GPUOpen 2024. Makalah. GPU work graph yang menghasilkan lebih dari 79 ribu instans vegetasi dalam waktu kurang dari 4 md.
Teknologi GPU Browser
"Renderer GSWT" -- SIGGRAPH Asia 2025. GitHub. Renderer WebGPU + Rust/Wasm yang menggunakan Gaussian Splatting Wang Tiles untuk medan 3D tanpa batas dengan LOD dinamis dan streaming.
"Komputasi GPU di Browser Secepat Native: WebGPU Marching Cubes" -- Usher (2024). Blog. Menunjukkan bahwa komputasi WebGPU mencapai performa setara native untuk algoritma pembuatan mesh paralel.
Rendering Voxel dan Adegan Berskala Besar
"Aokana: Framework Rendering Voxel Berbasis GPU untuk Game Dunia Terbuka" -- 2025. arXiv:2505.02017. Sparse Voxel DAG dengan LOD dan streaming untuk adegan yang berisi puluhan miliar voxel. Mengurangi penggunaan memori 9 kali lipat dan menghasilkan rendering 4,8 kali lebih cepat dibandingkan teknologi mutakhir sebelumnya. Dirancang untuk integrasi dengan game engine.
Geometri Prosedural dan Pelapisan Ulang Permukaan
"Pelapisan Ulang Permukaan Secara Prosedural dan Waktu Nyata Menggunakan GPU Mesh Shader" -- Raad dkk. (Eurographics 2025). Makalah. Menghasilkan permukaan geometris mendetail dari mesh kontrol kasar saat rendering menggunakan mesh shader. Memungkinkan LOD dinamis tanpa menyimpan geometri beresolusi tinggi di memori.
Bayangan Medan
"Mengoptimalkan Bayangan Medan" -- AMD GPUOpen. Blog. Optimasi CSM praktis untuk medan berskala besar. Membahas pembagian cascade, rendering shadow map yang efisien pada GPU, dan optimasi khusus medan.
Geometri Virtual dan Optimasi Mesh
"Nanite WebGPU" -- Scthe (2024). GitHub, Demo. Implementasi lengkap arsitektur Nanite UE5 di browser: hierarki LOD meshlet, rasterizer perangkat lunak dalam WGSL, culling per meshlet, dan impostor billboard.
"Miliaran Segitiga dalam Hitungan Menit" -- Kapoulkine (2025). Blog. Meshoptimizer v1.0 untuk pembuatan LOD berklaster hierarkis. Memproses mesh masif menjadi DAG klaster bergaya Nanite secara efisien.
"Billboard Splatting (BBSplat)" -- 2024. arXiv:2411.08508. Primitif planar bertekstur yang dapat dilatih untuk sintesis sudut pandang baru, dengan kompresi 17 kali lipat dibandingkan 3D Gaussian Splatting.
Pencahayaan Medan dan Iluminasi Global
"Iluminasi Global dalam Once Human" -- GDC 2025. Sesi. GI hibrida untuk dunia terbuka seluas 16 km: probe yang dikompresi jaringan neural (rasio 69:1), penanganan kebocoran dalam/luar ruangan berbasis ML, dan respons probe dinamis.
"GI dengan AMD FidelityFX Brixelizer" -- GDC 2024. Makalah. Cascade medan jarak renggang berbasis komputasi dengan probe screen-space. Tidak memerlukan ray tracing perangkat keras.
"Radiance Cascades" -- 2024. Blog. Iluminasi global waktu nyata tanpa noise menggunakan struktur radiance bertingkat tanpa akumulasi temporal.
Desain Level dan Eksplorasi
"PlotMap: Desain Tata Letak Otomatis untuk Membangun Dunia Game" -- 2023. arXiv:2309.15242. Penempatan POI berbantuan AI yang memenuhi batasan spasial naratif pada medan.
"Pemicu Eksplorasi Spasial" -- Purdue University (FDG 2022). Makalah. Empat pola desain yang mendorong eksplorasi pemain: titik ekstrem, penghalang visual, objek yang tidak pada tempatnya, dan koneksi spasial.
Kompresi dan Streaming Data
"Kompresi Progresif Point Cloud 3D Berbasis Entropi" -- SGP 2024. Makalah. Kompresi progresif yang dioptimalkan berdasarkan laju-distorsi menggunakan partisi ruang rekursif dengan kuantisasi adaptif. Menghasilkan aliran penyempurnaan yang sesuai untuk streaming jaringan dengan bandwidth variabel.
Pengeditan Interaktif
"Editor SDF WebGPU" -- Nijhoff (2026). Proyek. Pemodelan SDF berfitur lengkap di browser dengan marching cubes waktu nyata, operasi boolean, pencampuran halus, dan partisi ruang octree. 112 byte per primitif.
Pembuatan Sungai dan Pesisir
"Daerah Aliran Sungai Prosedural" -- Patel (Red Blob Games). Proyek. Pembuatan sungai yang mendahulukan drainase menggunakan klasifikasi tepi mesh Voronoi/segitiga. Membangun hierarki sungai sebelum menetapkan elevasi medan.
"NEWTS1.0: Model Numerik Erosi Pesisir oleh Gelombang dan Tebing Transgresif" -- MIT (2024). Makalah. Model erosi pesisir sederhana yang menggunakan kemunduran seragam dan erosi akibat gelombang. Menghasilkan tanjung, teluk, pilar laut, dan lengkungan yang sesuai dengan geomorfologi nyata.
Bacaan Lebih Lanjut
- Teknologi Dunia Terbuka 3D di Browser membahas arsitektur lengkap untuk dunia kreator multipemain di browser
- Stack Teknologi Game Web pada 2026 membahas dasar-dasar WebGL, WebGPU, dan WebAssembly
- Laporan Teknis Three.js + USDC tentang pemuatan aset 3D di browser
- Model AI Generatif Sumber Terbuka Mutakhir untuk pipeline pembuatan berbasis AI
- Memulai WebGPU — compute shader untuk medan berbasis GPU
- Web Worker untuk logika game — memindahkan pembuatan medan ke Worker
- Library fisika game — fisika untuk interaksi medan dan collider heightfield
- Tempat Menemukan Aset Game Gratis — sumber tekstur dan material untuk rendering medan
Medan akan lebih menarik jika Anda bisa berjalan di atasnya.




