Membangun dunia terbuka di browser, bagian 6: Clipmap mengubah alur cerita

Oleh Oleg Sidorkin, CTO dan Co-Founder Cinevva

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

Sebelum Spike 10, model mental kami masih berupa "dunia yang lebih besar berarti lebih banyak geometri." Setelah Spike 10, modelnya berubah menjadi "anggaran geometri konstan, pembaruan cincin yang berpusat pada kamera." Perubahan ini mengubah arah proyek.

Gagasan di balik geometry clipmap cukup sederhana. Terrain dirender sebagai sekumpulan cincin konsentris yang berpusat pada kamera. Cincin terdalam memiliki kerapatan vertex tertinggi. Setiap cincin $k$ ke arah luar menggandakan jarak antar-vertex, $s_k=s_0\cdot 2^k$, sehingga mencakup area permukaan tanah $4\times$ lebih luas daripada cincin di dalamnya.

Penggandaan itulah inti triknya. Jarak pandang bertambah secara geometris seiring jumlah cincin, $d_{\text{view}}\approx s_0\cdot 2^L$, sedangkan biaya vertex hanya bertambah secara linear:

$$V_{\text{total}}\approx N^2\cdot L$$

untuk $L$ cincin yang masing-masing memiliki $N\times N$ vertex. Menggandakan jarak pandang hanya membutuhkan satu cincin tambahan, bukan geometri empat kali lebih banyak. Jumlah segitiga tetap kurang lebih konstan terlepas dari ukuran dunia karena Anda selalu merender $L$ cincin yang sama pada resolusi yang sama.

Buka Spike 10 di tab baru ↗ · Lihat kode sumber

Trik praktisnya adalah geomorphing pada batas cincin. Ketika sebuah vertex bertransisi dari satu cincin LOD ke cincin berikutnya, tingginya harus berbaur secara mulus antara sampel beresolusi tinggi dan rendah. Tanpa itu, akan muncul lompatan visual setiap kali kamera bergerak dan cincin bergeser. Kami menanganinya dengan faktor pembauran berdasarkan jarak vertex ke tepi cincin, lalu menginterpolasi tinggi di vertex shader:

$$h=\mathrm{lerp}(h_{\text{fine}},h_{\text{coarse}},\alpha ),\alpha =\mathrm{smoothstep}(d_{\text{near}},d_{\text{far}},d)$$

dengan $d$ sebagai jarak vertex dari kamera. Di dalam cincin ($d\le d_{\text{near}}$), vertex menggunakan tinggi pada resolusi penuh; ketika mencapai cincin berikutnya ($d\ge d_{\text{far}}$), vertex tersebut sudah beralih ke tinggi kasar yang akan digunakan oleh cincin itu, sehingga tidak ada lagi yang dapat menimbulkan lompatan visual.

Satu pelajaran yang tidak terlalu kentara muncul dari pengujian pergerakan kamera. Clipmap mudah dinilai dari tangkapan layar statis, tetapi artefak transisi bisa terlewat. Kami menghabiskan waktu menjalankan penelusuran berkecepatan konstan melintasi batas-batas cincin sambil mengamati noise temporal. Tangkapan layar menipu. Gerakan menunjukkan kenyataan.

Spike ini juga memberi kami batas arsitektur yang jelas. Seiring waktu, terrain jarak dekat dapat menjadi dinamis dan mahal, dengan pengeditan volumetrik, kompleksitas material yang lebih tinggi, dan interaksi fisika. Terrain jarak jauh dapat tetap stabil, dapat diprediksi, dan murah. Pemisahan ini menjadi tulang punggung setiap keputusan arsitektur sejak saat itu.

Jika Anda sedang mengevaluasi clipmap untuk proyek sendiri, ujilah dengan rangkaian uji stres, bukan gambar cantik. Jalur penelusuran yang panjang, perubahan ketinggian kamera, dan perlintasan batas secara berulang adalah hal-hal yang mengungkap masalah sebenarnya.

Pada bagian 7, kami menambahkan meshing volumetrik dan beralih dari "terrain sebagai permukaan" menjadi "terrain sebagai volume yang dapat diedit." Pada titik itulah proyek ini berhenti sekadar menjadi renderer dan mulai berkembang menjadi editor dunia.

Teknologi yang dirujuk dalam bab ini

Geometry clipmap. Diperkenalkan oleh Losasso dan Hoppe pada SIGGRAPH 2004 (makalah), geometry clipmap merender terrain sebagai cincin-cincin persegi konsentris yang berpusat pada kamera. Setiap cincin mencakup area dua kali lebih luas daripada cincin sebelumnya dengan separuh resolusi vertex. Jumlah total vertex bersifat konstan: sekitar $N^2\cdot L$. Dengan $N=256$ dan $L=8$ level, hasilnya adalah ${256}^2\times 8\approx \mathrm{524,000}$ vertex, terlepas dari ukuran dunia. CPU memperbarui data heightmap untuk setiap cincin saat kamera bergerak. Vertex shader membaca tinggi dari sebuah tekstur dan menggeser grid datar. Lihat panduan landscape kami tentang geometry clipmap dan GPU Gems 2, Bab 2.

Geomorphing. Artefak visual terbesar dalam LOD terrain adalah popping: vertex tiba-tiba melompat ketika sebuah patch berganti level LOD. Geomorphing menghilangkan hal ini dengan membaurkan posisi vertex di antara level-level LOD dalam sebuah zona transisi. Setiap vertex menyimpan tinggi LOD saat ini sekaligus tinggi LOD yang lebih kasar. Faktor morph berdasarkan jarak kamera menginterpolasi keduanya secara mulus: morphedHeight = mix(fineLodHeight, coarseLodHeight, smoothstep(lodNear, lodFar, distance)). Zona transisi biasanya mencakup 20% bagian terluar dari setiap cincin. Pada kecepatan kamera normal, transisinya tidak terlihat. Lihat detail geomorphing.

CDLOD (Clipmap Adaptif Quadtree). Penyempurnaan clipmap bercincin tetap oleh Strugar (2014, makalah). Alih-alih menggunakan cincin konsentris dengan resolusi seragam, CDLOD menggunakan quadtree yang beradaptasi dengan kompleksitas terrain. Area datar menggunakan node kasar, sedangkan area dengan detail tinggi (tebing, punggung bukit) mendapatkan subdivisi yang lebih halus. Hal ini penting bagi dunia buatan kreator karena setiap chunk dapat memiliki tingkat kompleksitas yang sangat berbeda. Lihat CDLOD dalam panduan landscape kami.

---

Bagian 6 dari 12.
Sebelumnya: Bagian 5 - Menganggarkan hal-hal yang mempercantik tampilan
Berikutnya: Bagian 7 - Marching cubes dan gua nyata pertama
Panduan seri: /blog/2026-02-25-open-world-browser-series-guide