Psychedelic Graphics 0: Giriş

 (benpence.com)
1 puan yazan GN⁺ 2025-01-25 | 1 yorum | WhatsApp'ta paylaş
  • Psychedelic animasyon ve oyun görselleri üretmek için bir giriş niteliğinde; ön bilgi gerektirmeden takip edilebilmesi için UV ve renk hesaplamalarından başlıyor
  • 3D modellere renk vermenin özü, 2D görüntü alanlarını 3D yüzeylere bağlayan UV mapping/texture mapping kavramını anlamaktır
  • UV koordinatları, texture üzerindeki konumu gösteren 0.0–1.0 aralığında iki değerdir; (0.5, 1.0) yatayda %50, dikeyde %100 noktasına karşılık gelir
  • Grafiklerde renkler genellikle üç RGB değeriyle ifade edilir; UV’nin X ve Y değerleri kırmızı ve yeşile dönüştürülürse koordinat değişimi renk gradyanı olarak görünür
  • Örnek kod, tüm ekranı kaplayan tek bir 3D yüzeyde piksel başına bağımsız hesaplama ile rengi belirlediğinden, alışılmış program yazma biçiminden farklı bir düşünme tarzı gerektirir

Serinin hedefi ve varsayımları

  • Psychedelic Graphics serisi, animasyonlarda ve oyunlarda kullanılabilecek psychedelic görseller üretme yöntemlerini ele alır
  • Grafik veya programlama ön bilgisi gerektirmez; ancak trigonometri ve programlama deneyimi anlamayı kolaylaştırır
  • Amaç, video örneğinde kullanılan psychedelic grafiklerin temel ilkelerini öğrenmektir
  • Videoların büyük kısmı Blender ile yapılmıştır, ancak bu serideki teknikleri başka ortamlara taşımak kolaydır; Blender part 3’te ele alınır
  • Bölüm 0 ve part 1, web üzerinde çalışan örneklere doğru ilerler

3D modeller ve UV mapping

  • 3D modeller nokta ve yüzeylerden oluşan yüzeylerdir

    • Bilgisayar grafikleri 3D gibi görünür, ancak grafik kodu yazarken çoğu zaman 2D düşünmek gerekir
    • Bir 3D düzenleme programında model oluşturduğunuzda, aslında uzayda duran noktalar olan vertex’ler (vertices) ve bu vertex’leri bağlayan yüzeyler (faces) oluşturursunuz
    • Model içi boş bir yüzeydir; ekranda görünen şey yalnızca yüzeydir
    • Oyun ve animasyonlardaki neredeyse tüm 3D biçimler bu nokta ve yüzeylere indirgenir
    • Pürüzsüz görünen modellerde de çoğu zaman sınırları ayırt etmeyi zorlaştıracak kadar çok nokta ve yüzey bulunur

  • Texture, 3D yüzeye uygulanacak 2D görüntüdür

    • 3D yüzeylere renk eklemenin standart yolu olarak UV mapping/texture mapping kullanılır
    • Dünya’nın 2D projeksiyon haritasında bazı bölgelerin uzamış veya bozulmuş görünmesi gibi, 3D modelin rengini 2D’ye açan görüntü de bozulabilir
    • Açılmış 2D görüntü, daha sonra 3D model yüzeyine uygulanacak renkleri içeren texture’dır
    • Image texture oluşturmanın bir yolu, boş bir görüntü dosyası oluşturup ardından 3D nesnenin her yüzeyi için bu görüntünün hangi kısmının kullanılacağını belirlemektir
    • Farklı 3D yüzeyler aynı texture bölgesini paylaşabilir; simetrik gövdelerde yalnızca bir tarafı boyayıp aynı bölgeyi iki taraftaki yüzeylere atamak yaygındır
    • Her yüzeyin kullandığı texture bölgesinin gerçek 3D yüzeyle aynı boyutta veya oranda olması gerekmez

Texture boyama ve UV koordinatları

  • Texture üzerine boyadığınız şey modelde görünür

    • Texture üzerine boyanan her şey 3D model üzerinde görüntülenir
    • Çoğu yazılım, 3D modelin üzerine doğrudan boyadığınızda bunun yerine image texture’ı boyayan özellikler sunar

  • UV koordinatları texture üzerindeki 2D konumdur

    • 3D modelin her yüzeyi için ayrılan texture bölgesi UV map’tir; image texture’ın bir kısmını 3D modelle bağlayan veridir
    • UV, image texture üzerindeki konumu gösteren 2D koordinat olarak düşünülebilir
    • Her 3D yüzey birden fazla noktayla tanımlanır; bu noktalar image texture üzerine yerleştirildiğinde her nokta UV koordinatlarına sahip olur
    • (0.5, 1.0) içinde ilk değer olan 0.5 soldan sağa yönün yarı noktasını, ikinci değer olan 1.0 ise dikey yönde en üstü ifade eder
    • UV değerlerinin ikisi de genellikle 0.0 ile 1.0 arasındadır; çoğunlukla (0, 0) ile (1, 1) arasındaki dikdörtgenin içindeki koordinat alanı kullanılır
    • Piksel konumları yerine 0 ve 1 kullanmak, soldan sağa ve aşağıdan yukarı ne kadar ilerlediğinizi oran olarak ifade etmeyi sağlar; 100 ile çarpınca yüzde gibi anlaşılabilir
    • Bu iki boyutun gerçek adları U ve V’dir; X, Y ve Z zaten 3D konum için kullanıldığı için UV adı kullanılır

Grafiklerde renk ve veri tipleri

  • RGB rengi üç değerle ifade eder

    • Bilgisayar grafiklerinde renk genellikle RGB, yani kırmızı, yeşil ve mavi ile ifade edilir
    • Tek bir rengin kırmızı, yeşil ve mavi miktarı genellikle 0.0 ile 1.0 arasında bir değerdir
    • Kırmızı (1.0, 0.0, 0.0), siyah (0.0, 0.0, 0.0), beyaz ise (1.0, 1.0, 1.0) olarak ifade edilir
    • Web grafiklerinde kullanılan 0xff0000 gibi onaltılık gösterimler de aynı bilgiyi farklı bir biçimde gösterir

  • UV’yi renk olarak görmek koordinatları görünür kılar

    • UV koordinatlarını görselleştirirken geleneksel olarak ilk değer olan X kırmızı, ikinci değer olan Y yeşil olarak kullanılır; mavi ise 0.0 bırakılır
    • UV (0, 1), renk (0.0, 1.0, 0.0) olur ve yeşil görünür
    • UV (1, 0), renk (1.0, 0.0, 0.0) olur ve kırmızı görünür
    • Bir dikdörtgeni UV konumuna göre renklendirirseniz, sol üste gidildikçe yeşil güçlenir, sağ alt kırmızı olur
    • Sol alt, kırmızı ve yeşilin ikisi de 0 olduğu için siyah olur; sağ üstte hem kırmızı hem yeşil bulunduğundan sarı olur

  • float, vec2, vec3

    • float tek bir ondalıklı sayı, yani kayan noktalı sayıdır
    • vec vektör anlamına gelir; vec2 iki ondalıklı sayıdan oluşan bir çift, vec3 ise üç ondalıklı sayıdan oluşan bir gruptur
    • RGB renkleri kırmızı, yeşil ve mavi olmak üzere üç değere sahip olduğundan vec3 ile ifade edilir
    • UV, X ve Y olmak üzere iki değere sahip olduğundan vec2’ye karşılık gelir

Örnek grafik kodunun çalışma biçimi

  • Bu serideki kod örnekleri ayrı bir 3D model kullanmaz; bunun yerine tüm ekranı kaplayan tek bir 3D yüzey kullanır
  • Renkleri image texture ile eklemek yerine, kod image texture üzerindeki renkleri doğrudan belirler
  • İşlem akışı şöyledir
    • 3D sahnedeki kamera hangi 3D yüzeyin göründüğünü hesaplar
    • Her yüzey için ayrılmış texture bölgesi, yani UV mapping, kullanılarak UV koordinatları hesaplanır
    • Hesaplanan UV koordinatları ve 3D konum gibi bilgiler koda aktarılır
    • Kod, ilgili konumdaki rengi belirler
  • Bu işlem saniyede milyonlarca kez gerçekleşen bir süreç olarak anlaşılabilir
  • Grafik kodu, ekrandaki bir noktadan başka bir noktaya kesintisiz çizgiler doğrudan çizmekten ziyade, her konum seçildiğinde o konumun rengini yanıtlayan bir yaklaşıma daha yakındır
  • Yazdığınız kod, tüm rengi oluşturmak için yalnızca bir kez çalıştırılmaz; ekranın küçük parçaları olan her piksel için çalıştırılır
  • Diğer ekran bölgelerinin renklerini kontrol edememe kısıtı nedeniyle grafik programlama, genel programlama deneyimi olanlar için bile farklı bir düşünme biçimi gerektirir
  • part 1, bu kısıtlar içinde bile ilgi çekici görseller üretme yöntemleriyle devam eder

İlgili okumalar

1 yorum

 
GN⁺ 2025-01-25
Hacker News yorumları

  • Ben David Tristram. 1990’larda bilgisayar grafikleri performans grubu Raster Masters’ın kurucu üyelerinden biriydim ve @hopkins’in dediği gibi, gelişmiş Silicon Graphics workstations kullanarak Grateful Dead, Herbie Hancock ve Graham Nash gibi isimlerin canlı müzik performanslarına eşlik eden sentezlenmiş görüntüler üretiyordum
    Çeşitli dönüşümlerden sonra şimdi ağırlıklı olarak 2D video işleme ortamları olan Resolume Avenue ve TouchDesigner’da çalışıyorum. Buradaki bağlantılar bana ilham veriyor

    • Raster Masters’ın diğer üyelerinin kimler olduğunu ve Grateful Dead konserlerinde yaşanan çılgın anekdotları merak ediyorum
      Ben bugünlerde sunum yaparken sadece projektörü dizüstü bilgisayara takınca görüntü gelip gelmeyeceği bile her seferinde zar atmak gibi hissettiriyor ve strese sokuyor; o dönemde grubun üstündeki ekrana canlı yüksek çözünürlüklü SGI görüntüsü yansıtmak için hangi projektörlerin, kalibrasyonun ve hazırlığın gerektiğini de merak ediyorum
    • İzlenebilecek iş bağlantıları olup olmadığını merak ediyorum
    • Sanırım 1992 civarında bazı Dead konserlerinde bu işleri görmüştüm

  • Fazla alt seviyeye inmeden psikedelik grafiklerle oynamak istiyorsanız hydra iyi bir seçenek. JavaScript tabanlı bir live coding ortamı ve öğrenme eğrisi de yumuşak

    • Müzik girdisini destekleyen bir şey olup olmadığını merak ediyorum. Winamp döneminde görselleştirme eklentilerini çok severdim ama bugünlerde bu sanat dalı ölmüş gibi görünüyor
    • dwitter.net’te de JavaScript ile yapılmış çok sayıda psikedelik grafik örneği var

  • Orijinal yazı ve UV koordinatlarıyla ilgili olarak, geçmişte dikdörtgen bir mesh’in her köşesi için UV doku koordinatlarını ilginç biçimde kaydırma yöntemlerini çok araştırmıştım
    O zamanlar tepe noktası başına renk kullanıyorduk; bugün olsa muhtemelen ShaderToy’dakilere benzer fragment (piksel) shader’ları kullanırdım. Özellikle ilginç bir yöntem, doku koordinatlarını bir akış alanı (flow field) boyunca adveksiyonla taşımak. Herhangi bir 2D vektör alanı kullanıp her koordinata yinelemeli olarak yer değiştirme uygulamanız yeterli. Hatta hatalı açık yöntemlerle bile sonuçlar iyi oluyor
    Koordinatlar çok uzağa bozulunca görüntü tanınmaz hale geliyor, ama basit bir çözüm koordinatlara onları asıl konumlarına geri çeken bir “geri yükleme” kuvveti vermek. Böylece ayna folyosu parçalarını düzleştirir gibi kendi yerlerine geri sıçrıyorlar
    Şimdi bu tür yer değiştirme efektleriyle birlikte feedback kullanıyorum. Çok küçük kaydırmaları tekrar tekrar uygulayınca hareket akışkan akışına oldukça benziyor

    • Jeremy Huxtable’ın yaptığı PostScript melt de aynı yöntemi kullanıyordu. Kendisi aslında NeWS’ün “Big Brother” Eyes’ını yapan kişiydi ve bu da XEyes’e ilham vermişti
      Rastgele bir dikdörtgen seçip onu rastgele bir ofsetle kopyalama işlemini tekrar ettikçe, çok dijital, köşeli ve keskin bir etki bile biraz rastlantısallıkla (dithering) yumuşak ve organik bir etkiye dönüşüyor. Siyah beyazda da iyi çalışıyordu ve sonuçta sadece PostScript’ti
      https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
      Jeremy’nin orijinal “Big Brother” eye.ps dosyası da var. Yuvarlak NeWS göz penceresini gösteren klasik bir demoydu
      https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
    • Bana Kai Power Goo’nun sade ve doğrudan manipülasyon eğlencesini hatırlatıyor
      LGR: Kai's Power Goo – Classic 90s Funware for PC!
      https://www.youtube.com/watch?v=xt06OSIQ0PE

  • HTML’de görüntüler üzerinde çalışan shader’ları kolayca kullanabilmeyi seviyorum. Bu alandaki becerim orta karar ama insanların bunu nereye kadar zorladığını görmek keyifli
    Basit bir derinlik haritası yaklaşımı bile sağlansa sonuç çok daha ilginç hale geliyor. Birkaç yıl önce benzer bir teknikle görüntüler arasında “ilginç efektler” eşliğinde yumuşak crossfade yapan bir proje yapmıştım; yazısı ve demosu burada
    https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

  • Dürüst olmak gerekirse, bu yazıyla birlikte verilen Rolling Hills yazısı çok daha ilgi çekici
    Özellikle ortalara doğru, statik bir görüntüye aşağıdaki kodun uygulandığı bölüm etkileyici
    uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
    uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
    Çeşitli psikedelik deneyimler yaşamış biri olarak, en azından düşük ve kahramansı olmayan dozlarda bunun gerçek görsel deneyime en yakın şey olduğunu söyleyebilirim. Dalgalar biraz yavaşlatılsa ve hareket aralığı hafifçe azaltılsa daha da benzer olurdu
    Performans için havalı görsellerden çok, psikedelik maddelerin tetiklediği görsel halüsinasyonları yeniden üretmekle ilgileniyorum. Elbette iki taraftaki sanatçılara da saygım var
    Modern araçlarla harika psikedelik videolar yapan bir sanatçı var ama kullanıcı adını bir türlü hatırlayamıyorum. Bulursam aşağıya bırakırım
    Rolling Hills yazısının bu kısmını düşününce Midsommar’daki mantar çayı sahnesi, özellikle de ağaç kabuğu sahnesi aklıma geliyor. Nesnelerin “nefes alması” ve akması gerçekten çok özgün bir görsel deneyim; bunun farklı şekillerde uygulanışını görmek hoşuma gidiyor

    • Bahsettiğiniz hesap bu olmayabilir ama bu YouTube hesabı görsel deneyimi iyi yeniden üretirken başka efektlerle de ilgileniyor
      Doğaya bakarken görülen görüntüler, geometrik desenlerin oluşmaya başlama biçimi ve “nefes alma” efekti çok güçlü. Birden fazla maddeyi ele alıyor ve yüzeylerin hafifçe nefes alması ya da nabız gibi atmasından, DMT gibi maddelerde ortaya çıkan tam anlamıyla geometrik “dünyalara” kadar geniş bir yelpaze gösteriyor
      https://www.youtube.com/@josikinz

  • 90’ların başında Todd Rundgren, Mac uygulaması Flowfazer’ı yayımladı. Deneyimi simüle etmiyordu ama dikkati başka yöne çekip akışın sürmesine yardımcı oluyordu
    Bazı insanlar bunu kendi üretimleri için bir rehber olarak da kullandı
    [1] https://grokware.com/
    [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
    O dönem ekran koruyucuların ve palet animasyonunun dönemiydi

  • Bu tür şeyleri seviyorsanız ve müzisyen Tipper’ın performansında Fractaled Visions’ın görselleri üstlendiğini görme şansınız olursa, inanılmaz bir deneyim olur
    Şimdiye kadar gördüğüm psychedelic artifact’lerin görsel tasvirleri içinde en isabetlisi buydu. Geçen yıl birlikte yaptıkları bir gösteriyi izledim ve hayatımdaki en iyi sanat deneyimiydi. Fractaled Visions’ın görselleri, zenginlik ve karmaşıklık açısından neredeyse inanılması güç düzeydeydi
    Shader programlama gibi konularda epey bilgim olmasına rağmen bazı efektlerde “bunu nasıl yaptılar?” diye düşündüm. Aşağıdaki set videosu deneyimi tam olarak yansıtmasa da atmosferi veriyor. Bunu 4K 60fps izlemek bambaşka bir seviyedeydi
    https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

  • Burada bir ShaderToy bağlantısı olmalı: https://www.shadertoy.com

  • Bu alandaki eski bir Flash klasiği olan Flashback.swf’yi hatırlattı. Bunun video render’ı burada: https://m.youtube.com/watch?v=KaSqrx93rS0

    • Flash döneminde bu video sayesinde elektronik müzik grubu Shpongle ile tanıştım
      Bu animasyonda Divine Moments of Truth remiksi kullanılmıştı; muhtemelen “Russian Bootleg” sürümüydü. Daha önce de elektronik müzik dinliyordum ama bu tür elektronik müziği ilk duyduğumda gerçekten aklımı başımdan almıştı

  • Bu hafta çalışırken WebGL shader’ları yazıyor ve fiziksel kamera efektleri gibi görünmeleri için ayrıntıları ince ince ayarlıyordum
    Ama bazen bir şeyi yanlış yapınca bu yazıda anlatılana benzer sonuçlar çıkıyor ve dürüst olmak gerekirse bunlar standart görüntü efektlerinden çok daha eğlenceli
    Görsel olarak kullanılabilecekleri durumlar sınırlı olabilir ama bilgisayar grafiklerinin çalışma biçimi için kurduğumuz modellerle oynamak, her sistemi öğrenmek için çok iyi bir yöntem. Sadece grafik değil; programlamanın temel matematiğini, GPU’nun nasıl çalıştığını ve bellek ile CPU’yla bağlantısını, gözün nasıl çalıştığını, animasyon ve zamanın nasıl ele alınacağını da öğrenebiliyorsunuz