Web Tasarımında Gerçekçi Özel Efektler Oluşturmak için Gölgelendiricileri Kullanma

WebGL, web'de mümkün olanın sınırlarını deneyen ve test eden bir konu haline geldi. Neredeyse her gün, onun tarafından desteklenen görkemli çözümlere rastlıyoruz. Kanıt olarak, bir dizi gerçek projeyi zaten inceledik.

Bugün, gölgelendirici kullanmanın faydalarını gösteren bazı kavramları keşfedeceğiz. GLSL'ye odaklanacağız.

GLSL, Graphics Library Shader Language anlamına gelir. WebGL'nin ayrılmaz bir parçasıdır ve doğada gördüğümüz akıllara durgunluk veren çözümlerin çoğundan sorumludur. Adına yakışır şekilde geliştiricilere grafikleri sezgisel olarak işlemek için araçlar sağlar. Doğru ellerde hemen hemen her fikri hayata geçirebilir.

Codepen, gölgelendiricilerin yardımıyla yaratılan büyüleyici projelerle dolup taşıyor. Ancak gerçekçi etkiler gösterenler en etkileyici ve ilham verici olanlardır. Ve bugünün koleksiyonunda bunu kanıtlayacağız. Hadi dalalım.

Stefan Weck tarafından tasarlanan Waterdroplet WebGL Shader

Stefan Werk, son teknoloji teknolojilerin gerçek bir sihir olduğunu herkese kanıtlayarak, başyapıtı ile özetimizi açıyor. Bir pencereye (veya bizim durumumuzda bir ekrana) düşen yağmuru yeniden yaratmayı başardı. Yağmur damlalarının davranışı ve gerçekleşmesi o kadar gerçektir ki onlara dokunmak istersiniz. Burada JavaScript yağmur simülasyonunun arkasında dururken WebGL gölgelendirici yapışkan etki ve kırılma için sorumluluk alır.

Üç js su gölgelendirici Jonathan Blair / ShaderToy Derlemesi David Hartley

Belki de sonraki iki proje, koleksiyonumuzdaki gölgelendirici kullanmanın en etkileyici örnekleri arasındadır. Her biri, perde arkasında olan biten her şeyle başa çıkmak için bilgisayarınızı tam kapasiteyle çalışmaya zorlasa da, buna değer. Tüm bu dalgalanmalar, küçük ve büyük dalgalar ve değişen renkler ile her konsept inanılmaz derecede gerçekçi ve çok ilham verici görünüyor.

Jonathan Blair sadece su yüzeyini yeniden yaratırken, David Hartley ikincisine küresel bir şekil vererek ve böylece Dünya'yı ustaca taklit ederek işleri biraz ilginç hale getirdi. Her iki proje de akıllara durgunluk veriyor.

Omar Shehata'dan Pixijs.v3 Shader Örneği

Pixi.js tarafından desteklenen, Omar Shehata'nın bu büyüleyici konsepti, son derece ayrıntılı bir pus efekti simülasyonu ile sizi şaşırtacak. Güzel morumsu renkler ve koyu bir arka planla renklendirilmiş bu duman bulutları inanılmaz derecede otantik görünüyor. Davranış iyi düşünülmüş. Konsept sadece büyüleyici.

Kar yağışı WebGL Shader, Boris Šehovac tarafından

Bu konsept adının hakkını veriyor. Son derece gerçekçi. Boris Sehovac, derinliği yeniden yaratmak için farklı boyutlarda kar taneleri, farklı bulanıklık seviyeleri ve farklı hızlar kullandı. Dahası, kompozisyonu yönünü soldan sağa ve tam tersi yönde değiştirmeye zorlayarak rüzgarı simüle etmeye çalıştı. Sonuç olarak, bir tür küçük kar fırtınasına tanık olabiliriz. Bu güzelliğin arkasında yerel bir WebGL gölgelendiricisi var.

Anand Davaasuren'den Konsept

Önceki örnek sizde iyi bir izlenim bıraktıysa, Anand Davaasuren'in konsepti şüphesiz gözlerinizi memnun edecektir. Çözüm aynı fikre dayanmaktadır. Yağan kar etkisi, bunun merkezinde yer alır: bir istisna dışında. Bu örnekte kar taneleri yerine kalpler kullanılmıştır. Sonuç olarak, konsept karşı konulması zor hoş bir atmosfere sahip. Belki vahşice gerçekçi değil, ama yine de düşme etkisi ve kalplerin davranışı inanılmaz derecede cilalı.

Bulutlar Gölgelendirici, David Hartley

Bu, David Hartley tarafından yaratılan başka bir başyapıt. Bu kez sanatçı, bulutları ve onların havada uçuşan davranışlarını ele aldığını gösteriyor. Yine, Pixi.js bu görkemli projenin arkasında duruyor. Burada kamera bulutların arasından geçerek fikrin tüm güzelliğini hissetmenizi sağlıyor. Ama bu David için yeterli değildi. Ayrıca bize imleci hareket ettirerek sahneyi keşfetme fırsatı verdi. Sadece inanılmaz.

14islands tarafından ateş gölgelendirici

Dondurucu bir kar fırtınasından ve soğuk kabarık bulutlardan sıcak maddelere kadar, işte ateşi simüle etmek için başarılı bir girişim. 14islands'ın arkasındaki ekip, bu fikri hayata geçirmek için bir grup parçacık ve özel gölgelendirici kullanıyor. Sonuç olarak, tüm cephelerde sıcaklık yayan dumanlı küçük bir şenlik ateşine tanık olabiliriz.

GLSL: Chrome, Liam Egan

Chrome by Liam Egan, yüksek yoğunluklu sıvı içerir. Proje, kötü T-1000'in sıvı metal bileşimini gösterdiği destansı Terminatör 2'den bir sahneyi biraz hatırlatıyor. Konsept, şüphesiz yapay geliyor. Yine de davranış ve parlak yüzey inanılmaz derecede gerçekçi görünüyor. Dahası, yumuşatma parametresini değiştirmek için farenizi yukarı ve aşağı hareket ettirerek oynayabilirsiniz.

Martin Laxenaire'den dalgalanma etkisi

Martin Laxenaire'in bu projesi, uygulamaya konan gölgelendiricilerin mükemmel bir örneğidir. Burada yazar, farenin üzerine gelindiğinde görüntünün bir perde gibi hareket etmesini sağlayan gerçek bir dalgalanma efekti çekmeyi başardı. Curtains.js bu konsepti destekler. Tek dezavantajı, bir web sitesindeki her görüntüyü bu efektle sağlamak için çok erken olabilir, çünkü düşük kaliteli bir bilgisayarın onu "sindirmesi" için hala çok ağırdır.

Fabien Motte tarafından Glitched Ateşböcekleri

Fabien Motte'nin projesi aynı zamanda pratik bir çözüm sunuyor. Ancak dikey eksen etrafında düzensiz hareket eden bu parlak ateşböceklerini kastetmiyoruz. Ara sıra ekrana gelen bir aksaklık etkisinden bahsediyoruz. Bu sadece inanılmaz. Ve bu günlerde popüler olduğu için, bu konsept deneyleriniz için mükemmel bir temel olarak hizmet edebilir.

Biraz Gölge Atın

Gölgelendiriciler güçlü araçlardır. Bu makalede gerçekçi çözümlere odaklanmış olsak da, daha yapay görünen bir sürü başka akıllara durgunluk veren kavram var. Kesinlikle farklı sahneler ve kompozisyonlar yaratabilirsiniz - hayal gücünüzün çıldırdığı yer burasıdır.

Ancak, büyük güç büyük sorumluluk getirir. Tüm bu shader olayına geçmeden önce hesaba katmanız gereken birkaç konu var.

İlk olarak, tarayıcı uyumluluğuyla ilgili bir sorun var. Herkes onun güzelliğini yaşayamaz. İkincisi, her bilgisayar sorunsuz bir şekilde halledemez. Bu, gölgelendiricilerin evrensel araçlar olmadığı anlamına gelir - en azından henüz değil.