Membangun dunia terbuka di browser, bagian 1: Kami memulainya dengan mencoba merusaknya
Oleh Oleg Sidorkin, CTO dan Salah Satu Pendiri Cinevva
Baru di sini? Gunakan panduan seri. Panduan tersebut menjelaskan apa itu spike dan memuat tautan ke semua bagian.
Kami sedang membangun dunia terbuka multipemain yang sepenuhnya berjalan di browser. Tanpa instalasi, tanpa toko aplikasi, cukup sebuah URL. Risiko terbesar sejak awal sudah jelas: mampukah browser merender dunia 3D persisten pada frame rate yang nyaman dimainkan sekaligus menyisakan ruang untuk gameplay, fisika, dan jaringan?
Sebagian besar proyek dunia terbuka gagal dalam urutan yang mudah diprediksi. Pertama, Anda mendapatkan konsep yang bagus. Lalu, Anda mendapatkan adegan yang indah. Kemudian, Anda menyadari bahwa anggaran frame sudah habis bahkan sebelum gameplay tersedia.
Kami ingin menjawab persoalan anggaran rendering sebelum berinvestasi pada hal lain. Jadi, Spike 1 melewatkan trailer yang memukau dan langsung berfokus pada pengukuran.
Buka Spike 1 di tab baru ↗ · Lihat kode sumber
Rancangannya sengaja dibuat sederhana. Mesh medan berukuran 512 meter, ketinggian prosedural dari noise sinus berlapis dengan penurunan ketinggian menuju tepian pulau, bidang air, kabut atmosferis, dan 500 objek yang dirender menggunakan instancing. Kami menggunakan WebGL biasa dengan Three.js, tone mapping ACES, dan tanpa bayangan.
Kami tidak peduli seperti apa tampilannya. Yang kami pedulikan adalah apakah adegan tersebut tetap stabil saat kamera digerakkan melaluinya.
Ada dua temuan dari spike ini yang membentuk keseluruhan proyek.
Pertama, kami memastikan bahwa desktop memberikan ruang performa yang nyata jika tahap pertama tetap dibangun secara disiplin. Hal ini memberi kami keyakinan untuk mencoba arsitektur medan yang lebih sulit di kemudian hari.
Kedua, kami membuat kontrak tolok ukur dasar. Setiap spike berikutnya harus menjelaskan biayanya relatif terhadap adegan ini. Jika sebuah fitur baru terlihat bagus tetapi terlalu mahal, fitur tersebut tidak akan dilanjutkan.
Disiplin terhadap tolok ukur dasar ini menjadi sangat penting ketika kami kemudian menghadapi artefak sambungan, transisi LOD campuran, dan pembuatan mesh berbasis compute. Tanpa acuan yang stabil, setiap bug tampak lebih besar daripada kenyataannya.
Pada bagian 2, kami beralih dari rendering ke responsivitas input. Fisika di worker terdengar hebat dalam dokumen arsitektur. Namun, itu hanya berguna jika karakter masih terasa langsung merespons saat Anda menekan tombol.
Teknologi yang dibahas dalam bab ini
Medan heightmap. Grid 2D dengan setiap sel menyimpan satu nilai elevasi. GPU menggeser mesh datar di vertex shader untuk membentuk permukaan medan. Heightmap berukuran ringkas (chunk 65x65 berukuran ~8 KB pada 16-bit), ramah GPU, dan cepat dirender. Keterbatasannya adalah heightmap tidak dapat merepresentasikan gua, ceruk menggantung, atau permukaan apa pun yang melipat kembali ke atas dirinya sendiri. Untuk memahami batasan heightmap dan teknologi penggantinya, lihat panduan pembuatan lanskap kami.
Three.js. Library rendering yang kami gunakan di seluruh proyek ini. Three.js mengabstraksikan WebGL 2 (dan kemudian WebGPU) menjadi scene graph dengan kamera, cahaya, material, dan objek geometri. Library ini menyediakan InstancedMesh untuk merender banyak salinan geometri yang sama dalam satu draw call, frustum culling, material PBR, dan pascapemrosesan. Lihat Three.js di GitHub. Untuk memahami peran Three.js dalam stack dunia terbuka berbasis browser, lihat panduan teknologi 3D browser kami.
InstancedMesh. Fitur Three.js yang merender N salinan geometri yang sama dengan satu draw call, masing-masing pada posisi/rotasi/skala yang berbeda. Transformasi per instance disimpan dalam buffer atribut matriks. Dengan cara inilah kami merender 500 objek dalam Spike 1 tanpa 500 draw call terpisah. Untuk vegetasi dalam skala besar, instanced culling berbasis GPU membawa pendekatan ini lebih jauh. Lihat panduan lanskap kami tentang culling vegetasi berbasis GPU.
Anggaran frame. Pada 60 fps, setiap frame memiliki waktu
Bagian 1 dari 12.
Selanjutnya: Bagian 2 - Fisika worker dan kekhawatiran akan lag input
Panduan seri: /id/blog/2026-02-25-open-world-browser-series-guide