- 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
Henüz yorum yok.