Game Browser: Cara Kami Membuat Relic Hunter dengan Three.js dan Gambar AI

Saya ingin Relic Hunter: Kuil Runtuh terlihat seperti kuil sungguhan, bukan tiruan kuil ala video game. Gambar-gambar AI-nya punya batu berukir, cahaya obor yang hangat, dan bayangan yang pekat. Sedangkan build Three.js pertama saya cuma berisi kotak-kotak berlapis tekstur cokelat yang berulang.

Beginilah cara saya menutup jurang itu dan mengubah satu lorong buatan AI menjadi labirin yang bisa dijelajahi. Relic Hunter adalah game browser gratis yang jalan di desktop maupun ponsel, tanpa download atau instal. Di balik satu tautan sederhana itu ada sistem proyeksi, shader kustom, dan sejumlah kompromi praktis yang berpangkal pada satu pertanyaan: bagaimana membuat game 3D yang sinematik bisa termuat cepat di dalam browser?

Kenapa membuat game 3D untuk browser?

Keunggulan terbesar game browser adalah akses. Pemain tinggal klik tautan dan langsung main. Tidak ada installer, halaman toko aplikasi, atau akun yang menghalangi rasa penasaran dari permainan pertama. Karena itu game browser gratis gampang ditemukan, dicoba, dan dibagikan.

Kendalanya, setiap model, tekstur, dan animasi tambahan memperpanjang waktu tunggu sebelum bisa main. Relic Hunter pun butuh sistem visual yang bisa memakai ulang sedikit aset untuk enam level, tanpa membuat tiap lorong tampak seperti hasil salin-tempel.

Game di balik eksperimen visual

Relic Hunter bukan lorong lurus tak berujung yang dilukis supaya mirip labirin. Setiap dari enam ujiannya dibangun dari labirin hasil generasi, lengkap dengan persimpangan, rute alternatif, dan jalan buntu yang sungguhan. Sebelum mulai, kamu punya beberapa detik untuk mempelajari peta. Begitu timer jalan, kamu harus mengingat rute, berbelok di persimpangan yang benar, dan terus bergerak.

Jadi game ini sebagian game pelari labirin, sebagian tantangan memori, dan sebagian lagi pelarian dari kuil. Salah belok harganya lebih mahal daripada beberapa langkah: kamu harus putar balik sementara timer keruntuhan terus berjalan. Kamu bisa menahan M untuk melihat peta lagi, tapi membacanya sambil berlari punya tekanan tersendiri.

Tiga nyawa bersama berlaku sepanjang kampanye. Bahayanya datang satu per satu, lalu mulai bertumpuk: bilah yang berayun harus dihindari dengan merunduk, balok yang jatuh dan lantai yang pecah harus dilompati, dan kepala singa berukir menyemburkan api melintasi jalan. Di ujian kelima, Mira atau Vikram akhirnya merebut Syamantaka, permata matahari milik Surya. Ujian keenam adalah pelarian, dengan kuil yang runtuh di belakangmu.

Kenapa tekstur 3D biasa terlihat janggal

Arah visualnya bermula dari gambar-gambar buatan AI berupa lorong batu berukir, cahaya obor yang hangat, dan bayangan pekat. Sebagai gambar diam, semuanya meyakinkan. Versi pertama yang bisa dimainkan tidak. Batu yang diulang sebagai tekstur biasa menghasilkan kotak berpetak-petak, dan membuang bagian terpenting dari gambar sumbernya: pencahayaannya.

Foto terlihat nyata sebagian besar karena cahayanya: bayangan lembut di pertemuan dinding dan lantai, pendar di sekitar obor, dan gelap di ujung aula. Tekstur yang bisa diulang sengaja diratakan supaya bisa disusun tanpa sambungan. Begitu saya menghilangkan pencahayaan agar gambarnya bisa berulang, saya juga menghilangkan bagian yang membuatnya terasa nyata.

Tour Into the Picture: memproyeksikan gambar ke 3D

Solusinya datang dari teknik grafika komputer bernama Tour Into the Picture, disingkat TIP. Bayangkan gambar sumbernya diambil oleh kamera sungguhan. Saya menaruh kamera virtual di titik yang sepadan di adegan Three.js, memberinya sudut pandang yang cocok, lalu memproyeksikan gambar ke geometri lantai, dinding, dan langit-langit yang sederhana, seperti proyektor slide.

Di dekat titik pandang itu, lorong mempertahankan bayangan, pendar, dan kedalaman gambar aslinya, tapi berperilaku seperti ruang yang bisa dilewati pemain. Di shader, setiap titik pada permukaan bertanya di mana ia jatuh pada gambar proyektor, lalu mengambil warna di situ. Prototipe pertama yang berhasil rasanya seperti berjalan masuk ke dalam lukisan.

Lima masalah yang muncul begitu pemain bergerak

1. Peregangan: makin jauh pemain dari proyektor, makin terdistorsi gambarnya.
2. Lubang: bukaan samping dan permukaan jauh yang berada di luar pandangan kamera sumber tidak punya detail proyeksi.
3. Kedipan: berganti arah proyeksi di persimpangan membuat dinding melompat atau berkilauan.
4. Noda gerak: satu piksel sumber bisa merentang ke banyak piksel layar pada lantai dan dinding samping.
5. Cahaya yang sudah terpanggang: gambar proyeksi sudah memuat cahaya, jadi obor waktu nyata biasa tidak bisa begitu saja menyinarinya ulang.

Masalah-masalah ini gampang terlewat di tangkapan layar, tapi mustahil diabaikan saat berlari. Itu mengubah cara saya menilai grafisnya: setiap perbaikan harus tahan saat bergerak, berbelok, dan balik arah, bukan cuma bagus di satu gambar diam yang dipilih dengan hati-hati.

Sistem hibrida yang akhirnya dirilis

Alih-alih satu proyektor untuk aula yang panjang, game menyebar proyektor di sepanjang setiap lorong terbuka ke kedua arah. Di setiap frame, game memilih proyektor terdekat yang menghadap searah pemain, lalu memadukan sejumlah terbatas dari mereka. Pemain tak pernah terlalu jauh dari sumber yang berguna, sehingga gambar tidak sampai runtuh menjadi buram yang meregang.

Titik-titik arsitektur yang rumit memakai geometri sungguhan. Dinding ujung diberi panel berukir supaya tidak tampak seperti lorong yang berlanjut selamanya. Bukaan samping memakai panel lengkung dengan lubang yang sebenarnya, sehingga setiap belokan mudah dibaca. Permukaan di luar proyeksi terbaik dikembalikan ke batu, bukan hitam.

Shader akhirnya berupa hibrida. Ia mengukur seberapa meregang foto proyeksi di setiap piksel. Bagian yang tajam tetap memakai foto. Permukaan curam yang ternoda dipadukan dengan ubin batu yang tajam. Ubin itu meminjam pencahayaan yang diburamkan dari foto. Gambar AI tetap menentukan di mana lorong terasa hangat atau gelap, sedangkan ubin memulihkan detail halus saat bergerak. Anisotropic filtering dan mipmap mempertajam sisa sampel bersudut curam.

Karakter dan jebakan dipisahkan

Lorong adalah panggungnya. Mira, Vikram, bilah berayun, kepala singa penyembur api, balok jatuh, dan lantai pecah adalah lapisan interaktif yang terpisah. Apa pun yang bisa dipukul, dihindari, atau ditonton animasinya butuh objeknya sendiri; kalau bahaya dipanggang ke dalam gambar lorong, interaksinya jadi terlihat datar.

Bagian yang beranimasi lewat alur terpisah: gambar diam yang bersih dibuat dengan ChatGPT, klip pendek dianimasikan dengan Grok, lalu latar hijau dihapus sebelum ditempatkan ke adegan Three.js. Memisahkan dunia dari bagian-bagiannya yang bergerak membuat keduanya lebih mudah disetel.

Apa arti pendekatan ini bagi game browser web

Game browser web zaman sekarang bisa menghadirkan grafis 3D waktu nyata, shader kustom, animasi, suara, dan input yang responsif di dalam halaman biasa. Relic Hunter melakukannya dengan satu gambar lorong utama, satu panel lengkung, dan segelintir tekstur batu, bukan pustaka besar lingkungan 3D yang mendetail.

Hasilnya adalah game Three.js yang ringkas, dengan lorong-lorong yang tetap membawa suasana karya AI-nya saat pemain berlari, berbelok, dan balik arah. Hemat aset seperti ini penting untuk game tanpa download: file yang lebih kecil memperpendek jarak antara membuka halaman dan benar-benar bermain.

Cara memainkan Relic Hunter online

1. Buka Relic Hunter: Kuil Runtuh di browser.
2. Pilih Mira atau Vikram sebagai pemburu relik kamu.
3. Pelajari peta sebelum tiap ujian dimulai.
4. Berbelok di persimpangan, lompati atau rundukkan badan melewati jebakan, dan capai pintu keluar sebelum waktu habis.
5. Rebut Permata Syamantaka dan lolos dari keruntuhan terakhir.

Kalau kamu sedang mencari game browser 3D gratis, pelari labirin kuil yang cepat, atau salah satu game browser online gratis yang bisa dimulai tanpa akun, coba satu permainan dan buktikan bahwa kamu sanggup membawa permata matahari kembali ke cahaya siang.

Mainkan Relic Hunter sekarang. Gratis, online, dan tanpa download. · Jelajahi lebih banyak game browser · Baca tentang game gratis tanpa download.