- Situs portofolio 3D buatan pengembang web Bruno Simon yang menghadirkan lingkungan interaktif tempat pengguna menjelajah sambil mengendarai mobil
- Dibangun berbasis Three.js, dengan rendering 3D real-time yang memanfaatkan WebGL dan WebGPU sekaligus
- Di dalam situs terdapat elemen bergaya game seperti sistem achievement, elemen rahasia, dan fitur pesan pengunjung (Whisper)
- Seluruh kode dan file Blender dibuka di GitHub dengan lisensi MIT, sementara musiknya tersedia bebas digunakan dengan lisensi CC0
- Sebagai contoh perpaduan teknologi web dan interaksi kreatif, ini merupakan portofolio representatif yang menunjukkan potensi pengalaman web 3D
Gambaran umum portofolio 3D Bruno Simon
- Berbentuk portofolio interaktif yang memungkinkan pengunjung menjelajahi dunia 3D berbasis web sambil mencoba proyek dan eksperimen sang pembuat
- Pengguna dapat mengendalikan mobil untuk berkeliling ruang virtual dan berinteraksi dengan berbagai objek
- Frasa “Don’t break anything!” membangun suasana eksplorasi yang santai dan menyenangkan
- Mendukung kontrol keyboard seperti WASD, tombol panah, spasi, enter, serta input sentuh dan gamepad
- Menyediakan beragam aksi seperti bergerak, melompat, rem, booster, klakson, dan suspensi
Elemen bergaya game dan sistem achievement
- Situs ini memiliki 38 achievement yang bisa diraih lewat tindakan tertentu
- Contoh: “Traveler” (mengunjungi semua area), “Cookie Clicker” (menerima 1000 cookie), “Flip of faith” (berhasil melakukan backflip), dan lain-lain
- Mencakup beragam syarat seperti jarak tempuh, merasakan cuaca, hingga menghancurkan kotak peledak
- Waktu pencapaian dan progres ditampilkan secara real-time, serta tersedia fitur leaderboard server
- Namun, jika server sedang offline, skor tidak dapat disimpan
Fitur Whisper dan komunitas
- Pengunjung dapat meninggalkan pesan singkat melalui fitur Whisper
- Maksimal 30 karakter, dan setiap pengguna hanya bisa memiliki satu pesan
- Saat pesan baru ditambahkan, pesan lama akan dihapus
- Kata-kata kasar dilarang, dan pengguna dapat memilih bendera negara
- Jika server Whisper offline, fitur pesan akan dinonaktifkan
Tech stack dan komponen open source
- Rendering 3D diimplementasikan dengan Three.js
- Three.js adalah library buatan mr.doob, dan berkat TSL (Three.js Shading Language) yang ditambahkan oleh Sunag, ia mendukung WebGL maupun WebGPU
- Mesin fisika menggunakan Rapier, audio memakai Howler.js, dan font menggunakan Amatic SC serta Nunito
- Seluruh source code dibuka di GitHub (brunosimon/folio-2025) dengan lisensi MIT
- File Blender juga disertakan sehingga bebas dimodifikasi dan dipelajari
- Kode server tidak dipublikasikan demi keamanan, tetapi portofolionya tetap berjalan tanpa server
Musik dan materi tambahan
- Musik latar dibuat khusus oleh Kounine untuk portofolio ini
- Didistribusikan dengan lisensi CC0, sehingga bebas diunduh dan digunakan ulang
- Tersedia pada path
/static/sounds/musics di repositori GitHub
- Materi belajar Three.js juga disediakan melalui kursus online bernama Three.js Journey
- Membahas seluruh proses pembuatan web 3D menggunakan Three.js
- Proses pengembangan portofolio ini didokumentasikan lewat serial Devlog di YouTube
- Bahkan setelah selesai, pembuatan video terakhir masih terus berlanjut
Makna keseluruhan
- Portofolio Bruno Simon adalah contoh perpaduan teknologi web, interaksi game, dan ekspresi artistik
- Melalui open source dan lisensi bebas, proyek ini bisa dimanfaatkan sebagai proyek web 3D yang dapat dipelajari dan digunakan ulang
- Sebagai contoh implementasi nyata dari ekosistem Three.js dan rendering berbasis WebGPU, karya ini menunjukkan arah grafis web generasi berikutnya
Belum ada komentar.