(sim) Menulis shader untuk Sphere di Vegas

 (whenistheweekend.com)
1 poin oleh GN⁺ 2023-12-01 | 1 komentar | Bagikan ke WhatsApp
  • Halaman The Sphere menunjukkan cara menghitung warna permukaan bola melalui 5 contoh dan potongan shader GLSL
  • Input shader terdiri dari time, vUv, dan vNormal, dengan waktu dan koordinat UV menjadi pusat perubahan warna
  • main() menghitung warna akhir tiap piksel dengan memasukkan vec4(...) ke gl_FragColor
  • Nilai RGB dibuat berdasarkan cos(time + vUv.xyx + vec3(0., 2., 4.)), yang merepresentasikan perubahan berbasis waktu
  • vNormal yang dideklarasikan tidak digunakan dalam potongan kode yang diberikan, sehingga tidak memengaruhi perhitungan warna saat ini

Struktur halaman The Sphere

  • Judulnya adalah The Sphere
  • Di dalam isi terdapat penanda contoh dari example 1 hingga example 5
  • Setelah itu ditempatkan kode shader yang tampak seperti GLSL

Alur kode shader GLSL

  • Variabel input ada tiga: time, vUv, dan vNormal
    • time adalah uniform float
    • vUv adalah varying vec2
    • vNormal adalah varying vec3
  • Fungsi main() mengatur gl_FragColor
  • Warna dihitung dalam bentuk 0.5 + 0.5 * cos(...)
  • Input cos() berisi nilai waktu, vUv.xyx, dan vec3(0., 2., 4.) secara bersama-sama
  • Nilai alfa ditetapkan tetap ke 1.

Bacaan terkait

1 komentar

 
GN⁺ 2023-12-01
Komentar Hacker News

  • Berhasil membuat efek Matrix berjalan
    Saya sempat mencoba menyesuaikan UV agar bagian atas bola terlihat, lalu menyerah, tetapi uniform three.js projectionMatrix dan modelViewMatrix ternyata bisa dirujuk cukup dengan mendeklarasikannya di bagian atas GLSL

  • Membuat Penrose tiling statis: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    Karena bola tidak tak berhingga, memakai tiling aperiodik tidak punya makna praktis, tetapi tetap terlihat bagus
    Saya masih belum tahu apakah ada himpunan tile atau satu tile serupa yang bisa men-tile kerucut tak berhingga

    • Kalau tile fisik, tampaknya mustahil karena kurvatur-nya tidak cocok
      Pertanyaan menariknya masih ada, tetapi tidak cukup jelas proyeksi seperti apa yang bermakna, jadi sulit untuk menggali lebih jauh
    • Akan menarik juga jika ditampilkan dengan menggerakkan bola perlahan di antara bidang tile aperiodik tak berhingga

  • Sedikit keluar topik, tetapi yang menarik adalah seberapa besar proyek rekayasa The Sphere sebenarnya
    Semuanya tercakup, mulai dari struktur itu sendiri, sinkronisasi ribuan panel LED di dalam dan luar bola, pendinginan di tengah panasnya Las Vegas, hingga menjaga 18.000 kursi di dalam tetap cukup sejuk dan berventilasi
    Bahkan banyak gedung kantor biasa yang ventilasinya tidak beres

    • Semua upaya dan sumber daya sebesar itu pada akhirnya hanya untuk menahan lebih banyak perhatian pada iklan
    • Keren sekali bahwa di dalam Sphere mereka juga bisa membuat angin dingin untuk efek khusus

  • Saya membuat smiley.frag sederhana: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • Proyeknya sangat bagus
    Akan lebih mudah dibagikan kalau tiap kode punya URL terpisah. Cara menyematkan kode di dalam URL juga tampaknya oke

  • Membuat shader wajah senyum besar
    Ini kode GLSL yang membuat mulut dengan sdRing, memakai simetri kiri-kanan untuk menangani kedua mata sekaligus, lalu menampilkannya dengan warna kuning

  • Baru pertama kali mencoba shader, dan saya membuat semangka berputar
    Saya mengerti kira-kira bahwa ini menangani tuple RGB, fract() tampak seperti operasi sisa bagi, lalu nilainya dikuadratkan dan dijumlahkan untuk membuat garis-garis halus, tetapi saya masih belum paham persis bagaimana shader bekerja, apa itu vUv, dan ke mana gl_FragColor ditetapkan

    • GPU menerima objek dalam model space, yaitu daftar titik sudut segitiga dan posisi kamera, serta vertex shader yang mengubahnya ke screen space
      Setelah itu segitiga dipecah menjadi fragmen, yaitu piksel, dan fragment shader dijalankan untuk tiap fragmen
      Di sini inputnya adalah uniform time yang bernilai sama untuk semua fragmen, serta vUv yang dikeluarkan dari vertex lalu diinterpolasi linear di dalam segitiga; vUv setara dengan koordinat piksel di atas bola
      gl_FragColor adalah output warna RGBA yang akan diterapkan ke fragmen tersebut
      Pada shader game umum atau Google Earth, tekstur dan pencahayaan akan ditambahkan di sini, dan meski model eksekusi GPU terlihat seperti kita mengode satu piksel demi satu piksel, sebenarnya ini SIMT, sehingga NVIDIA memproses 32 piksel sekaligus dan AMD 64 piksel sekaligus
      Anggap saja percabangan kondisi pada umumnya diubah menjadi operasi kondisional yang menjalankan kedua cabang
    • Caranya adalah menjalankan kode untuk semua piksel di kanvas
      Sepertinya Anda juga akan suka https://www.shadertoy.com/

  • Shader di https://www.glslsandbox.com juga layak dilihat
    Namun perlu hati-hati, karena di sana orang-orang yang kurang dewasa sering mengunggah shader NSFW, dan admin tampaknya tidak memeriksanya dengan sangat teliti

    • Membuat tubuh dengan ratusan baris GLSL saja sudah luar biasa, tetapi menyusun adegan orgi hanya dalam 11 baris adalah level lain
      Saya jadi penasaran berapa kira-kira kompleksitas Kolmogorov dari “konten GLSL NSFW”
      https://www.glslsandbox.com/e#108133.0
    • Ini benar-benar kejeniusaan murni
      NSFW: https://www.glslsandbox.com/e#108230.3
      Di komentar kodenya tertinggal prompt untuk ChatGPT, seperti menyuruhnya membuat tubuh lebih gemuk, menambahkan garis gulir latar belakang, mengubah warna, dan menambahkan bagian tubuh tertentu
    • Setidaknya kondisinya jauh lebih baik daripada orang-orang yang dulu mengunggah Hakenkreuz di sana

  • Sangat bagus
    Kalau melihat solusi yang diunggah seseorang untuk proyek isocity saya, mereka memungkinkan kota yang dibuat dibagikan lewat URL
    Sepertinya pendekatan serupa bisa diterapkan: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere tampaknya akan menjadi tempat yang luar biasa untuk mengadakan demo party
    https://en.wikipedia.org/wiki/Demoscene#Parties