Salah Satu Situs Web 3D Paling Keren Tanpa Tanding

 (bruno-simon.com)
30 poin oleh GN⁺ 2025-12-10 | 4 komentar | Bagikan ke WhatsApp
  • 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
    Iklan

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
    Iklan

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

Bacaan terkait

4 komentar

 
m00nlygreat 2025-12-10

Ini cuma game ...
 
wedding 2025-12-10

Direktur pengembangan yang dulu mengabaikan pendapat untuk memakai tjs pada proyek inti perusahaan dan malah bersikeras memakai babylon.js.. Direktur pengembangan yang, alih-alih bertanggung jawab atas keputusannya sendiri, malah membawa kabur perusahaan dan tenaga kerja lalu mendirikan perusahaan baru.. Semoga hidup Anda baik-baik saja, ya?
 
xguru 2025-12-10

Saya sempat membiarkannya terbuka sebentar untuk mengetes.. lalu MacBook M1 saya seperti mau terbang. Tapi memang luar biasa.
 
GN⁺ 2025-12-10
Komentar Hacker News
  • Lingkaran loading sudah penuh, tapi sebenarnya masih butuh beberapa detik lagi
    Setelah refresh 1~2 kali tampil dengan baik, dan secara keseluruhan ini adalah karya yang keren
    Hanya saja akan lebih bagus kalau bisa zoom out lebih jauh. Salut untuk Bruno
  • Untuk yang loading-nya lambat, ini adalah situs portofolio dengan konsep menjelajah sambil mengendarai kendaraan mirip jip memakai kontrol gaya game cozy dengan AWSD
    Ada objek kuil kecil yang mewakili masing-masing media sosial, dan kalau ditabrak dengan mobil akan roboh, tapi tautannya tetap bisa diklik
    Ada juga status global, misalnya saat menerjang portal, penghitung “mengorbankan persembahan kepada dewa kekacauan” akan naik
    Secara keseluruhan gaya seninya konsisten, dan setelah menjelajah sekitar 5 menit, rasanya cukup matang
    Tapi dibanding “situs 3D paling keren” seperti judul HN, mungkin lebih tepat dilihat sebagai situs portofolio yang dibuat dengan sangat baik
    • Saya memainkannya lewat sentuhan di iPhone dan rasanya seperti bermain Genshin Impact
    • Di browser ddg pada iOS juga berjalan sangat baik, cukup mengesankan
    • Saya sempat ingin bertanya apakah AWSD itu salah ketik dari WASD
  • Kalau kembali ke 25 tahun lalu, versi saya yang berusia 15 tahun mungkin akan menghabiskan puluhan jam untuk “game” seperti ini
    Dulu saya juga begitu dengan game gratis Chex Quest yang ada di dalam kotak sereal
    Tapi sekarang saya hanya melihat-lihat situs ini sekitar 30 detik, bilang “keren juga”, lalu langsung menutupnya
    Mungkin karena (A) nilai waktu sudah berubah, (B) standar imersi game makin tinggi, atau (C) saya sudah menghabiskan terlalu banyak waktu untuk game
    • Saya juga sangat suka ChexQuest. Belakangan saya mencobanya lagi, dan saat menemukan CD-nya seharga 1 dolar di RE-PC Seattle, saya langsung membelinya
    • Dulu akses ke game rasanya jauh lebih terbatas daripada sekarang. Sekarang ada banyak game yang lebih kaya seperti Lonely Mountain: Downhill
    • Akhir-akhir ini rasa bersalah karena tidak melakukan sesuatu begitu besar sampai akhirnya saya malah tidak bisa melakukan apa pun dengan baik
    • Pada akhirnya mungkin penyebabnya adalah bertambahnya usia
    • Situs ini mengingatkan saya pada The Messenger yang pernah muncul di HN dulu. Mungkin saya malah lebih suka itu
  • Situsnya keren, tapi tidak inovatif
    Dalam 10 tahun terakhir sudah ada banyak demo three.js/babylon.js, dan ini kira-kira ada di level 10% teratas
    Menyenangkan dan berkualitas tinggi, tapi tidak ada yang baru, dan efisiensi penyampaian informasi-nya rendah
    Kalau dibandingkan dengan game indie 3D, dari sisi kematangan juga masih ada jarak
    • Tab browser saya crash
    • OP bilang ini bukan situs yang “paling inovatif”, melainkan yang “paling keren”. Saya penasaran apakah Anda bisa membagikan demo lain dengan level serupa
  • Kursus Threejs dari Bruno sangat bagus. Saya sedang mengikuti sekitar 2/3 bagiannya sekarang, dan materinya terstruktur serta terdokumentasi dengan baik
    Kalau rekomendasi dari pemula threejs ada artinya, saya sangat merekomendasikannya
  • Di Chrome tidak berjalan dan tab-nya macet
    • Di W11 dan MacOS 15.7.2 saya, ini berjalan baik di Chrome
    • Di Firefox pada Linux juga berjalan sempurna
    • Di Chrome untuk Linux, dukungan WebGPU dinonaktifkan. Lihat dokumen status implementasi
    • Di Edge sempat macet sebentar lalu pulih lagi dan menampilkan adegan 3D
    • Di Chrome versi 142.0.7444.177 pada Windows, ini berjalan tanpa masalah
  • Saya terkejut karena ini juga berjalan baik di mobile
    Hanya saja saat menyetir dengan jari, menu long-press iOS sering muncul dan merusak imersi
  • Ini benar-benar situs yang sangat menyenangkan dan kreatif, sampai sulit dipercaya
    Terasa penuh detail halus dan keceriaan, dan saya bermain minigame balapan bersama anak saya
    Saya penasaran bagaimana orang-orang yang mencetak waktu 20 detik bisa melakukannya. Apakah ada speed boost?
    • Tombol Shift adalah boost. Di keyboard dekat titik awal, Anda bisa melihat cara bermainnya
  • Kursusnya bagus, tapi situs ini tidak memberi kesan sebesar itu
    Menurut saya nilai sejati teknologi ada pada “apakah ini memungkinkan kita melakukan sesuatu yang sebelumnya tidak bisa dilakukan”
    Misalnya, saat manusia zaman batu menemukan kapak baja, yang penting bukan kapaknya sendiri melainkan metalurginya
    Begitu juga, yang lebih penting daripada bitcoin adalah teknologi kriptografi, dan yang lebih penting daripada threejs adalah apa hal baru yang bisa dibuat dengannya
    Secara pribadi saya merasa dengan threejs, react-three-fiber, shader, dan sebagainya, masih bisa dilakukan jauh lebih banyak hal
    Bagi saya, sesuatu yang “keren” adalah hal yang membuat kita melihat dunia secara berbeda
    Sebagai contoh, ada demo CodePen ini
  • Memang keren, tapi UX sebagai website kurang bagus
    Saya berharap ada inovasi pengalaman navigasi yang cukup untuk membenarkan penggunaan 3D, dan bagian itu terasa mengecewakan