MEMBUAT SHADERS UNTUK PPSSPP BAGIAN 2

Membuat Shaders Lebih Fleksibel di PPSSPP

Setelah kita mempelajari dasar-dasar Vertex dan Fragment Shaders, sekarang kita akan belajar cara membuat shader lebih fleksibel dengan pengaturan parameter yang dapat diubah langsung melalui aplikasi PPSSPP. Dengan cara ini, kamu bisa lebih mudah menyesuaikan efek visual tanpa perlu mengedit kode shader secara manual.

Shader yang Lebih Fleksibel

Untuk membuat shader lebih fleksibel, kita akan menggunakan uniform variables dan parameter yang dapat diatur dari file .ini di PPSSPP. Mari kita lihat contoh kode shader yang sudah dimodifikasi agar lebih fleksibel:

#ifdef GL_ES

precision lowp float;

precision mediump int;

#endif

varying vec2 v_texcoord0;

uniform sampler2D sampler0;

uniform vec4 u_setting; // tambahan uniform baru

#define KECERAHAN u_setting.x

void main(){

  vec4 base = texture2D(sampler0, v_texcoord0);

  vec3 color = base.rgb;

  color *= KECERAHAN; // Mengatur kecerahan berdasarkan nilai u_setting.x

  gl_FragColor = vec4(color, 1.0);

}

Penjelasan Kode

Pada contoh kode shader di atas, ada beberapa perubahan yang membuat shader ini lebih fleksibel:

uniform vec4 u_setting;

Ini adalah uniform variable yang memungkinkan kita untuk mengirim data dari aplikasi utama (seperti PPSSPP) ke shader. Dalam contoh ini, u_setting berfungsi untuk mengatur kecerahan layar.

#define KECERAHAN u_setting.x

#define berfungsi seperti kabel yang menghubungkan variabel u_setting.x ke bagian lain dari shader. Kita menghubungkan nilai pertama dari u_setting (yaitu u_setting.x) dengan variabel KECERAHAN di shader. Jadi, perubahan nilai u_setting.x akan langsung mempengaruhi kecerahan.

Tipe Data dalam Shader

Di dalam shader, kita sering menggunakan beberapa tipe data untuk menangani informasi yang berbeda. Berikut adalah tipe data yang sering digunakan:

vec2: Memiliki dua nilai (x, y). Biasanya digunakan untuk koordinat tekstur.

vec3: Memiliki tiga nilai (x, y, z). Digunakan untuk perhitungan warna atau efek pencahayaan.

vec4: Memiliki empat nilai (x, y, z, w). Biasanya digunakan untuk warna akhir (output dari fragment shader).

Apa Itu uniform?

uniform adalah cara untuk memberi tahu shader agar bisa mengakses data dari program utama (seperti aplikasi PPSSPP). Data ini dikirim dari program utama ke shader.

Contoh:

uniform sampler2D sampler0;

Ini berarti shader dapat mengakses sampler2D yang disebut sampler0, yang merupakan layar saat ini di PPSSPP.

Apa Itu varying?

varying adalah cara untuk mengirimkan data dari vertex shader ke fragment shader. Ini seperti sebuah transmisi yang menghubungkan dua bagian shader.

Misalnya, kita bisa mengatur varying vec2 v_texcoord0 di vertex shader, kemudian mengirimnya ke fragment shader untuk digunakan dalam proses pewarnaan.

Mengatur Parameter Shaders di PPSSPP

Agar lebih fleksibel, kita bisa mengatur nilai parameter shader langsung dari aplikasi PPSSPP. Caranya adalah dengan menggunakan file .ini. Berikut adalah contoh bagaimana cara mengonfigurasi parameter kecerahan menggunakan file .ini:

Contoh File .ini

[KECERAHAN]

Name = Kecerahan

Author = Nama Saya

Fragment = Kecerahan.fsh

Vertex = Kecerahan.vsh

SettingName1 = KECERAHAN

SettingDefaultValue1 = 1.0 // Nilai default kecerahan

SettingMaxValue1 = 10.0 // Nilai maksimum kecerahan

SettingMinValue1 = 1.0 // Nilai minimum kecerahan

SettingStep1 = 0.5 // Langkah perubahan nilai kecerahan

Penjelasan File .ini

SettingName1 = Kecerahan: Nama parameter yang akan digunakan di shader.

SettingDefaultValue1 = 1.0: Nilai awal kecerahan (nilai default).

SettingMaxValue1 = 10.0: Nilai maksimum kecerahan.

SettingMinValue1 = 1.0: Nilai minimum kecerahan.

SettingStep1 = 0.5: Langkah perubahan nilai kecerahan (misalnya, setiap perubahan nilai kecerahan akan bertambah 0.5).

Dengan file .ini ini, kalian bisa mengubah kecerahan layar langsung dari aplikasi PPSSPP tanpa perlu mengedit kode shader secara manual.

Keuntungan Membuat Shader yang Fleksibel

Pengaturan Lebih Mudah: Dengan menggunakan file .ini, kalian bisa mengubah berbagai parameter shader langsung dari aplikasi PPSSPP.

Kontrol Lebih Tinggi: Kalian bisa mengubah efek grafis seperti kecerahan, kontras, atau saturasi dengan lebih mudah.

Eksperimen Lebih Cepat: Mengubah parameter seperti nilai kecerahan atau warna langsung dari aplikasi membuat proses eksperimen menjadi lebih cepat dan praktis.

Kesimpulan

Dengan memahami konsep uniform dan varying serta cara mengonfigurasi shader di PPSSPP menggunakan file .ini, kalian dapat membuat shader yang lebih fleksibel dan mudah disesuaikan. Ini memberi kalian kendali penuh atas efek grafis yang diterapkan di game yang dijalankan di PPSSPP.

Pada tutorial berikutnya, kita akan membahas lebih dalam tentang bagaimana membuat shader yang lebih kompleks dengan menambahkan efek pencahayaan dan transparansi. Terus bereksperimen dan jangan ragu untuk mencoba berbagai efek yang kalian inginkan!

MEMBUAT SHADERS UNTUK PPSSPP

Tutorial Membuat Custom Shaders untuk PPSSPP

PPSSPP, emulator PlayStation Portable untuk perangkat mobile, memungkinkan kalian untuk menggunakan custom shaders untuk mempercantik tampilan grafis game. Dalam tutorial ini, kita akan memandu kalian langkah demi langkah untuk membuat dan mengatur custom shaders yang dapat diterapkan ke layar emulator.

Pendahuluan

PPSSPP mendukung penggunaan custom shaders, yang memungkinkan kalian menambahkan efek grafis sendiri, seperti kecerahan, warna, atau bahkan efek visual yang lebih kompleks. Agar shaders dapat bekerja di PPSSPP, kalian perlu menyiapkan tiga file dan mengikuti beberapa langkah mudah.

Langkah-langkah Menyiapkan Shaders

1. Membuat Folder untuk Shaders

Langkah pertama adalah membuat folder untuk menyimpan shaders di perangkat kalian. Ikuti langkah berikut:

1. Buat folder bernama Shaders di dalam direktori PSP yang ada di memori SDCard atau memori internal perangkat kalian.

2. Menyiapkan Tiga File

PPSSPP membutuhkan tiga file untuk menjalankan shaders:

File konfigurasi (.ini)

Vertex shader (.vsh)

Fragment shader (.fsh)

File 1: Konfigurasi (File .ini)

File konfigurasi ini memberitahu PPSSPP tentang nama shader, pembuatnya, serta lokasi file vertex dan fragment shader. Berikut adalah contoh format file .ini:

[CustomShader]

Name = Shader Kecerahan

Author = Nama Pembuat

Fragmen = shaderKecerahan.fsh

Vertex = shaderVertex.vsh

Gantilah CustomShader, Shader Kecerahan, dan Nama Pembuat sesuai kebutuhan.

File 2: Vertex Shader (.vsh)

Vertex shader adalah tempat kita mengatur area yang akan digambar pada layar. Berikut adalah contoh vertex shader yang sangat sederhana:

#ifdef GL_ES

precision lowp float;

precision highp int;

#endif

attribute vec4 a_position;

attribute vec2 a_texcoord0;

varying vec2 v_texcoord0;

void main() {

  v_texcoord0 = a_texcoord0;

  gl_Position = a_position;

}

Shader ini akan mengatur agar gambar ditampilkan pada seluruh layar emulator.

File 3: Fragment Shader (.fsh)

Fragment shader bertanggung jawab untuk memberikan warna pada setiap pixel yang akan ditampilkan di layar. Berikut adalah contoh fragment shader yang mengubah kecerahan layar:

#ifdef GL_ES

precision lowp float;

precision highp int;

#endif

varying vec2 v_texcoord0;

uniform sampler2D sampler0;

void main() {

   vec4 A = texture2D(sampler0, v_texcoord0);

   vec3 color = A.rgb;

   color *= 1.5; // Atur kecerahan layar

   gl_FragColor = vec4(color, 1.0);

}

Di sini, angka 1.5 dapat diubah untuk meningkatkan atau menurunkan kecerahan layar. Misalnya, jika kalian ingin layar menjadi lebih terang, gunakan nilai lebih tinggi, atau nilai lebih rendah untuk efek lebih gelap.

Contoh Modifikasi Warna

Jika kalian ingin menambahkan efek warna tertentu, misalnya membuat layar menjadi merah, cukup ubah kode pada fragment shader:

color += vec3(1.0, 0.0, 0.0); // Menambah warna merah

Atau, jika ingin menambah intensitas warna merah:

color += vec3(1.0, 0.0, 0.0) * 1.5; // Intensitas merah lebih tinggi

Kesimpulan

Dengan mengikuti langkah-langkah di atas, kalian bisa mulai membuat shader sendiri di PPSSPP. Shader ini dapat digunakan untuk menambahkan berbagai efek visual, seperti kecerahan, saturasi warna, atau bahkan efek-efek grafis lainnya yang kalian inginkan.

ppsspp post processing shaders (DETAIL SHADERS)

cara pasang pindahkan ke folder PSP/Shaders

LINK SHADERS

PPSSPP GLSL SHADERS GENERATOR (SSAO, FRESNEL)

Shader Code Input

Masukkan kode shader ( Fragment Shader):

Pilih Shader:
SSAO FRESNEL

PPSSPP GLSL VERTEX SHADERS GENERATOR

Vertex Shader Input

Masukkan kode Vertex Shader:

PPSSPP GLSL SHADERS FRAGMENT GENERATOR

Shader Code Input

Masukkan kode shader ( Fragment Shader):

Pilih Shader:
Efek refleksi 1 Efek refleksi 2

GUNDAM MEMORIES GLSL TEXTURE CREATOR

GLSL TEXTURE CREATOR SUPPORT RECTANGLE (512x256 to 2048x1024)

512x256 1024x512 2048x1024

Download Texture