(sim) Vegas Küresi için shader yazımı

 (whenistheweekend.com)
1 puan yazan GN⁺ 2023-12-01 | 1 yorum | WhatsApp'ta paylaş
  • The Sphere sayfası, küre yüzeyinin renginin nasıl hesaplandığını 5 örnek ve GLSL shader parçalarıyla gösteriyor
  • Shader girdileri time, vUv, vNormal bileşenlerinden oluşuyor ve renk değişiminin merkezinde zaman ile UV koordinatları yer alıyor
  • main(), her pikselin nihai rengini hesaplamak için gl_FragColor içine vec4(...) yerleştiriyor
  • RGB değerleri, zamana bağlı değişimi ifade etmek için cos(time + vUv.xyx + vec3(0., 2., 4.)) temel alınarak oluşturuluyor
  • Tanımlanan vNormal, verilen kod parçası içinde kullanılmadığı için şu anki renk hesabını etkilemiyor

The Sphere sayfasının yapısı

  • Başlık The Sphere
  • Gövdede example 1 ile example 5 arasında örnek etiketleri bulunuyor
  • Ardından GLSL gibi görünen shader kodu yer alıyor

GLSL shader kodunun akışı

  • Girdi değişkenleri üç tane: time, vUv, vNormal
    • time, uniform float
    • vUv, varying vec2
    • vNormal, varying vec3
  • main() fonksiyonu gl_FragColor değerini ayarlıyor
  • Renk 0.5 + 0.5 * cos(...) biçiminde hesaplanıyor
  • cos() girdisine zaman değeri, vUv.xyx, vec3(0., 2., 4.) birlikte veriliyor
  • Alfa değeri 1. olarak sabitleniyor

İlgili okumalar

1 yorum

 
GN⁺ 2023-12-01
Hacker News yorumları

  • Matrix efektini çalıştırmayı başardım.
    Kürenin üst kısmı görünecek şekilde UV'yi ayarlamaya çalışıp vazgeçtim ama three.js'in uniform'ları olan projectionMatrix ve modelViewMatrix'i GLSL'in üst kısmında sadece tanımlayınca referans verebildim.

  • Statik bir Penrose döşemesi yaptım: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    Küre sonsuz olmadığı için aperiyodik döşeme kullanmanın pratik bir anlamı yok, ama yine de güzel görünüyor.
    Sonsuz bir koniyi döşeyebilecek benzer bir karo kümesi ya da tek bir karo olup olmadığını henüz bilmiyorum.

    • Fiziksel karolarsa eğrilik uymayacağı için imkânsız görünüyor.
      İlginç bir soru olarak kalıyor, ama hangi projeksiyonun anlamlı olduğu yeterince net olmadığı için daha derine inmek zor.
    • Küreyi sonsuz aperiyodik karo düzlemleri arasından yavaşça geçirerek göstermek de eğlenceli olabilir.

  • Konudan biraz sapıyor ama The Sphere'ün gerçekte ne kadar büyük bir mühendislik projesi olduğu büyüleyici.
    Yapının kendisinden, kürenin içindeki ve dışındaki binlerce LED panelin senkronizasyonuna, Las Vegas sıcağında soğutmaya ve içerideki 18.000 koltuğu yeterince serin ve havalandırılmış tutmaya kadar her şeyi kapsıyor.
    Sıradan ofis binalarının çoğunda bile düzgün havalandırma yok.

    • Bunca çaba ve kaynak, sonuçta daha fazla bakışı reklama kilitlemek için harcanıyor.
    • Sphere'in içinde özel efektler için soğuk rüzgâr da üretebiliyorlarmış; gerçekten harika.

  • Basit bir smiley.frag yaptım: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • Proje çok güzel.
    Her kodun ayrı bir URL'si olsa paylaşması kolay olurdu. Kodu URL'nin içine gömmek de iyi bir yöntem gibi görünüyor.

  • Büyük bir gülen yüz shader'ı yaptım.
    Ağzı sdRing ile yapan, sol-sağ simetrisini kullanarak gözleri tek seferde işleyen ve sarı renkte çıktı veren GLSL kodu.

  • Shader'lara ilk kez dokundum ve dönen bir karpuz yaptım.
    RGB tuple'larıyla uğraştığını, fract()'ın kalan işlemi gibi göründüğünü ve bu değerleri karesini alıp toplayarak yumuşak şeritler oluşturduğunu az çok anlıyorum; ama shader'ın tam olarak nasıl çalıştığı, vUv'nin ne olduğu ve gl_FragColor'ın nereye atandığı hâlâ belirsiz.

    • GPU, model uzayındaki nesneyi, yani üçgen köşe noktalarının listesini, kamera konumunu ve bunları ekran uzayına dönüştüren vertex shader'ı alır.
      Ardından üçgenleri parçalara, yani piksellere böler ve her parça için fragment shader'ı çalıştırır.
      Burada girişler, tüm parçalara aynı değerle gelen time uniform'u ve vertex'ten çıktıktan sonra üçgen içinde doğrusal olarak enterpole edilen vUv'dir; vUv, küre üzerindeki piksel koordinatlarına karşılık gelir.
      gl_FragColor, o parçaya uygulanacak RGBA renk çıktısıdır.
      Tipik bir oyun ya da Google Earth shader'ında buna tekstürleme ve aydınlatma eklenir; GPU yürütme modeli tek tek piksel kodluyormuşsunuz gibi görünse de aslında SIMT olduğu için NVIDIA aynı anda 32, AMD ise 64 piksel işler.
      Koşullu ifadelerin genelde iki dalı da çalıştıran koşullu işlemlere dönüştüğünü düşünebilirsiniz.
    • Kodun canvas'taki tüm pikseller için çalıştırıldığı bir yaklaşım.
      https://www.shadertoy.com/ hoşunuza gidebilir.

  • https://www.glslsandbox.com üzerindeki shader'lara da bakmaya değer.
    Ancak oraya olgunlaşmamış kişiler sık sık NSFW shader'lar yüklüyor ve yöneticiler de pek titiz incelemiyor gibi; dikkatli olmak lazım.

    • Yüzlerce satır GLSL ile beden yapmak da etkileyici ama sadece 11 satırla bir seks partisi sahnesi kurmak başka bir seviye.
      “NSFW GLSL içeriğinin” Kolmogorov karmaşıklığının ne kadar olduğunu merak ettiriyor.
      https://www.glslsandbox.com/e#108133.0
    • Bu saf deha.
      NSFW: https://www.glslsandbox.com/e#108230.3
      Kod yorumlarında ChatGPT'den bedeni daha kilolu yapmasını, arka plana kayan çizgiler eklemesini, renkleri değiştirmesini ve belirli vücut bölümleri eklemesini isteyen prompt'lar bırakılmış.
    • Oraya gamalı haç yükleyen insanlara kıyasla çok daha iyi bir noktaya gelmiş.

  • Çok iyi.
    Benim isocity projemde birinin gönderdiği çözüme bakınca, oluşturulan şehri URL ile paylaşılabilir hâle getiriyor.
    Benzer bir yöntem uygulanabilir gibi: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere, demo partisi düzenlemek için harika bir yer olabilir.
    https://en.wikipedia.org/wiki/Demoscene#Parties