Tekstur XOR (2004)

 (lodev.org)
1 poin oleh GN⁺ 2024-12-19 | 1 komentar | Bagikan ke WhatsApp
  • Tekstur XOR adalah tekstur prosedural sederhana yang dibuat dengan melakukan XOR pada koordinat x dan y piksel; berguna untuk menguji texture mapper dengan cepat tanpa file gambar
  • Di C++, gunakan operator ^ untuk membuat nilai x ^ y lalu masukkan ke RGB untuk menghasilkan pola grayscale; XOR mengembalikan 1 hanya ketika dua bit berbeda
  • Polanya terlihat bagus saat ukuran tekstur adalah pangkat dua; pada ukuran lebih kecil dari 256, rentang nilainya sempit sehingga tampak gelap, dan bisa dikoreksi dengan mengalikan nilai warna
  • Tekstur XOR yang lebih besar dari 256 terbatasi oleh rentang warna 0–255 pada kanal 8-bit sehingga kualitasnya tidak meningkat; untuk ukuran lebih besar diperlukan pembagian nilai atau kanal dengan bit lebih banyak
  • Dengan menerapkan & dan | pada pendekatan berbasis koordinat yang sama, tekstur AND dan OR juga bisa dibuat; AND lebih gelap, OR lebih terang, dan jumlah XOR serta AND menjadi OR

Di mana tekstur XOR berguna

  • Tekstur XOR adalah tekstur prosedural yang sangat mudah dibuat dan secara visual cukup meyakinkan
  • Dalam demo atau rilis intro, tekstur ini terlalu sering digunakan sehingga bukan pilihan yang baik; di game pun kegunaannya rendah kecuali untuk hal seperti ubin lantai yang mencolok
  • Tanpa memuat file gambar atau menulis kode pembangkitan yang kompleks, Anda bisa cepat memeriksa apakah texture mapper baru bekerja

Membuat pola dengan XOR koordinat

  • Ide dasarnya adalah melakukan XOR pada koordinat x dan koordinat y dari piksel saat ini
  • Di C++, operator XOR adalah ^
  • Contoh kode menghitung nilai untuk semua piksel pada layar 256×256
    • Uint8 c = x ^ y
    • Mengatur warna grayscale dengan ColorRGB(c, c, c)
  • Hasil eksekusinya muncul sebagai pola XOR yang menggabungkan pola bit koordinat

Batasan ukuran dan rentang warna

  • Pola tekstur tampak lebih bagus saat ukuran tekstur adalah pangkat dua
  • Nilai komponen warna berada dari 0 hingga 255
  • Nilai warna maksimum yang dihasilkan operasi XOR sama dengan dimensi tekstur ketika ukuran tekstur adalah pangkat dua
    • Pola yang lebih kecil dari 256, seperti 64, terlihat terlalu gelap
    • Mengalikan nilai warna 4 kali bisa mengembalikan kecerahannya
  • Pada ukuran lebih besar dari 256, seperti 512, warna harus dibatasi agar tidak melebihi 256
    • Bisa menggunakan operasi sisa bagi dengan 256, tetapi itu berarti polanya tidak lagi menjadi pola XOR yang sebenarnya
    • Membaginya dengan 2 adalah pilihan yang lebih baik
  • Pada kanal 8-bit, nilai warna yang dapat dibedakan tidak cukup sehingga kualitas tekstur XOR yang lebih besar dari 256×256 tidak meningkat
  • Jika mode warna mendukung jumlah bit yang lebih banyak, batasan untuk tekstur besar bisa berbeda

Cara kerja bit pada operasi XOR

  • XOR melakukan operasi pada setiap bit yang bersesuaian dalam representasi biner dari dua bilangan bulat
  • Exclusive OR mengembalikan 1 jika dua bit berbeda, dan 0 jika sama
  • Tabel kebenarannya adalah sebagai berikut
    • 0 XOR 0 = 0
    • 0 XOR 1 = 1
    • 1 XOR 0 = 1
    • 1 XOR 1 = 0
  • Misalnya, 5 XOR 13 = 8
    • Dalam biner, 0101 XOR 1101 = 1000

Variasi warna

  • Nilai XOR dapat diterapkan bukan hanya sebagai grayscale, tetapi juga secara berbeda pada tiap kanal RGB
  • Dalam contoh, warna disusun menggunakan c = x ^ y
    • r = 255 - c
    • g = c
    • b = c % 128
  • Nilai XOR juga dapat digunakan sebagai hue pada warna HSV dan dimasukkan ke fungsi HSVtoRGB
    • Dalam contoh, ColorHSV(c, 255, 255) dikonversi dengan HSVtoRGB lalu digunakan sebagai warna piksel

Tekstur AND dan OR

  • Operator AND dan OR juga bisa digunakan sebagai pengganti XOR untuk membuat tekstur berbasis koordinat yang mirip
  • Di C++, operator AND adalah &, sedangkan operator OR adalah |
  • AND mengembalikan 1 hanya ketika kedua bit sama-sama 1
    • 0 AND 0 = 0
    • 0 AND 1 = 0
    • 1 AND 0 = 0
    • 1 AND 1 = 1
  • OR mengembalikan 1 jika salah satu atau keduanya bernilai 1
    • 0 OR 0 = 0
    • 0 OR 1 = 1
    • 1 OR 0 = 1
    • 1 OR 1 = 1
  • Tekstur AND lebih gelap karena hanya ada satu kasus yang mengembalikan 1, sedangkan tekstur OR lebih terang karena lebih banyak kasus mengembalikan 1
  • Jumlah tekstur XOR dan tekstur AND menjadi tekstur OR

Kesimpulan dan contoh penggunaan

  • Tekstur XOR mudah dibuat, sehingga berguna untuk menguji apakah renderer tekstur bekerja
  • Tidak cocok untuk aplikasi seperti karya seni atau game
  • Tekstur ini juga dapat digunakan sebagai tekstur 3D dalam bentuk x ^ y ^ z; dalam contoh, dipakai untuk memastikan renderer tekstur planet bekerja dengan benar

Bacaan terkait

1 komentar

 
GN⁺ 2024-12-19
Komentar Hacker News
  • Saat SMP aku sempat sedikit ngoding, tapi cuma bisa membuat aplikasi CLI sederhana yang berjalan di terminal. Lalu suatu hari aku menemukan Lode's Computer Graphics Tutorial dan untuk pertama kalinya melihat contoh mudah tentang cara membuka jendela dan menggambar grafik di layar
    Berkat itu aku jadi bisa mencoba membuat ulang game retro seperti Pacman, Snake, dan Space Invaders, dan hal-hal yang mustahil dilakukan hanya dengan terminal jadi memungkinkan
    Menurutku situs ini yang membuatku memulai karier pengembangan perangkat lunak di usia yang cukup muda. Waktu itu aku nyaris hafal halaman dan contoh di https://lodev.org/cgtutor/ dan sama sekali tidak paham sebagian matematikanya
  • Dulu aku pernah membuat program kecil assembly x86 yang menghasilkan gambar dengan teknik serupa, tapi warnanya 1-bit
    Alih-alih x ^ y, aku memakai parity(x ^ y), jadi kalau jumlah bit 1 genap diberi satu warna, dan kalau ganjil warna lain. Hasilnya tampak seperti ubin yang hampir berulang tapi tidak sepenuhnya berulang, jadi menarik secara visual
    Setelah membongkar file lama, ternyata aku menulisnya dengan fasm pada 2019 dan program itu menghasilkan file XPM2, jadi untuk melihatnya harus dikonversi manual ke XPM3. Gambar hasilnya ada di sini: https://i.postimg.cc/FsFhXSHG/xortiles.png
    Kalau mau aku bisa unggah kodenya, meski tidak yakin ada yang tertarik
  • Jadi teringat tekstur jarak Hamming: https://chalkdustmagazine.com/features/the-hidden-harmonies-...
  • Satu fakta menarik: setiap titik pada tekstur XOR adalah bilangan bulat terkecil yang belum muncul di atas atau di kirinya
    Sambil melempar tautan blogku lalu kabur: https://nicknash.me/2012/10/26/happy-halloween/
    • Baris yang dimulai dengan 5 pada matriks contoh itu salah, seharusnya begini
      5 4 7 6 1 0 3 2
  • Kalau dianimasikan dengan fungsi seperti color = (y == (x ^ t)) sambil mengubah nilai t, hasilnya memberi efek serupa; ini disebut munching squares
    Awalnya ini ditulis untuk PDP-1 pada awal 1960-an, dan aku pernah melihatnya didemonstrasikan di PDP-1 milik Computer History Museum
    Layar PDP-1 hanya bisa menampilkan titik dan tidak memakai framebuffer bitmap, jadi aku selalu penasaran bagaimana tekstur XOR khas itu bisa terbentuk
    Ternyata caranya dengan memanfaatkan fosfor layar yang bertahan lama, dan kecerahan tiap titik berkurang seiring waktu
    Ada video jalannya di CHM, tetapi efek jejak fosfornya tidak terlalu tertangkap: https://www.computerhistory.org/collections/catalog/10266415...
    Video yang dijalankan di MAME lumayan menunjukkan bagaimana jejak fosfor membentuk tekstur XOR: https://youtu.be/AxJzUiaQ7xM?si=X9K47c4WyD6AisUp
  • Ada situs dengan ribuan contoh seperti ini: https://www.dwitter.net/
    Dwitter adalah semacam Twitter untuk contoh JavaScript satu baris yang memakai canvas, dan pengguna harus memasukkan karyanya dalam 140 byte
  • Aku pernah membuat selimut quilt memakai tekstur ini
    Tampilannya sangat mirip karena memakai skala warna pelangi seperti salah satu gambar di bagian akhir situs itu, dan sekarang digantung di dinding sebagai hiasan berukuran 6 kaki × 6 kaki
  • Situs yang sangat keren. Aku sarankan naik satu tingkat lalu menjelajahi halaman-halaman lainnya
    Meski materinya sudah 20 tahun, isinya masih banyak yang berguna di berbagai tempat, terutama kalau kamu mengerjakan shader
  • Belakangan ini aku bermain-main dengan pola ini di J, dan bisa ditulis seperti ini
    ~:"1/~&.#:i.2^8
    Bisa dilihat di sini: https://jsoftware.github.io/j-playground/bin/html2/#base64=b...
  • Baru saja membaca https://news.ycombinator.com/item?id=42414817 dan sepertinya tekstur XOR juga bisa dianggap sebagai sesuatu yang ditemukan secara tidak sengaja