BELAJAR MEMBUAT SHADERS UNTUK PPSSP BAGIAN 3

Setelah sebelumnya kita belajar tipe data Sekarang kita belajar Mix

Mixing Efek dalam Shader: Memahami Proses Penggabungan dengan Analoginya

Bayangkan Anda sedang memasak. Anda punya bahan dasar seperti nasi, dan ingin menambah rasa dengan sedikit bumbu. Sama seperti itu, dalam shader, kita bisa "mencampur" efek dengan menggunakan fungsi mix. Fungsi ini bekerja untuk menggabungkan dua nilai atau efek yang berbeda berdasarkan proporsi tertentu, mirip seperti menambahkan bumbu ke dalam masakan agar lebih enak!

Mari kita lihat contoh sederhana tentang bagaimana shader bisa menggunakan efek mixing ini.

Contoh Shader Post-Processing

#ifdef GL_ES

precision mediump float;

precision highp int;

#endif

varying vec2 v_texcoord0;

uniform sampler2D sampler0;

void main(){

   vec4 base = texture2D(sampler0, v_texcoord0);

   vec3 ambienColor = vec3(0.2, 0.3, 0.5);

   vec3 color = base.rgb;

   vec3 final = mix(ambienColor, color, 0.8);

   gl_FragColor = vec4(final, 1.0);

}

Penjelasan Komponen Shader

1. Apa itu ambienColor? ambienColor adalah warna tambahan yang ditambahkan ke objek. Dalam hal ini, objek tersebut adalah tekstur yang diambil dari sampler0, yaitu layar atau gambar saat ini. Warna ini tidak langsung mengubah warna dasar, tapi memberikan tambahan pencahayaan atau nuansa tertentu.

Misalnya, jika objek tampak gelap, Anda bisa menambahkan sedikit "cahaya" atau warna dengan ambienColor agar tampak lebih terang. Ini memberikan kesan bahwa objek terkena cahaya ambient (cahaya yang menyebar merata di seluruh ruang).

2. Apa itu color? color mengakses saluran warna RGB dari gambar dasar yang diambil dari sampler0. Anda bisa mengatur setiap saluran warna (merah, hijau, biru) sesuai keinginan.

Misalnya, jika Anda ingin objek menjadi lebih "pucat" atau lebih "gelap", Anda bisa menyesuaikan nilai-nilai dalam color seperti ini:

color.r = 0.5; // Mengatur nilai merah

color.g = 0.5; // Mengatur nilai hijau

color.b = 0.5; // Mengatur nilai biru

Setiap saluran ini mewakili warna dasar dalam objek. Jika color.r = 0.5, artinya Anda mengatur warna merah objek menjadi setengah dari nilai penuh.

3. Apa itu final? final adalah hasil penggabungan antara ambienColor dan color. Di sini kita menggunakan fungsi mix untuk mencampur kedua warna tersebut. Dengan intensitas 0.8, kita memberi lebih banyak bobot pada warna asli (color), tapi tetap menambahkan sedikit sentuhan dari ambienColor. Anda bisa mengatur nilai 0.8 ini agar campuran warna lebih banyak dari color atau lebih banyak dari ambienColor sesuai kebutuhan.

4. Apa itu gl_FragColor? gl_FragColor adalah cara untuk menampilkan warna yang sudah dihitung ke layar. Di GLSL, nilai yang dikirimkan ke gl_FragColor harus berformat vec4, yaitu sebuah nilai yang memiliki empat komponen: Red, Green, Blue, dan Alpha (transparansi).

Karena final adalah vec3 (hanya tiga nilai), kita perlu menambahkan satu nilai lagi untuk membuatnya menjadi vec4. Nilai terakhir ini adalah 1.0, yang berarti opasitas penuh atau tidak transparan.

Jadi, penulisan ini:

gl_FragColor = vec4(final, 1.0);

Akan menggabungkan tiga komponen warna (final) dengan nilai alpha 1.0 agar tampil di layar.

Jika langsung menggunakan:

gl_FragColor = final;

Ini akan menghasilkan error karena gl_FragColor membutuhkan 4 nilai, sementara final hanya memberikan 3.

Kesimpulan

Shader ini adalah cara sederhana untuk memanipulasi warna dan efek di dalam grafis komputer. Dengan menggunakan fungsi mix, Anda bisa mencampurkan warna dasar dengan efek lain, seperti warna ambient atau pencahayaan, dan mengontrol intensitas campuran tersebut.

Sekarang, Anda sudah memiliki dasar yang kuat untuk menciptakan shader yang lebih kompleks, dengan memanfaatkan penggabungan berbagai efek untuk menciptakan tampilan yang lebih menarik! Semoga penjelasan ini membantu Anda memahami cara kerja mixing efek dalam shader dan memberi inspirasi untuk eksplorasi lebih lanjut dalam pembuatan shader yang unik!