Foil Sticker Efekti Uygulaması

• Folyo sticker efektini uygulayan shader kaynak kodu; yüzey yansımasını ve parıltıyı gerçekçi biçimde simüle eder
• Metallik, pürüzlülük, yanardöner yansıma gibi çeşitli özellikler ayrıntılı biçimde ayarlanabilir
• Folyo yüzeyinin mikro parçacık (flake) efekti ve açıya göre değişen yanardöner renkler temel unsurlardır
• Ortam haritası örnekleme, Fresnel efekti, AO gölgesi ve alpha cutoff gibi çeşitli fizik tabanlı grafik teknikleri kullanılır
• Gerçek 2D/3D ortamlarda yüksek kaliteli folyo sticker render’ı için kullanılabilecek gelişmiş bir shader uygulamasıdır

---

Genel bakış

Bu içerik, folyo sticker gibi parıldayan görsel bir efektin uygulanması için hazırlanmış GLSL shader kodudur. Metallik, yanardönerlik, yüzey mikro parçacık efektleri ve ortam yansımalarını bir arada işleyerek yüksek kaliteli görsel doku üretmeyi amaçlar. 2D texture’lar, ortam haritası ve çeşitli ayar parametreleri kullanılarak gerçekçi bir folyo efekti oluşturulur.

Başlıca değişkenler ve sabitler

• Çeşitli uniform değişkenler ile efekt ayarlanabilir
  • Örnek: uFlakeSize (flake boyutu), uRoughness (pürüzlülük), uMetalness (metallik), uIridescence (yanardönerlik) vb.
• Texture’lar, ortam haritası ve dünya koordinat sistemi bilgisi desteklenir

Temel fonksiyon yapısı

Hash fonksiyonu (hash)

• Mikro parçacık (flake) efekti için gerekli rastgele değerleri üretmekte kullanılır

Ortam haritası koordinat dönüşümü (dirToEquirectUv), ortam haritası örnekleme (sampleEnvRough)

• Ortam haritası üzerinde yöne bağlı örneklemeyi destekler
• Pürüzlülük (lod) değerine göre uygun mip level uygulanır

Yanardönerlik efekti (iridescenceColor)

• Açıya ve yüzey kalınlığına göre dinamik olarak renk üretir
• Gerçek bir folyo yüzeyinde olduğu gibi, bakış açısına göre renk değişir

Parlaklık (luminance)

• Rengin parlaklık bilgisini hesaplayarak son işleme gibi adımlara yansıtır

Shader ana mantığı

Alpha cutoff ve ön/arka yüz işleme

• Base texture’daki alpha değeri ile pikselin korunup korunmayacağı belirlenir
• Ön/arka yüze göre AO şiddeti, soyulmuş (peeled) işleme ve renk ayarı yapılır

Yansıma, flake, yanardönerlik ve metallik işleme

• Yüzey normali (normal), görüş vektörü, yansıma vektörü ve ortam yansımaları hesaplanır
• Flake efekti için konuma göre hash ve açı bazlı rastgele offset uygulanır
• Flake’in parlaklığı, maskelemesi, güçlendirmesi gibi unsurlar ayrıntılı olarak kontrol edilir
• perturbedNormal kullanılarak flake yüzeyindeki sapma yansıtılır
• Flake ve çevre renkleri, yanardöner renklerle birlikte karıştırılır

Ortam haritası birleşimi ve nihai renk üretimi

• Flake yoğunluğuna göre pürüzlülük dinamik olarak değiştirilir
• Metal/normal/yansıma maskelemesi ve Fresnel hesaplaması ile gerçekçilik artırılır
• diffuse (dağınık) ve spec (yansıma) bileşenleri karıştırılarak nihai renk üretilir
• Base alpha ile birlikte son renk olarak çıktı verilir

Çıkarımlar

Bu shader, folyo malzemeye özgü karmaşık görsel efektleri (güçlü yansıma, mikro parçacıklar, yanardönerlik vb.) gerçekçi biçimde yeniden üretmek için uygundur. Çok sayıda parametre sayesinde efekt hassas biçimde ayarlanabildiğinden esnek özelleştirme ve yüksek görünürlüğe sahip folyo sticker render’ı mümkündür. 3D, 2D web, oyunlar ve etkileşimli UI gibi pek çok alanda kullanıma elverişlidir.

[GN⁺]

Hacker News görüşleri

• Eskiden mobil oyun geliştirdiğim dönemde, havalı kartlara telefonun eğimine göre gerçek bir 3D nesne gibi “parlaklığı” değişen bir efekt eklemiştim. Bugünlerde iOS’un bu tür çıkartma efektlerini yerleşik olarak desteklediğini duymak bana ilginç geldi

• Magic kart pazaryeri sitelerinde foil kartlara basit CSS efektleri uygulanıyor. Ancak gerçek Magic kartlarında görülen çeşitli foil efektlerini performans kaybı olmadan, Svelte CRUD UX’e uygun ve daha gerçekçi şekilde nasıl uygulanabileceğini hep düşünüyorum

  • Bununla ilgili olarak pokemon-cards-css deposuna mutlaka bakmanızı öneririm

• Shader teknolojisi gerçekten çok ilgi çekici. Shadertoy sitesinde çeşitli shader’ları doğrudan deneyebilirsiniz

• Tim Oliver, Threads’in "golden ticket"ı için uygulanan holografik foil efektini üretme deneyimi hakkında harika bir sunum yapmıştı. Videoyu buradan izleyebilirsiniz

• Bu efektin gerçekten harika ve görsel olarak etkileyici olduğunu düşünüyorum, ama dürüst olmak gerekirse parıltılı foil efektinin kendisini çok da sevmiyorum. Çıkartmalarda ve kartlarda kullanılıyor ama bu tarz yerine, daha yumuşak metalik bir parlaklığın vurgu olarak kullanılması bence daha hoş duruyor. Bu görüşte yalnızmışım gibi görünüyor ama bu efektin popülerliğine bakınca hâlâ azınlıkta olduğumu düşünüyorum

• Gerçekten harika bir efekt. Alan Zucconi’nin CD render’lamak için yaptığı kırınım ızgarası shader’ını hatırlattı. İlgili içeriğe buradan ulaşabilirsiniz

• Ortaya çıkan sonuç beklediğimden de iyiydi. Ayarları değiştirip odanın yansıma görüntüsünü incelemek eğlenceliydi

  • Ben de yansıma haritasını merak edip araştırdım. Meğer o oda Polonya’daki Jedlinka Palace imiş. Gerçek doku görseline buradan bakabilirsiniz

• iOS’ta telefonu eğdiğinizde tepki veren “shiny” bir çıkartma efekti var. Bunu ilk gördüğümde gerçekten hayran kalmıştım

• Konu dışı olacak ama bu yazıyı görünce, yapay zekanın ileride bu tür efektlerin nasıl yapıldığını da öğrenebileceğini düşündüm. Bir yandan da, artık yer imlerini özellikle biriktirmeye gerek kalmayacak kadar yapay zekanın nihai bir yer imi işlevi görebileceği düşüncesi bana bir özgürlük hissi veriyor. Ama böyle harika yazıların yapay zeka tarafından gerektiği gibi takdir edilmeyebileceğini düşünmek de biraz üzücü ve buruk

  • Yine de yer imlerini tutmaya devam etmek iyi olabilir. Şimdiden yalnızca Google araması yüzünden bile çok fazla bilgi unutuluyor; yapay zeka çağında ise daha da fazla bilginin kolayca kaybolması mümkün
  • Sonunda yapay zeka böyle yazıları da yazacak ve yine yapay zekadan öğrenen bir yapay zeka durumu ortaya çıkacak. Böyle olursa, sanatsal duyarlılığa sahip programcılar ya da uzmanlar ortadan kaybolabilir ve geriye yalnızca bilgisayarın otomatik ürettiği iş çözümlerini birleştiren sıradan işler kalabilir diye düşünüyorum

• Tam da böyle beklenmedik ve ilgi çekici yazılarla karşılaşabildiğim için gerçekten mutluyum