Membangun dunia terbuka di browser, bagian 11: Mode kebijakan, bukan mode yang di-hardcode

Oleh Oleg Sidorkin, CTO dan Co-Founder Cinevva

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

Setelah bab tentang kekacauan sambungan, kami harus berhenti bereaksi dan mulai mengatur sistem.

Spike 23 mengganti perilaku ad hoc dengan aturan kebijakan yang eksplisit. Alih-alih setiap chunk bertindak berdasarkan apa pun yang disarankan oleh status lokalnya, kini sistem kebijakan terpusatlah yang mengambil keputusan. Level LOD mana yang didapat chunk ini? Apakah chunk dirender sebagai heightmap atau marching cubes? Apakah chunk memerlukan sel transisi, dan pada sisi mana? Jawabannya berasal dari fungsi kebijakan yang mengevaluasi jarak ke kamera, riwayat pengeditan, dan status resolusi chunk tetangga.

Buka Spike 23 di tab baru ↗ · Lihat kode sumber

Penetapan LOD berbasis jarak menggunakan cincin konsentris di sekitar kamera, serupa dengan konsep clipmap tetapi diterapkan pada grid chunk. Chunk cincin 0 mendapatkan MC beresolusi penuh. Cincin 1 mendapatkan MC beresolusi setengah. Cincin 2 dan seterusnya menggunakan mode heightmap. Batasan ketetanggaan sangat penting: untuk setiap dua chunk yang bertetangga, kami mensyaratkan $|L_i-L_j|\le 1$. Rasio resolusi pada sebuah sisi adalah $2^{|L_i-L_j|}$, dan tabel transisi Transvoxel hanya didefinisikan untuk kasus 2:1 ($|L_i-L_j|=1$). Lompatan 2 level akan membutuhkan transisi 4:1 yang tidak dapat direpresentasikan oleh tabel tersebut, sehingga kebijakan memaksa chunk dengan detail lebih rendah untuk ditingkatkan hingga batasan terpenuhi.

Logika peralihan HM/MC memeriksa bitmap pengeditan setiap chunk. Jika sebuah chunk memiliki pengeditan volumetrik apa pun (gua, terowongan, pahatan medan), chunk tersebut tetap berada dalam mode MC terlepas dari jaraknya. Chunk yang belum diedit dapat beralih ke mode heightmap ketika berada cukup jauh. Pendekatan hibrida ini memberi kami kebebasan volumetrik di tempat yang penting dan efisiensi di tempat yang tidak memerlukannya.

Dari luar, spike ini tampak lebih kecil dibandingkan beberapa spike sebelumnya. Dalam praktiknya, ini merupakan peningkatan besar terhadap kenyamanan pengembangan.

Ketika sistem dapat menjelaskan mengapa sebuah chunk beralih mode, Anda tidak perlu menghabiskan banyak waktu untuk menebak. Kami menambahkan overlay berkode warna: hijau untuk chunk heightmap, biru untuk chunk MC, dan oranye untuk sisi dengan transisi aktif. Ketika visibilitas sambungan memiliki kontrol render khusus, ambiguitas dalam debugging visual berkurang. Ketika rentang draw secara eksplisit dikaitkan dengan jumlah vertex aktif dari sistem kebijakan, bayangan geometri usang tidak lagi menghabiskan waktu Anda sepanjang sore.

Kami juga merombak perilaku kamera dalam spike ini. Spike sebelumnya memiliki kontrol orbit sederhana yang cukup untuk mengambil tangkapan layar, tetapi tidak berguna untuk mereproduksi bug. Spike 23 menambahkan kamera terbang WASD dengan kecepatan yang dapat dikonfigurasi, tombol pengunci ketinggian, dan tampilan posisi. Kedengarannya sepele. Namun, inilah perbedaan antara "Saya melihat bug di suatu tempat dekat punggung bukit itu" dan "Bug muncul pada posisi (142, 12, -67) saat menghadap barat laut."

Wawasan utama dari bab ini adalah bahwa kebijakan tidak mengurangi kompleksitas. Kebijakan menata kompleksitas. Jumlah kasus ekstrem yang ada tetap sama. Namun, kini setiap kasus ekstrem memiliki nama, kondisi pemicu, dan lokasi dalam kode tempat Anda dapat memasang breakpoint. Itu adalah jenis keberhasilan yang berbeda, dan hal inilah yang menentukan apakah suatu sistem dapat terus berkembang atau runtuh akibat bebannya sendiri.

Pada akhir Spike 23, kami memiliki lapisan perilaku medan dekat yang cukup mudah diprediksi untuk dihubungkan ke strategi cincin clipmap medan jauh tanpa terus-menerus mengkhawatirkan bug interaksi.

Pada bagian 12, kami membahas Spike 24, ketika transisi cincin, kabut skybox, dan integrasi shader pada tingkat versi Three.js menutup bab proyek ini.

Teknologi yang dibahas dalam bab ini

Kebijakan LOD berbasis jarak. Fungsi terpusat yang menetapkan level LOD dan mode rendering untuk setiap chunk berdasarkan jarak ke kamera, riwayat pengeditan, dan status chunk tetangga. Cincin jarak konsentris menentukan LOD dasar: cincin 0 = MC beresolusi penuh, cincin 1 = MC beresolusi setengah, cincin 2+ = mode heightmap. Fungsi kebijakan dijalankan setiap frame saat kamera bergerak dan memicu transisi chunk. Ini menggantikan keputusan ad hoc per chunk dengan sistem aturan yang mudah diprediksi dan di-debug. Lihat pemilihan LOD berbasis GPU untuk padanannya dalam compute shader.

Batasan ketetanggaan. Algoritma Transvoxel hanya menangani rasio resolusi 2:1. Jika dua chunk yang bertetangga berbeda lebih dari satu level LOD (misalnya, LOD 0 di sebelah LOD 2), tabel transisi tidak dapat menghasilkan geometri sambungan yang valid. Sistem kebijakan menerapkan batasan ini dengan meningkatkan chunk yang memiliki detail lebih rendah ketika selisih LOD melebihi 1. Propagasi batasan ini dapat berantai: peningkatan satu chunk mungkin memaksa chunk tetangganya untuk ikut ditingkatkan. Implementasinya berupa pass iteratif sederhana yang konvergen dalam 2–3 iterasi untuk konfigurasi grid pada umumnya.

Bitmap pengeditan untuk pemilihan mode. Setiap chunk menyimpan bitmap yang mencatat apakah chunk tersebut berisi pengeditan SDF volumetrik (gua, terowongan, pahatan). Chunk dengan pengeditan apa pun tetap berada dalam mode marching cubes terlepas dari jaraknya, sehingga modifikasi kreator tetap terjaga. Chunk yang belum diedit beralih ke mode heightmap ketika cukup jauh dari kamera, sehingga menghemat komputasi dan memori. Bitmap ini berupa satu flag per chunk, tetapi dapat diperluas untuk melacak kepadatan pengeditan agar keputusan mode menjadi lebih terperinci.

Overlay visualisasi debugging. Rendering chunk berkode warna dengan hijau = mode heightmap, biru = mode MC, dan oranye = sisi dengan transisi aktif. Overlay per chunk dilengkapi angka level LOD, label mode, dan tombol wireframe. Ini adalah alat pengembangan, bukan fitur yang dirilis, tetapi manfaatnya terus terasa saat men-debug transisi LOD dan artefak sambungan. Jika dipadukan dengan kamera terbang WASD yang menampilkan posisi dunia secara tepat, alat ini mengubah "Saya melihat bug di suatu tempat" menjadi "Bug muncul pada (142, 12, -67) dengan konfigurasi LOD ini."

---

Bagian 11 dari 12.
Sebelumnya: Bagian 10 - Kekacauan sambungan dan pertarungan bos di sudut
Berikutnya: Bagian 12 - Cincin, kabut langit, dan apa yang akan kami lakukan lagi
Panduan seri: /id/blog/2026-02-25-open-world-browser-series-guide