Three.js ile sıvı fondöten yayılma efekti geliştirildi

Geliştirici Misaki Nakano, bir kozmetik markasının tanıtım projesinde kullandığı sıvı fondöten yayılma simülasyonunun teknik ayrıntılarını paylaştı. Çalışma, fiziksel hacim korunumuna dayalı karmaşık simülasyonlar yerine doğrudan görsel gerçekçiliği hedefleyen gölgelendirici (shader) tekniklerine odaklanıyor. Sistem, akışkan hız haritası (velocity map) ile sıvı kalınlığını temsil eden bir yükseklik haritasını (height map) bir araya getirerek tarayıcı üzerinde gerçek zamanlı etkileşim sağlıyor.

Yöntemde geometrik tepe noktaları hareket ettirilmiyor; sıvı kabarıkları ve dalgalanmalar doğrudan parça gölgelendirici (fragment shader) içinde hesaplanıyor. İki boyutlu tamponlar (FBO) arasında taşınım (advection) algoritması uygulanarak hız haritası geriye doğru taranıyor ve kalınlık değerleri piksel bazında güncelleniyor. Yüzeydeki parlama ve gölgelendirmeler için komşu piksellerden elde edilen yüzey normalleri Matcap dokusuyla birleştiriliyor, yayılma sonrası arkada kalan ince sıvı izleri ise geçmiş değerleri saklayan ayrı bir alfa haritasıyla korunuyor.

Geliştirici, parçacık gölgelendiricilerin paralel çalışma yapısı nedeniyle toplam sıvı hacminin fiziksel olarak tam korunmadığını ancak yöntemin görsel açıdan tatmin edici sonuçlar verdiğini belirtti. Deneyler, 8 bit dokuların basamaklanma kusurları ürettiğini, 32 bit kayan nokta dokuların ise çok daha pürüzsüz yüzey normalleri sağladığını gösterdi. Çalışmada ayrıca basitleştirilmiş Kubelka-Munk renk karışım modeli kullanılarak birden fazla sıvının birbirine karışabildiği bir deney de paylaşıldı.