Yazar: 希彼赫
Canlı deneyin Bu proje hakkında
Bloom, tarayıcıda çalışan gerçek zamanlı bir çiçek tarlasıdır: fareyi tarlada gezdirin ya da kamerayı açıp iki elinizle tutma hareketi yapın; çiçek dalgaları izlediğiniz yol boyunca açar.
Çiçekler, uzaktan yüklenen 3D çiçek modellerinden gerçek zamanlı işlenir; etki yarıçapı, açma hızı, parıltı, çiçek boyutu, yoğunluk ve dalga hızı ayarlanabilir — oynanabilir bir etkileşimli eser ve 3D varlıkların gerçek zamanda nasıl performans gösterdiğine dair bir deneme alanı.
Öne çıkanlar
- Fareyi tarlanın üzerinde gezdirin, çiçek dalgaları izlediğiniz yol boyunca açsın
- Kamerayı döndürmek için sürükleyin, yakınlaştırmak için kaydırın — tarlayı istediğiniz açıdan izleyin
- Kamerayı açın ve iki kez tutma hareketi yapın; tüm tarla bir anda çiçeklensin
- Parıltı, yoğunluk, dalga hızı ve her çiçeğin boyutuyla doygunluğu ayarlanabilir; temiz bir kayıt için H tuşuyla arayüzü gizleyin
Teknik inceleme
3D varlıklar · Tripo text-to-3D
Tarladaki altı çiçek — beyaz, sarı, papatya, mor, mavi ve kırmızı — doğrudan Tripo text-to-3D’den çıkıyor: bir prompt yazıyorsunuz, PBR malzemeli bir GLB alıyorsunuz. Her çiçek 2.000–8.000 üçgen arasında tutuluyor — görsel titizlik için değil, tarla aynı anda beş bine yakın çiçek diktiği için: modeller ne kadar hafifse kare hızı o kadar istikrarlı.
Bütün modeller aynı kurala göre teslim ediliyor: yüz +Z yönünde, taban orijinde, yükseklik yaklaşık bir birim. Kodun hiçbir çiçek için özel duruma ihtiyacı yok — yenisini takın, çalışır.
Ekranda binlercesi · InstancedMesh
Tarayıcıda aynı anda birkaç bin çiçek açtırmanın sırrı Three.js’in InstancedMesh’i: her tür için tek bir geometri ve tek bir malzeme tutuluyor, kopyalama işini instancing üstleniyor — varsayılan olarak yaklaşık 4.900 çiçek, tür başına tek draw call; beklenenden çok daha az yük.
Açılma animasyonu da modellere hiç dokunmuyor: instanceMatrix’teki ölçek değeri örnek örnek güncelleniyor ve her çiçek yerdeki filizden tam açmış hâline büyüyor.
Çiçek dalgaları · raycasting + radyal dalga cephesi
Fare üzerinden geçerken Raycaster imleci çayıra yansıtıyor; değdiği nokta dalganın başlangıcı oluyor. Her çiçek o noktaya uzaklığına bakıp ne zaman açacağına karar veriyor — yakındakiler önce, uzaktakiler sonra, halka halka dışarı yayılıyor. Kulağa karmaşık geliyor ama özü basit bir mesafe hesabı.
El hareketiyle kontrol · MediaPipe Hands
Kamera açıkken MediaPipe Hands elinizdeki 21 noktayı gerçek zamanlı izliyor. Kod tek bir şeye bakıyor: başparmak ile işaret parmağı birbirine değdi mi — iki kez sıkıştırın, bütün tarla parmak ucunuzun gösterdiği yerden birden çiçek açıyor. Yanlış tetiklemeleri önlemek için yalnızca sağ el sayılıyor.
Işıltı · bloom son işleme
Sahnenin üzerindeki o rüya gibi ışık halesi UnrealBloomPass son işlemesinden geliyor: genel ışıltı varsayılan olarak 0,46’da — parlıyor ama patlamıyor. Ayrıca her çiçek türünün kendi ışıltı ve doygunluk ayarı var; atmosferi sonuna kadar açsanız bile hiçbir çiçeğin kendi rengi silinmiyor.
