Gürültü Dokulu SVG Üretimi

 (daniel.do)
4 puan yazan GN⁺ 2023-12-08 | 2 yorum | WhatsApp'ta paylaş
  • Web illüstrasyonları düz vektörlerin ötesine geçip gürültü dokusu ile ışıklandırma ve gölgeleme kullanan bir yöne genişledikçe, bunu hafif ve yeniden kullanılabilir SVG olarak uygulama yöntemi önem kazanıyor
  • Temel amaç, basit şekillere dokulu gölge efekti eklemek ve bunu Svelte ya da React bileşenlerine taşıyarak renk ve şekilleri değiştirip yeniden kullanılabilir hale getirmek
  • Temel yapı, bir şekli <defs> içinde bir kez tanımlayıp <use> ile yeniden kullanmak, ardından mask ve linearGradient ile renge daha az bağlı bir gradyan maskesi oluşturmaktır
  • Tanecikli doku, <feTurbulence> tabanlı bir SVG filtresiyle üretilir; seçilen dolgu rengiyle karıştırmak için <feComposite>, <feColorMatrix>, <feBlend> birlikte kullanılır
  • Sonuç hedeflenen dokuya ulaşsa da Safari render farkı sürüyor; bu yüzden tarayıcıya göre görünüm ve daha karmaşık illüstrasyonlara uygulama için ek ayar gerekiyor

Yalnızca kodla SVG'ye gürültü dokusu eklemek

  • Son dönemde web tasarımında vektör illüstrasyonları kullanılmaya devam ederken, temiz düz şekillerden çok kaba tanecikli doku içeren ışık ve gölge stilleri öne çıkıyor
  • Bu tarz, illüstrasyon yazılımlarından SVG olarak dışa aktarılabilse de dokunun raster olarak eklenmesi ya da vektör boyutunun büyümesi mümkün
  • Amaç, yalnızca standart SVG spesifikasyonu ile gürültülü dokulu gölge efekti üretmek ve yapıyı bileşenleştirmesi kolay olacak şekilde korumak
  • Yeniden kullanılabilirlik için, şekil ve renk değişse de aynı yaklaşımın çalışacağı şekilde kurgulanıyor

Temel şekil ve gradyan

  • Daire ya da dikdörtgen gibi SVG temel şekilleri kolayca çizilebilir, ancak yeniden kullanılabilir bileşenlerde sabit renkli gradyanlar tek başına yeterli olmaz
  • Temel renge göre değişen bir gradyan oluşturmak için maske (mask) kullanılır
    • SVG maskeleri, siyah ve beyazla görünür ya da gizlenen alanları kontrol eder
    • Mantığı ilk bakışta kafa karıştırıcı olsa da basit bir örnekle başlanabilir
  • Aynı daire şeklinin birden fazla kez kullanıldığı bir yapıda, <defs> içinde <circle id="shape"> tanımlanıp <use href="#shape"> ile referans verilir
  • Bu yöntem tekrarları azaltan ve şekil tanımlarını tek yerde toplayan DRY bir yapıdır

Gürültü dokusu üretim yöntemi

  • Gradyanın üzerine doku bindirmek için SVG filter kullanılır
  • Gürültü üretimini <feTurbulence> üstlenir
    • <feTurbulence>, yapay doku üreten bir SVG filter primitive'idir
    • İstenen hissi elde etmek için çeşitli değerlerin ayarlanması gerekir
  • Nihai filtre, birkaç aşamadan geçerek dokuyu renkle karıştırır
    • <feTurbulence type="fractalNoise" baseFrequency="19.5" numOctaves="10"> ile gürültü üretilir
    • <feComposite> ile turbulence sonucu SourceAlpha içine compositing uygulanır
    • <feColorMatrix type="luminanceToAlpha"> ile renk değişimi azaltılır
    • <feBlend mode="color-burn"> ile orijinal grafikle birleştirilir
  • Filtre, son <use> öğesine filter="url('#noise')" ile uygulanır

Nihai SVG yapısı

  • Son örnekte <defs> içinde şekil, filtre, maske ve gradyan birlikte tanımlanır
  • Gradyan, linearGradient id="fade" ile oluşturulur
    • 0% noktasında siyah renk ve stop-opacity="0.6" kullanılır
    • 65% ve 75% noktalarında beyaz kullanılarak opaklık kademeli biçimde ayarlanır
  • Nihai şekle dolgu rengi, maske ve filtre birlikte uygulanır
    • fill="hsl(337, 92%, 69%)"
    • mask="url(#gradient)"
    • filter="url('#noise')"
  • Renk eklenip gradyan daha ince ayarlanarak istenen görsel etkiye daha yakın bir sonuç elde edilir
  • Tüm sonuç Full Demo sayfasında görülebilir; uygulama kodu ise repository içinde açık olarak paylaşılmıştır

Sonuç ve sınırlamalar

  • Ek deneylerle tatmin edici bir illüstrasyon üretilmiş olsa da sonuç henüz kusursuz düzeyde değil
  • Özellikle Safari üzerinde diğer tarayıcılardan farklı render ediliyor
  • Referans alınan karmaşık illüstrasyonlara göre hâlâ daha basit olsa da, daha fazla rafine edilirse daha çok durumda kullanılma potansiyeli var
  • 7 Aralık 2023 tarihli ek notta, Hacker News'e gönderildikten sonra Jimmy Chion'un 2021 tarihli CSS-Tricks yazısı Grainy Gradients ile karşılaşıldığı belirtiliyor
  • Söz konusu yazının ulaştığı teknik bu yaklaşıma benzer göründüğünden, tamamlayıcı kaynak olarak birlikte incelenebilir

İlgili okumalar

2 yorum

 
ndrgrd 2023-12-09

Beklendiği gibi Safari yine hayal kırıklığına uğratmıyor! 2020'lerin IE'si denmesini sonuna kadar hak ediyor.
 
GN⁺ 2023-12-08
Hacker News yorumları

  • Yakın zamanda SVG ile uğraşırken canvas ile yapması zor olan bir drop shadow eklemek istedim; ancak Safari’de SVG içindeki CSS drop shadow çalışmadığı için SVG’nin yerel drop shadow filtresini kullanmak zorunda kaldım ve sonuç da diğer tarayıcılardan farklı görünüyordu.
    Somut örnek https://www.einarmagnus.net/pages/logo adresinde; JavaScript ile Safari’yi algılayıp SVG sürümünü açacak, CSS sürümünü kapatacak şekilde ayarladım.
    “Özyinelemeli yin-yang” arka planı https://einarmagnus.net/blog/2020/01/22/finding-the-logo adresinde.
    Dokuyla da daha fazla deneme yapmak istiyorum ama Safari’de bu kadar farklı görünmesi can sıkıcı. Bir gün SVG yorumlama biçimlerinin birbirine yakınsayıp yakınsamayacağını merak ediyorum.

    • Kısa vadede yakınsayacak gibi görünmüyor. Ne yazık ki SVG belirtiminin tamamını uygulayan bir yer yok; SVG 2’ye gelince de özellikle çok daha uzak.
      Bu konuda https://razrfalcon.github.io/notes-on-svg-parsing/ okunmaya değer.
      SVG kütüphanesi hata raporlarında “SVG’m doğru render edilmiyor” ifadesini sık görüyorum; aslında doğru render edilmiş SVG diye bir şey yok, demeye getiriyor. Metin, filtre, animasyon gibi ileri seviye özellikleri kullanmaya başladığınızda her renderer’da kolayca bozulabiliyor.
    • ‘logo’ sayfasında yalnızca varsayılan dalga biçimini görüp çıkanlar, sağ alttaki açılır menüden birkaç preset denese iyi olur.
      Parametreleri azıcık değiştirince scorpion, balance, spruce gibi epey farklı tasarımlar çıkması harika.

  • Yazarın aradığı terim daha çok ditheringe yakın. CSS-Tricks’teki “Grainy Gradients” da aynı tekniği anlatıyor.
    https://css-tricks.com/grainy-gradients/
    CSS ile benzerini yapmanın bir alternatifi de var; tüm görüntüye uygulanıyor.
    https://github.com/tomren1/dither-with-css

    • Bu aslında daha çok düz noise; daha doğrusu Perlin noise ailesinden bir şeyin “color burn” karışım moduyla birleştirilmiş hali. Bir gradyanın üstüne bindirildiği için dithering gibi görünüyor, ama dithering değil.
      Dithering, pürüzsüz ve yüksek renk derinliğine sahip bir görüntüyü sınırlı sayıda renge niceleştirirken banding’i azaltmak için her pikseli üst ya da alt değerlerden biri olarak olasılıksal biçimde seçme tekniğidir. İstenen renge tam karşılık gelen noktalarda noise gibi görünmeyebilir bile.
      Burada yalnızca tekdüze bir noise dokusu oluşuyor; gerçek banding’i azaltmıyor. Estetik amaçlıysa bu, gerçek dithering’den daha iyi görünüyor.
      Yine de dithering gibi kusurları gizleyip algılanan keskinliği artırarak görüntü kalitesini daha iyi gösterme etkisi olabilir.
    • Dithering, nihai etkisi benzer olan gerçek bir teknik yöntemdir; ancak kendi başına tanecik hissi ekleme anlamına gelmez ve bu örnek de dithering ile yapılmış değil.
      Yazar “flat”, “skeuomorphic”, “italian style” gibi görsel stilleri adlandıran bir tasarım terimi arıyor gibi.
      Geometrik formlar ile tanecikli dokunun birleşimi bana Memphis styleı hatırlatıyor.
    • Sınırlı bir paletle daha geniş bir renk aralığını taklit etmiyorsak buna gerçekten dithering denebilir mi emin değilim.
      Daha çok vintage seyahat posteri sanatını çağrıştırıyor. Örn: https://www.graphicart-news.com/wp-content/uploads/2012/09/2...
    • Dithering ile ilgili ama bana kişisel olarak stipplinge daha yakın görünüyor [0]
      [0] https://en.wikipedia.org/wiki/Stippling
    • Biraz utanç verici. O yazıya link verecek şekilde yazıyı güncellemeliyim.
      Bunu yaparken gerçekten görmemiştim; kendi başıma deneyip aynı sonuca vardım.

  • Film fotoğrafçıları ve sinemacılar film graini yok etmeye uğraşırken, dijital fotoğrafçıların onu yeniden eklemek istemesi aklıma geliyor. Komşunun tavuğu komşuya kaz görünür.
    Her şeyin dijital açıdan steril olduğu bir ortamda, bu sayfadaki örnekler oldukça çekici görünüyor.

    • Fazla genellememek iyi olur. Dijital videonun ve ardından dijital fotoğrafçılığın ortaya çıkışından bu yana noiseu azaltmak isteyenler, yok etmek isteyenler, taklit etmek isteyenler ve bilinçli olarak kullanmak isteyenler hep bir aradaydı.
      Sorun noise’un kendisi değil, her zaman ne kadar fazla olduğuydu.
    • Foveon X3 bunu bir ölçüde çözmemiş miydi? Film gibi ama dijital bir şekilde

  • Hangi özelliklerin hangi uygulamada bozulduğunu derleyen bir kaynak var mı? SVG ile akıl sağlığını korumanın yolunu merak ediyorum
    Yakın zamanda karmaşık bir konferans posterini SVG ile yapma hatasına düştüm; şimdi tarayıcıya ve programa göre farklı render ediliyor
    https://kxygk.github.io/imergination/
    Yaparken yaşadıklarım şöyle: SVG’yi dahil edebilir veya linkleyebilirsiniz, ama onun içinde tekrar başka bir SVG varsa çalışmıyor. Örneğin poster → diyagram → birden fazla grafik/harita yapısıysa, alt görsel değiştiğinde dinamik olarak güncellenen bir SVG fiilen imkânsız
    Web tarayıcıları “güvenlik” gerekçesiyle gömülü/linklenmiş görselleri kafasına göre göstermeyebiliyor. Yukarıdaki linkteki SVG’yi ayrı sekmede açınca düzgün görünmüyor: https://raw.githubusercontent.com/wiki/kxygk/imergination/ag...
    Karmaşık SVG’leri PDF’ye çevirmek de tutarsızlık olmadan yapmak açısından zor; bellek de tükenebiliyor. SVG-to-PDF dönüştürücülerinin sonuçları birbirinden farklı
    Inkscape gibi çeşitli uygulamalar, dahil edilmiş SVG’leri keyfî biçimde raster grafik gibi ele alabiliyordu; bunun ne zaman olduğunu da bir türlü tespit edemedim. PNG’ye render ederken Inkscape’in DPI ayarını alt görsellere aktarmaması sorunu da vardı

  • Harika. Inkscape, Filters menüsündeki çeşitli efektler üzerinden bu tür gürültü eklemeyi destekliyor gibi. Plain SVG olarak dışa aktarıp koda bakınca feTurbulence kullandığı görülüyor
    Karşılaştırma için Affinity Designer 2’nin noise fill özelliğini de denedim; dışa aktarılan SVG’de gürültü base64 JPEG görüntüsü olarak gömülüydü

    • Şu an PC başında olmadığım için doğrudan kontrol edemiyorum, ama tek bir noise texture’ı gömüp bunu birden çok kez mi kullanıyor, yoksa noise her kullanıldığında texture’ı yeniden mi oluşturuyor merak ediyorum
      Adobe lisansını haklı çıkarmanın zor olduğu ve InkScape’in de pek içime sinmediği bir konumda, bu tür tuhaflıklar dışında Designer mükemmel bir alternatifti
    • Affinity Designer 2, Adobe Creative Cloud’a para vermemek için oldukça iyi bir alternatiftı; ama SVG’leri elle düzeltmem gereken gerçekten çok şey oldu

  • “ApeFest” web sitesi[1]nde de dinamik noise olduğu için CSS’e baktım. Katılımcıların retinasını UV ile yakan o etkinliğin sitesi
    Aslında döşeme biçiminde bir PNG overlay[2] kullanıyor ve CSS animasyonuyla “rastgele”ymiş gibi sallıyor. Düzeltme: Aslında JS ile hareket ediyor gibi. Epey düşük teknoloji ama işe yarıyor
    [1] https://apefest.com/
    [2] https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpv...

    • apefest efekti CPU’yu çok kullanıyor, dolayısıyla enerji de çok tüketiyor

  • Bu SVG filtrelerini defalarca kullanmak istiyordum, ama sorun şu: motorlara ve yakınlaştırma/uzaklaştırma oranlarına göre görünüm ciddi biçimde değişiyor
    Bu yüzden ancak doğruluğun pek önemli olmadığı ince efektlerde kullanılabiliyor; sonuçta üzücü de olsa sürekli raster’a dönmeye mecbur kalıyorum
    Ayrıca piksel bazında çalıştıkları için feDisplacementMap gibi şeyler anti-aliasing’i bozuyor ve kullanmak isteyeceğiniz durumların yaklaşık yarısını mahvediyor

  • Perlin noise ve onun devamı olan fractal noise, gerçekçilik ya da organik bir his katarken maliyetine göre inanılmaz etkili
    Örneğin Aladdin’de (1992) Cave of Wonders’tan kaçış sahnesinde çok etkili biçimde kullanıldığını görebilirsiniz

  • Bunun normalde nasıl görünmesi gerektiğini bilmiyorum ama telefonumda noise olmadan yalnızca pürüzsüz bir gradyan olarak görünüyor

    • Burada da aynı. Android Chrome kullanıyorum
    • Android Chrome, koddaki bazı özellikleri desteklemiyor gibi

  • Efekti beğendim; bunu yakınlaştırma/uzaklaştırma oranından bağımsız yapmanın bir yolu var mı?
    Bununla bağlantılı olarak, bu da rastgelelik ekliyor gibi görünüyor; seed vermenin bir yolu olup olmadığını da merak ediyorum. Örneğin belirli bir boyutta tek bir doğru render sonucunu tanımlayabilmek güzel olurdu

    • Yazarıyım. Mümkün. SVG’nin temel algoritması ve uygulaması seed değeri alıyor: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/s...
    • Diğer yanıtta söylendiği gibi seed özelliği var; rastgele fonksiyon algoritması da spesifikasyonda 186 satır C kodu olarak tanımlanmış[0], bu yüzden teoride uygulamalar arasında aynı sonucu vermesi gerekir
      Ancak koda bakınca kayan nokta işlemleri kullandığını görüyorum; bildiğim kadarıyla bunlar uygulama tanımlı, dolayısıyla platformlara göre farklı davranma ihtimali var gibi
      [0]: https://drafts.fxtf.org/filter-effects/#elementdef-feturbule...