Kesinlikle en havalı 3D web sitelerinden biri

• Web geliştiricisi Bruno Simon tarafından hazırlanan bu 3D portfolyo sitesi, kullanıcının araba sürerek keşif yaptığı etkileşimli bir ortam sunuyor
• Three.js tabanlı olarak geliştirilmiş; WebGL ve WebGPU’yu birlikte kullanan gerçek zamanlı 3D render sunuyor
• Sitede başarım sistemi, gizli ögeler, ziyaretçi mesajı (Whisper) gibi oyunlaştırılmış unsurlar yer alıyor
• Tüm kodlar ve Blender dosyaları GitHub üzerinde MIT lisansı ile açık; müzikler ise CC0 lisansı ile serbestçe kullanılabiliyor
• Web teknolojileri ile yaratıcı etkileşimi birleştiren bu örnek, 3D web deneyimlerinin potansiyelini gösteren temsilî bir portfolyo

---

Bruno Simon’un 3D portfolyosuna genel bakış

• Web tabanlı bir 3D dünyayı keşfederek üreticinin projelerini ve deneylerini deneyimleyebileceğiniz etkileşimli bir portfolyo yapısında
  • Kullanıcı, bir arabayı kontrol ederek sanal alanda dolaşabiliyor ve çeşitli nesnelerle etkileşime girebiliyor
  • “Don’t break anything!” ifadesiyle eğlenceli bir keşif atmosferi kuruluyor
• WASD, yön tuşları, Space, Enter gibi klavye kontrollerinin yanı sıra dokunmatik ve gamepad girişi de destekleniyor
  • Hareket, zıplama, fren, booster, korna, süspansiyon gibi çeşitli kontrol işlevleri sunuluyor

Oyunlaştırılmış unsurlar ve başarım sistemi

• Sitede 38 başarım (Achievements) bulunuyor ve bunlar belirli hareketlerle açılabiliyor
  • Örnek: “Traveler” (tüm bölgeleri ziyaret etme), “Cookie Clicker” (1000 kurabiyeyi kabul etme), “Flip of faith” (başarılı bir backflip)
  • Sürüş mesafesi, hava durumu deneyimi, patlayan kutuları yok etme gibi çeşitli koşullar da yer alıyor
• Başarım tamamlama süresi ve ilerleme oranı gerçek zamanlı olarak gösteriliyor; ayrıca sunucu skor tablosu (Leaderboard) özelliği de mevcut
  • Ancak sunucu çevrimdışıysa skor kaydı yapılamıyor

Whisper ve topluluk özellikleri

• Ziyaretçiler Whisper özelliğiyle kısa mesajlar bırakabiliyor
  • En fazla 30 karakter, her kullanıcı için yalnızca bir mesaj
  • Yeni mesaj eklendiğinde en eski mesaj siliniyor
  • Küfür yasak ve ülkeye göre bayrak seçimi yapılabiliyor
• Whisper sunucusu çevrimdışıysa mesaj özelliği devre dışı kalıyor

Teknoloji yığını ve açık kaynak yapısı

• 3D render tarafı Three.js ile gerçekleştirilmiş
  • Three.js, mr.doob tarafından oluşturulan bir kütüphane; Sunag tarafından eklenen TSL (Three.js Shading Language) sayesinde hem WebGL hem WebGPU destekleniyor
• Fizik motoru olarak Rapier, ses için Howler.js, yazı tipleri için Amatic SC ve Nunito kullanılıyor
• Tüm kaynak kodu GitHub (brunosimon/folio-2025) üzerinde açık ve MIT lisansı ile yayımlanıyor
  • Blender dosyaları da dahil olduğu için özgürce düzenlenip öğrenme amaçlı kullanılabiliyor
  • Sunucu kodu güvenlik gerekçesiyle kapalı, ancak portfolyo sunucu olmadan da çalışıyor

Müzik ve ek kaynaklar

• Arka plan müzikleri Kounine tarafından portfolyo için özel olarak hazırlanmış
  • CC0 lisansı ile dağıtılıyor; serbestçe indirilebilir ve yeniden kullanılabilir
  • GitHub deposunda /static/sounds/musics yolunda sunuluyor
• Three.js Journey adlı çevrimiçi kurs üzerinden Three.js öğrenme materyalleri de sağlanıyor
  • Three.js kullanarak 3D web üretiminin tüm sürecini ele alıyor
• YouTube Devlog serisi ile portfolyonun geliştirme süreci kaydedilmiş
  • Tamamlandıktan sonra bile son videonun yapımı sürüyor

Genel önemi

• Bruno Simon’un portfolyosu, web teknolojileri, oyun etkileşimi ve sanatsal anlatımın birleştiği bir örnek
• Açık kaynak ve serbest lisans yaklaşımı sayesinde öğrenilebilir ve yeniden kullanılabilir bir 3D web projesi olarak değerlendirilebilir
• Three.js ekosistemi ve WebGPU tabanlı render için gerçek bir uygulama örneği olarak, yeni nesil web grafiklerinin yönünü gösteren bir çalışma

[m00nlygreat]

Bu resmen sadece bir oyun ..

[wedding]

Şirketin ana projesinde tjs kullanalım görüşünü görmezden gelip babylon.js kullanalım diyen geliştirme direktörü... Kendi kararının sorumluluğunu almak bir yana, şirketi ve personeli çekip çıkararak yeni şirket kuran geliştirme direktörü... İyi yaşıyorsunuzdur, değil mi?

[xguru]

Test etmek için kısa süreliğine açık bırakmıştım da... M1 MacBook'um resmen havalanıyor. Ama yine de gerçekten etkileyici.

[GN⁺]

Hacker News yorumu

• Yükleme çemberi dolmuş olsa da gerçekte birkaç saniye daha sürüyor
  1-2 kez yenileyince düzgün açılıyor ve genel olarak harika bir iş olmuş
  Yine de daha fazla zoom out yapılabilse iyi olurdu. Bruno'ya tebrikler
• Yüklemesi yavaş olanlar için açıklayayım: bu bir portföy sitesi ve sıcak bir oyun tarzında, AWSD kontrolleriyle jip benzeri bir araç sürerek etrafta dolaşıyorsunuz
  Her sosyal medyayı simgeleyen küçük tapınak objeleri var; arabayla çarpınca devriliyorlar ama bağlantılar yine de tıklanabiliyor
  Portala dalınca “kaos tanrısına kurban sunma” sayacı artıyor; yani bir tür global durum da var
  Genel olarak sanat tarzı tutarlı ve yaklaşık 5 dakika keşfettikten sonra oldukça tamamlanmış hissettirdi
  Ama HN başlığındaki gibi “en havalı 3D web sitesi”nden ziyade, çok iyi yapılmış bir portföy sitesi demek daha doğru olur
  • iPhone dokunmatik kontrolleriyle kullandım, Genshin Impact oynuyormuşum gibi hissettirdi
  • iOS'taki ddg tarayıcısında da şaşırtıcı derecede iyi çalıştı. Oldukça etkileyiciydi
  • AWSD'nin WASD yazım hatası olup olmadığını sormak istedim
• 25 yıl geriye gitseydim, 15 yaşındaki ben muhtemelen böyle bir “oyun”a onlarca saat gömerdi
  Eskiden mısır gevreği kutularından çıkan ücretsiz oyun Chex Quest için de böyleydim
  Ama şimdi siteye 30 saniye kadar bakıp “güzelmiş” dedim ve hemen kapattım
  Sanırım nedeni (A) zamanın değerine bakışımın değişmesi, (B) oyunlara dalma eşiğinin yükselmesi, (C) zaten oyunlara fazla zaman harcamış olmam
  • Ben de ChexQuest'i gerçekten çok severdim. Yakın zamanda tekrar oynadım; Seattle'daki RE-PC'de CD'sini 1 dolara görünce hemen aldım
  • Eskiden oyunlara erişim bugün olduğundan çok daha düşüktü bence. Şimdi Lonely Mountain: Downhill gibi çok daha zengin oyunlar var
  • Bu aralar bir şey yapmıyor olmaktan duyduğum suçluluk hissi öyle büyük ki, sonunda hiçbir şeyi doğru düzgün yapamıyorum
  • Sonuçta sebep sadece yaşlanmış olmak da olabilir
  • Bu site bana daha önce HN'de paylaşılmış olan The Messenger'ı hatırlattı. Onu daha çok seviyor olabilirim
• Site havalı ama yenilikçi değil
  Son 10 yılda sayısız three.js/babylon.js demosu gördük; bu da üst %10'luk dilimde denebilir
  Eğlenceli ve kaliteli ama yeni bir şey yok, ayrıca bilgi iletme verimliliği düşük
  Bağımsız 3D oyunlarla kıyaslayınca cilalanmışlık açısından da hâlâ mesafe var
  • Tarayıcı sekmem crash verdi
  • OP “en yenilikçi” değil, “en havalı” web sitesi demişti. Benzer seviyede başka demolar da paylaşabilir misin diye merak ettim
• Bruno'nun Threejs dersi harika. Şu an yaklaşık 2/3'ünü izliyorum; sistematik ve dokümantasyonu da iyi
  threejs'e yeni başlayan birinin tavsiyesi bir anlam ifade ediyorsa, kesinlikle öneririm
• Chrome'da çalışmadı ve sekme dondu
  • Benim W11 ve MacOS 15.7.2 sistemlerimde Chrome'da gayet iyi çalıştı
  • Linux'taki Firefox'ta da kusursuz çalıştı
  • Linux'ta Chrome'un WebGPU desteği devre dışı. Uygulama durumu belgesine bakın
  • Edge'de kısa süreliğine takıldı, sonra kendine gelip 3D sahneyi gösterdi
  • Windows'ta Chrome sürüm 142.0.7444.177'de sorunsuz çalıştı
• Mobilde de iyi çalışmasına şaşırdım
  Ama parmakla sürerken iOS'un uzun basma menüsü sık sık açılıyor ve bu da deneyimi bozuyor
• Gerçekten inanılmaz derecede eğlenceli ve yaratıcı bir siteydi
  İnce detaylar ve neşe hissediliyordu; oğlumla birlikte yarış mini oyununu oynadık
  20 saniyelik derece yapanların bunu nasıl başardığını merak ettim. Acaba bir hız takviyesi mi var?
  • Shift tuşu boost. Başlangıç noktasının yakınındaki klavyeden kontrolleri görebilirsiniz
• Ders harika ama bu site bende aynı ölçüde etki bırakmadı
  Bence teknolojinin gerçek değeri, “bununla daha önce yapılamayan bir şeyi yapabiliyor musun?” sorusunda yatıyor
  Örneğin Taş Devri insanı çelik baltayı keşfettiğinde önemli olan baltanın kendisi değil, metalurjidir
  Aynı şekilde bitcoin'den daha önemli olan kriptografi teknolojisi, threejs'ten daha önemli olan da onunla neyi yeni şekilde yapabildiğindir
  Bana göre threejs, react-three-fiber, shader vb. ile çok daha fazlası yapılabilir
  Benim için “havalı” olan, dünyaya farklı bakmanı sağlayan şeydir
  Örnek olarak bu CodePen demosu verilebilir
• Havalı ama web sitesi olarak UX'i pek iyi değil
  3D kullanımını haklı çıkaracak düzeyde bir keşif deneyimi yeniliği bekliyordum, ama o kısım hayal kırıklığı yarattı