Hubit
Hubit'in web üzerindeki etkileşimli 3B katmanı. Sahneyi Three.js ile yazdım ve çevresindeki arayüzü tasarladım; her 3B kontrolün düz bir karşılığı var, kamera da yalnızca kullanıcı isteyince hareket ediyor.
- Frontend geliştirici ve arayüz tasarımcısı
- JavaScript
- Three.js
- 2025
- Sahne orta seviye bir dizüstünde de dönüyor: kare maliyetini o donanımda ölçtüm.
Ne yaptım
Divizyon'da Hubit'in etkileşimli 3B katmanını Three.js ile geliştirdim ve etrafındaki arayüzü tasarladım. İş ikiye ayrıldı: sahneyi demo havasından çıkarıp bir kullanıcı arayüzü gibi okunur hale getirmek ve bu sırada akıcılığı korumak.
Neden böyle kurgulandı
Bir 3B görünüm, ancak düz bir düzenin gösteremeyeceği bir şeyi gösterdiğinde yerini hak eder. Bu kısıt tasarımı belirledi: her kontrolün düz bir karşılığı vardı ve kamera kullanıcının istemediği bir biçimde hiç hareket etmedi, çünkü sahne kendi kendine hareket etmeye başladığında insanlar ona güvenmeyi bırakıyor.
Ne öğrendim
Web'de render performansı büyük ölçüde bir bütçe problemi. Kare maliyeti render döngüsünden çok önce belirleniyor: kaç nesne var, kaç materyal paylaşılıyor ve bir kez yapılabilecek ne kadar iş her karede tekrar ediliyor. Kendi makinem yerine orta seviye bir dizüstü bilgisayarda ölçüm almak, hangi optimizasyonun değdiğini değiştirdi.
Paylaş
Bu sayfanın bağlantısı paylaşıldığında görünen kart.
Sizin de böyle bir sisteminiz mi olacak?
Ne yapılacağını ve hangi tarihe kadar gerektiğini söyleyin. İlk adımı birlikte belirleyelim.