Yanardöner Sıvı Shader Tasarımı

Matematikle kurulan su üzerindeki yağ görünümü

Iridescent Liquid, uygulama ekranlarından oluşan bir koleksiyon yerine tek bir WebGL önizlemesi etrafında kurulmuş resmî bir OpenDesign örneğidir. Yazarın koyduğu “LIQUID IRIDESCENCE” başlığı, akan mor, camgöbeği, pembe ve gül tonlu formlardan oluşan doygun bir alanın üzerinde yer alır. Kompozisyon tuvali konu yapar; açıklayıcı metni ise sol alttaki okuma yoluna yakın tutar.

Destekleyici metin etkiyi “living oil-on-water field” olarak adlandırır. Uygulama; küre ağı ya da fotoğrafik doku yerine prosedürel gürültüyle tam ekran bir üçgen çizer. Bu sayede gerçek bir nesne göstermeden akışkan bir malzemeyi çağrıştırır. Malzeme dili görsel bir metafordur; fiziksel olarak doğru bir yağ veya su simülasyonunun kanıtı değildir.

Üstteki “OPENDESIGN · WEBGL PREVIEW” bağlamı belirtir, “REAL-TIME · GPU” ise render yaklaşımını çerçeveler. Bu etiketler, büyük başlık okunmadan önce izleyiciyi yönlendirir; ancak ölçülmüş kare hızının veya üretim ortamındaki performansın kanıtı değil, betimleyici arayüz metni olarak ele alınmalıdır.

01

Kesintisiz Tuval

Görsel alan kompozisyonu doldurur; böylece hareket, ayrı panellerin arka planı olmak yerine birincil içerik olarak kalır.

02

Dokulu Kontrast

Büyük beyaz harfler, editoryal mesajı yoğun renk alanından ayırır; ancak arka plan değişirken yerleşimin sabit kalması gerekir.

Tasarım nerede işe yarar

Bu çalışma en çok etkileşimli görsel arka planlar, üretken sanat çalışmaları ve yaratıcı kodlama gösterimleri için referans olarak yararlıdır. Bir sayfanın görsel bir deneyi yalnızca kısa bir açıklama, büyük bir başlık ve doğrudan bir etkileşim ipucuyla nasıl anlatabileceğini gösterir. Animasyonlu yüzey küçük etiketlerle ve ayrıntılı içerikle yarıştığı için bilgi yoğun arayüzlere daha az uygundur.

“MOVE THE CURSOR ↗” yönergesi izleyiciyi pasif gözlemciden katılımcıya dönüştürür. Sunulan durumlar aynı tuvali farklı renk sınırları ve dalga düzenleriyle gösterirken katman tutarlı kalır. Bu eşleşme durum değişimini okunur kılar: kompozisyon değişir, okuma çerçevesi değişmez.

Kompozisyon ve Hareket

Tasarım güçlü bir dikey okuma sırası kullanır: üstte bağlam etiketleri, sol alta yakın aşırı büyük “LIQUID IRIDESCENCE” başlığı, altında açıklayıcı metin ve sağ altta imleç yönergesi. Bu, dikkati geniş tuvale yayarken ana mesajı tek bir okunabilir blokta toplar.

Görüntüler, bağımsız ekranları değil aynı shader tuvalinin üç durumunu gösterir. Bunlar boyunca başlık ve destekleyici cümle yerinde kalır; çevredeki akıntılar camgöbeği ağırlıklı bölgelerden daha çok macenta, pembe, turkuaz ve koyu sarı geçişlere kayar. Sabit katman harekete bir referans noktası verir; bedeli, arka planın metnin bazı bölümlerinin arkasında kontrastı azaltabilmesidir.

Fragment shader, zincirlenmiş iki çarpıtma alanı üzerinden altı katmanlı gürültü kullanır. İmlece olan uzaklığa göre ağırlıklandırılan bir çekim, örnekleme koordinatlarını büker; kosinüs paleti ve parlak sırt terimleri yanardöner akıntıları oluşturur. Her iki imleç koordinatında da hedefe kalan fark her karede 0,06 ile çarpılıp mevcut koordinata eklenirken geçen zaman alanı değiştirmeyi sürdürür. Sağ alttaki yönerge tıklanabilir bir kontrol değil, sabit metindir.

Yapı Olarak Renk

Palet tek bir gradyan değildir. Soluk, parlak konturlarla kenarlanmış geniş renkli akıntılar olarak düzenlenmiştir. Camgöbeği ve turkuaz, baskın macenta ve mor alanın içinde daha soğuk kesintiler sağlarken soluk pembe çizgiler akış yönünü ortaya koyar. Bu çeşitlilik, birebir geometri eklemeden tuvalin derinlik hissi vermesine yardım eder.

Sabit Okuma Çerçevesi

Tekrarlanan katman pratik bir etkileşim kalıbını gösterir: görsel çalışma değişirken başlığı ve yönergeyi koruyun. Yeniden oluşturma bu ilişkiyi bozmamalı, ardından seçilen paletin metnin altında yeterli kontrastı bırakıp bırakmadığını test etmelidir.

İşlevlerin sınırları

Bu çalışma bir tasarım ve render örneğidir. Sunulan kanıt; görünür WebGL tuval durumlarını, yerel imleç tepkisi işlemeyi, yeniden boyutlandırmayı ve bir animasyon döngüsünü destekler. Bağlı hizmetleri, depolamayı, üretim ortamına dağıtımı, ölçülmüş kare hızlarını veya özgün üretimde kullanılan modeli doğrulamaz. Bu nedenle üç görüntü, ayrı iş akışlarının veya test edilmiş performansın kanıtı olarak değil, tek bir kompozisyonun görsel durumları olarak okunmalıdır.

Nasıl Uyarlanır

Yeni bir sürüm için prosedürel hareket ile editoryal çerçeve arasındaki ilişkiyi koruyun, ardından her seferinde yalnızca bir değişkeni değiştirin: palet, dalga ölçeği, başlık yerleşimi veya imleç etkisi. Değişikliği tuvalde gözlemlenebilir tutun ve önerilen davranışı mevcut bir yetenek olarak değil, önerilen davranış olarak tanımlayın.