Grafik Psikedelik 0: Pengantar

• Sebagai pengantar untuk membuat visual animasi dan game yang psikedelik, materi ini dimulai dari UV dan perhitungan warna agar bisa diikuti tanpa pengetahuan awal
• Kunci memberi warna pada model 3D adalah memahami UV mapping/texturing, yang menghubungkan area gambar 2D ke permukaan 3D
• Koordinat UV adalah dua nilai dalam rentang 0.0~1.0 yang menunjukkan posisi pada tekstur, dan (0.5, 1.0) berarti titik 50% horizontal, 100% vertikal
• Warna dalam grafis biasanya dinyatakan dengan tiga nilai RGB, dan jika X·Y dari UV diubah menjadi merah·hijau, perubahan koordinat akan terlihat sebagai gradasi warna
• Kode contoh menentukan warna lewat perhitungan independen per piksel pada satu bidang 3D yang menutupi seluruh layar, sehingga diperlukan cara berpikir yang berbeda dari penulisan program biasa

---

Tujuan dan asumsi seri

• Seri Grafik Psikedelik membahas cara membuat visual psikedelik yang bisa dipakai untuk animasi dan game
• Tidak memerlukan pengetahuan awal tentang grafis atau pemrograman, tetapi pemahaman trigonometri dan pengalaman pemrograman akan membantu
• Tujuannya adalah mempelajari prinsip dasar grafik psikedelik yang digunakan dalam contoh video
• Sebagian besar video dibuat dengan Blender, tetapi teknik dalam seri ini mudah dipindahkan ke lingkungan lain, dan Blender akan dibahas di part 3
• Bagian 0 dan part 1 mengarah ke contoh yang berjalan di web

Model 3D dan UV mapping

• Model 3D adalah permukaan yang terdiri dari titik dan bidang

  • Grafis komputer terlihat seperti 3D, tetapi saat menulis kode grafis sering kali kita perlu berpikir dalam 2D
  • Saat membuat model di program editor 3D, yang sebenarnya dibuat adalah vertex yang berupa titik-titik di ruang, serta face yang menghubungkan vertex tersebut
  • Model adalah permukaan berongga, dan yang terlihat di layar hanyalah permukaannya
  • Hampir semua bentuk 3D dalam game dan animasi pada akhirnya tersusun dari titik dan bidang seperti ini
  • Bahkan model yang terlihat halus pun sering kali hanya memiliki sangat banyak titik dan bidang sehingga batasnya sulit dikenali

• Tekstur adalah gambar 2D yang ditempelkan ke permukaan 3D

  • Cara standar menambahkan warna ke permukaan 3D adalah dengan UV mapping/texturing
  • Seperti peta proyeksi 2D bumi yang tampak meregang atau terdistorsi di beberapa area, gambar 2D hasil membuka warna model 3D juga bisa mengalami distorsi
  • Gambar 2D yang dibentangkan ini adalah tekstur (texture) yang menyimpan warna yang nantinya diterapkan ke permukaan model 3D
  • Salah satu cara membuat image texture adalah dengan membuat file gambar kosong, lalu menentukan bagian mana dari gambar itu yang dipakai oleh setiap face pada objek 3D
  • Beberapa face 3D yang berbeda boleh berbagi area tekstur yang sama; pada bentuk tubuh simetris, misalnya, umum untuk mengecat satu sisi saja lalu menetapkan area yang sama ke kedua sisi
  • Area tekstur yang dipakai tiap face tidak harus sama ukuran atau proporsinya dengan face 3D aslinya

Texture painting dan koordinat UV

• Melukis di tekstur akan muncul di model

  • Apa pun yang dilukis di atas tekstur akan ditampilkan pada model 3D
  • Sebagian besar software menyediakan fungsi untuk mewarnai image texture secara tidak langsung saat kita melukis langsung pada model 3D

• Koordinat UV adalah posisi 2D di atas tekstur

  • Area tekstur yang dicadangkan untuk setiap face model 3D adalah UV map, yaitu data yang menghubungkan sebagian image texture dengan model 3D
  • UV bisa dipandang sebagai koordinat 2D yang menunjukkan posisi pada image texture
  • Setiap face 3D didefinisikan oleh beberapa titik, dan saat titik-titik itu ditempatkan pada image texture, masing-masing titik memiliki koordinat UV
  • Pada (0.5, 1.0), nilai pertama 0.5 berarti titik tengah arah kiri-kanan, dan nilai kedua 1.0 berarti bagian paling atas arah vertikal
  • Nilai UV biasanya sama-sama berada antara 0.0 sampai 1.0, dan umumnya digunakan ruang koordinat di dalam persegi yang dibatasi oleh (0, 0) dan (1, 1)
  • Dengan memakai 0 dan 1 alih-alih posisi piksel, perpindahan ke kiri-kanan dan atas-bawah bisa dinyatakan sebagai rasio; jika dikali 100, ini mudah dipahami seperti persentase
  • Nama sebenarnya untuk dua dimensi ini adalah U dan V; karena X·Y·Z sudah dipakai untuk posisi 3D, digunakanlah nama UV

Warna dan tipe data dalam grafis

• RGB mengekspresikan warna dengan tiga nilai

  • Warna dalam grafis komputer biasanya dinyatakan sebagai RGB, yaitu merah, hijau, dan biru
  • Jumlah merah, hijau, dan biru untuk satu warna biasanya berupa nilai antara 0.0 sampai 1.0
  • Merah dinyatakan sebagai (1.0, 0.0, 0.0), hitam sebagai (0.0, 0.0, 0.0), dan putih sebagai (1.0, 1.0, 1.0)
  • Notasi heksadesimal seperti 0xff0000 yang dipakai di grafis web menyatakan informasi yang sama dengan cara berbeda

• Jika UV dilihat sebagai warna, koordinat akan terlihat

  • Saat memvisualisasikan koordinat UV, secara konvensi nilai pertama X dipakai sebagai merah, nilai kedua Y sebagai hijau, dan biru diatur ke 0.0
  • UV (0, 1) menjadi warna (0.0, 1.0, 0.0) sehingga terlihat hijau
  • UV (1, 0) menjadi warna (1.0, 0.0, 0.0) sehingga terlihat merah
  • Jika sebuah persegi diwarnai berdasarkan posisi UV, semakin ke kiri atas warna hijau makin kuat, dan kanan bawah menjadi merah
  • Kiri bawah menjadi hitam karena merah dan hijau sama-sama 0, sedangkan kanan atas menjadi kuning karena mengandung merah dan hijau sekaligus

• float, vec2, vec3

  • float adalah satu angka desimal, yaitu bilangan floating-point
  • vec berarti vektor; vec2 adalah pasangan dua angka desimal, dan vec3 adalah kumpulan tiga angka desimal
  • Warna RGB memiliki tiga nilai merah, hijau, dan biru sehingga dinyatakan dengan vec3
  • UV memiliki dua nilai X dan Y sehingga sesuai dengan vec2

Cara kerja eksekusi kode grafis contoh

• Contoh kode dalam seri ini tidak memakai model 3D terpisah, melainkan menggunakan satu bidang 3D yang memenuhi seluruh layar
• Warna tidak ditambahkan lewat image texture; kode langsung menentukan warna pada image texture
• Alur pemrosesannya adalah sebagai berikut
  • Kamera dalam adegan 3D menghitung bidang 3D mana yang terlihat
  • Koordinat UV dihitung memakai area tekstur yang dicadangkan untuk tiap bidang, yaitu UV mapping
  • Koordinat UV yang telah dihitung dan informasi seperti posisi 3D dikirim ke kode
  • Kode menentukan warna untuk posisi tersebut
• Proses seperti ini bisa dipahami sebagai sesuatu yang terjadi jutaan kali per detik
• Kode grafis bukan bekerja dengan menggambar langsung garis berkesinambungan dari satu titik layar ke titik lain, melainkan lebih mirip menjawab warna untuk setiap posisi saat posisi itu dipilih
• Kode yang ditulis tidak dijalankan satu kali saja untuk menghasilkan seluruh warna, tetapi dijalankan untuk setiap piksel, yaitu bagian kecil layar
• Karena ada batasan bahwa warna di area layar lain tidak bisa diperiksa, pemrograman grafis membutuhkan cara berpikir yang berbeda meskipun sudah punya pengalaman pemrograman umum
• part 1 melanjutkan ke cara membuat visual menarik di dalam batasan seperti ini

[GN⁺]

Komentar di Hacker News

• Saya David Tristram. Saya adalah anggota pendiri Raster Masters, grup pertunjukan grafis komputer era 1990-an, dan seperti yang dikatakan @hopkins, kami membuat video sintetis dengan workstation Silicon Graphics kelas atas yang diselaraskan dengan musik live seperti Grateful Dead, Herbie Hancock, dan Graham Nash.
  Setelah beberapa kali berubah, sekarang saya terutama bekerja di Resolume Avenue dan TouchDesigner, lingkungan pemrosesan video 2D. Tautan-tautan ini memberi inspirasi

  • Saya penasaran siapa saja anggota Raster Masters lainnya, dan kisah gila apa yang dialami di konser Grateful Dead.
    Sekarang saja, saat presentasi, cukup mencolokkan proyektor ke laptop pun setiap kali rasanya seperti melempar dadu apakah layar akan muncul, jadi saya juga penasaran proyektor, kalibrasi, dan persiapan seperti apa yang diperlukan saat itu untuk menampilkan video SGI resolusi tinggi secara live di layar di atas band
  • Saya penasaran apakah ada tautan karya yang bisa ditonton
  • Sepertinya saya pernah melihat karya mereka di beberapa konser Dead sekitar tahun 1992

• Kalau ingin mencoba-coba grafis psikedelik tanpa turun terlalu jauh ke level rendah, hydra cukup bagus. Ini lingkungan live coding berbasis JavaScript dan kurva belajarnya juga landai

  • Saya penasaran apakah ada yang mendukung input musik. Dulu pada masa Winamp saya suka plugin visualisasi, tetapi sekarang seni seperti itu tampaknya sudah mati
  • Di dwitter.net juga ada banyak contoh grafis psikedelik yang dibuat dengan JavaScript

• Bicara soal dokumen asli dan koordinat UV, dulu saya banyak mengeksplorasi cara menggeser koordinat tekstur UV untuk tiap simpul pada mesh persegi secara menarik.
  Saat itu saya memakai warna per simpul, dan kalau sekarang mungkin saya akan memakai shader fragmen (piksel) seperti yang ada di ShaderToy. Cara yang sangat menarik adalah meng-adveksi koordinat tekstur mengikuti flow field. Cukup gunakan sembarang medan vektor 2D dan terapkan pergeseran berulang pada tiap koordinat. Bahkan metode eksplisit yang tidak akurat saja hasilnya bagus.
  Jika koordinat terdistorsi terlalu jauh, gambar menjadi tidak dapat dikenali, dan solusi sederhananya adalah memberi koordinat gaya “pemulih” agar kembali ke posisi aslinya. Maka ia akan memantul kembali ke tempat semula, seperti meratakan selembar foil cermin.
  Sekarang saya memakai feedback bersama efek pergeseran seperti ini. Jika pergeseran yang sangat kecil diterapkan berulang, gerakannya menjadi cukup mirip aliran fluida

  • PostScript melt buatan Jeremy Huxtable juga memakai cara yang sama. Ia juga pembuat “Big Brother” Eyes asli di NeWS, yang menginspirasi XEyes.
    Jika memilih persegi panjang acak dan berulang kali menyalinnya dengan offset acak, efek yang sangat digital, kotak-kotak, dan tajam pun berubah menjadi efek yang halus dan organik melalui sedikit keacakan (dithering). Ini bekerja baik bahkan dalam hitam-putih, dan pada akhirnya hanyalah PostScript.
    https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
    Ada juga “Big Brother” eye.ps asli dari Jeremy. Itu adalah demo klasik yang menampilkan jendela bola mata NeWS berbentuk bulat.
    https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
  • Ini mengingatkan saya pada kesenangan manipulasi langsung yang sederhana dari Kai Power Goo.
    LGR: Kai's Power Goo – Classic 90s Funware for PC!
    https://www.youtube.com/watch?v=xt06OSIQ0PE

• Saya suka bahwa di HTML kita bisa dengan mudah memakai shader yang bekerja pada gambar. Kemampuan saya di bidang ini biasa saja, tetapi menyenangkan melihat sejauh apa orang mendorongnya.
  Memberikan sekadar perkiraan peta kedalaman sederhana saja sudah membuat hasilnya jauh lebih menarik. Beberapa tahun lalu saya mengerjakan proyek dengan teknik serupa untuk melakukan crossfade mulus antar-gambar dengan “efek menarik”, dan ada tulisan serta demonya.
  https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

• Sejujurnya, tulisan Rolling Hills yang menyertai artikel ini jauh lebih menarik.
  Terutama bagian di sekitar pertengahan yang menerapkan kode di bawah ini pada gambar statis sangat berkesan.
  uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
  Sebagai orang yang pernah mengalami beberapa pengalaman psikedelik, setidaknya pada dosis rendah yang tidak heroik, ini tampak paling dekat dengan pengalaman visual nyata. Jika gelombangnya sedikit diperlambat dan rentang geraknya sedikit dikurangi, mungkin akan lebih mirip.
  Saya lebih tertarik mereproduksi halusinasi visual yang dipicu zat psikedelik daripada efek visual keren untuk pertunjukan. Tentu saja saya menghormati seniman di kedua sisi.
  Ada seorang seniman yang membuat video psikedelik luar biasa dengan alat modern, tetapi saya sama sekali tidak bisa mengingat nama akunnya. Kalau ketemu akan saya tinggalkan di bawah.
  Jika dibandingkan dengan bagian tulisan Rolling Hills ini, saya teringat adegan teh jamur di Midsommar, khususnya adegan kulit pohon. Efek benda yang “bernapas” dan mengalir adalah pengalaman visual yang benar-benar unik, dan menyenangkan melihatnya diimplementasikan dengan berbagai cara

  • Mungkin bukan akun yang dimaksud, tetapi akun YouTube ini mereproduksi pengalaman visual dengan baik sekaligus membahas efek lain.
    Saat melihat alam, video ini kuat dalam menunjukkan cara pola geometris mulai terbentuk, serta efek “bernapas”. Ia membahas berbagai zat, mulai dari permukaan yang sedikit bernapas atau berdenyut hingga “dunia” geometris penuh seperti yang muncul dari zat semacam DMT.
    https://www.youtube.com/@josikinz

• Pada awal 90-an, Todd Rundgren merilis aplikasi Mac Flowfazer. Aplikasi ini tidak mensimulasikan pengalaman tersebut, tetapi membantu menjaga alur dengan mengalihkan perhatian
  Sebagian orang juga memakainya sebagai panduan untuk kreasi mereka sendiri
  [1] https://grokware.com/
  [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
  Saat itu adalah era screen saver dan animasi palet

• Jika Anda menyukai hal semacam ini dan punya kesempatan melihat Fractaled Visions menangani visual di pertunjukan musisi Tipper, itu akan menjadi pengalaman luar biasa
  Itu adalah penggambaran visual paling akurat dari artefak psikedelik yang pernah saya lihat. Saya menonton pertunjukan kolaborasi mereka tahun lalu, dan itu adalah pengalaman seni terbaik dalam hidup saya. Visual Fractaled Visions begitu kaya dan kompleks sampai hampir sulit dipercaya
  Meski saya cukup paham pemrograman shader dan semacamnya, beberapa efek membuat saya berpikir, “bagaimana mungkin mereka melakukannya?” Video set di bawah ini tidak sepenuhnya menangkap pengalamannya, tetapi cukup menyampaikan suasananya. Menontonnya dalam 4K 60fps berada di level yang benar-benar berbeda
  https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

• Di sini perlu tautan ShaderToy: https://www.shadertoy.com

• Saya teringat klasik Flash lama di bidang ini, Flashback.swf. Render videonya ada di sini: https://m.youtube.com/watch?v=KaSqrx93rS0

  • Pada masa Flash, video ini membuat saya mengenal grup musik elektronik Shpongle
    Animasi ini menggunakan remix Divine Moments of Truth, mungkin versi “Russian Bootleg”. Sebelumnya saya memang sudah mendengarkan musik elektronik, tetapi saat pertama kali mendengar musik elektronik dari genre ini, rasanya benar-benar seperti kepala saya meledak

• Minggu ini, sambil bekerja saya menulis shader WebGL dan mengutak-atik detailnya agar tampak seperti efek kamera fisik
  Namun kadang, ketika saya membuat sesuatu dengan keliru, hasilnya mirip dengan yang ada di tulisan ini, dan jujur saja jauh lebih menarik daripada efek gambar standar
  Kasus penggunaan visualnya mungkin terbatas, tetapi bermain-main dengan model yang kita buat tentang cara kerja grafika komputer adalah cara yang sangat baik untuk mempelajari tiap sistem. Bukan hanya grafika, kita juga bisa mempelajari matematika dasar pemrograman, cara GPU bekerja serta keterhubungannya dengan memori dan CPU, cara kerja mata, hingga cara menangani animasi dan waktu