Pengenalan Shader menggunakan render monkey

kalian mungkin sudah biasa mendengar (VGA card) atau sering disebut juga sebagai GPU (Graphics Processing Unit). Dengan perkembangan kartu grafis saat ini, telah banyak bermunculan game 3D dengan tampilan grafis yang sangat bagus dan menarik seperti game assasin creed, Street Fighter IV, dan Journey. Bahkan ada beberapa game yang mempunyai tampilan yang mendekati kehidupan nyata seperti game Crysis, Battlefield dan lain2. Tapi, tahukah kalian bagaimana sebuah developer game 3D bisa membuat tampilan 3D yang menarik? Hal itu bisa dilakukan oleh developer dengan menggunakan shader agar bisa menghasilkan tampilan game 3D yang bagus dan menarik.

Sceenshot dari game Crysis 3 (kiri) dan game Journey (kanan).

Bagi kalian yang belum mengetahui apa itu shader? Shader adalah sebuah program yang melakukan perintah kepada komputer tentang bagaimana seharusnya suatu object ditampilkan pada layar. Secara garis besar, shader dapat dikelompokan menjadi 2 macam, yaitu offline shader dan real-time shader. Offline shader biasanya digunakan untuk gambar dan film, sedangkan real-time shader biasanya digunakan untuk game. Pada real-time shader proses perhitungan/komputasi biasanya dilakukan oleh GPU, sedangkan pada offline shader biasanya dilakukan pada CPU. Shader yang akan dibahas pada kesempatan ini adalah shader yang digunakan untuk game, yaitu real-time shader.

Pada beberapa software game development seperti Blender Game Engine dan Unity telah terdapat shader bawaan (built-in shader) yang memudahkan developer untuk membuat shader. Akan tetapi, biasanya shader bawaan dari software-software tersebut fleksibilitas yang membuat developer menjadi kesulitan untuk membuat tampilan 3D seperti yang mereka inginkan. Untuk mengatasi masalah tersebut, biasanya para developer akan membuat suatu custom shader, yaitu proses kustomisasi pada program shader.

Untuk membuat custom shader pada Unity, kita harus membuat/menuliskan code shadernya. Sedangkan jika pada UDK (Unreal Development Kit), selain dengan menulis code shader, kita juga bisa membuat custom shader dengan menggunakan node pada material editor. Begitu juga dengan Blender Game Engine, selain dengan menulis code shader, kita juga bisa membuat custom shader dengan menggunakan node pada node editor. Jika menggunakan node, maka kita akan lebih mudah untuk membuat shader. Akan tetapi, jika kita belajar tentang code pemrograman shader, maka kita akan lebih paham dalam menggunakan node pada BGE maupun UDK dan lebih memahami proses-proses dalam pembuatan shader.

Berikut ini adalah contoh tampilan bulit-in shader dan custom shader menggunakan Blender Game Engine pada karakter Team Fortress 2 :

Gambar kiri menggunakan lambert phong dan gambar kanan menggunakan custom ramp.

Jika kita ingin membuat code pemrograman shader, kita harus mengggunakan bahasa pemrograman shader. Bahasa pemrograman shader ini dibuat berdasarkan bahasa pemrograman C, sehingga sintaksnya mirip dengan bahasa pemrograman C. Perbedaan yang mencolok adalah pada bahasa pemrograman shader tidak terdapat pointer dan tidak dapat melakukan rekursi. Ada beberapa bahasa pemrograman shader (real-time shader) yang dapat digunakan, diantaranya yang cukup populer adalah :

OpenGL Shading Language.

Biasa dikenal dengan GLSL, merupakan bahasa pemrograman shader yang digunakan dengan OpenGL.

DirectX High-Level Shader Language

Biasanya disingkat dengan HLSL, merupakan bahasa pemrograman shader untuk DirectX 9, 10, 11, Xbox, dan Xbox 360.

Cg Programming Language

Cg singkatan dari C for graphic, merupakan bahasa pemrograman shader yang dikembangkan oleh Nvidia. Cg bisa digunakan pada OpenGL maupun DirectX.

Suatu contoh shader yang sangat sederhana adalah memberi perintah pada komputer untuk menampilkan warna merah pada setiap piksel dari suatu object. Mungkin sebagian dari kita beranggapan bahwa contoh tersebut tampak tidak berguna, akan tetapi contoh sederhana tersebut telah menunjukkan bahwa kita mempunyai kontrol dan kendali penuh terhadap warna dari setiap piksel yang menampilkan suatu object. Disinilah poin pentingnya, ketika kita sudah memiliki kontrol penuh terhadap tampilan suatu object, tentunya kita dapat mengubah dan memanipulasi tampilan object tersebut sesuai dengan apa yang kita inginkan.

Apa yang membuat shader sangat bermanfaat adalah fleksibilitasnya, kita dapat mewarnai piksel dari suatu obyek sesuai dengan apa yang kita inginkan, mulai dari warna yang solid sampai dengan warna yang transparan hasil dari refleksi. Shader juga dapat mengatur material yang akan ditampilkan pada suatu object. Sehingga jika kita menggunakan shader, maka tampilan object akan bisa menjadi lebih realistis dan lebih menarik.

Object dengan warna yg solid (kiri) dan warna yang transparan (kanan).

Pada kesempatan kali ini, saya akan mencoba dasar pemrograman shader menggunakan DirectX High-Level Shader Language (HLSL). Salah satu software yang bisa digunakan untuk HLSL adalah RenderMonkey. RenderMonkey adalah software pemrograman shader yang dibuat oleh AMD untuk memfasilitasi programmer dan artist dalam berkolaborasi menciptakan shader yang bagus.

Mengapa saya memilih menggunakan RenderMonkey? Karena dengan menggunakan RenderMonkey, kita akan lebih mudah memahami bagaimana proses shader itu terjadi. Untuk mendapatkan software RenderMonkey, kita bisa mendownloadnya secara gratis di :
http://developer.amd.com/resources/archive/archived-tools/gpu-tools-archive/rendermonkey-toolsuite/

Setelah menginstal software RenderMonkey, kita dapat segera membukanya dan ketika kita membuka RenderMonkey kita akan menemukan tampilan seperti berikut ini :

Tampilan awal RenderMonkey

Untuk memulai melakukan pemrograman shader, kita klik kanan pada Effect Workspace, kemudian pilihEffect Group => Effect Group w/ DirectX Effect, seperti gambar di bawah ini :

Menambahkan DirectX Effect pada RenderMonkey

Setelah itu, kita akan mendapatkan RenderMonkey menampilkan gambar seperti berikut :

Tampilan awal DirectX Effect pada RendeMonkey

Gambar bola merah di atas adalah output dari pemrograman shader yang dihasilkan oleh RenderMonkey. Untuk mengetahui bagaimana RenderMonkey bisa menghasilkan shader seperti di atas, kita bisa melihat program vertex shader dan pixel shader pada Pass0. Berikut ini adalah code vertex shader dan pixel shader dari pemrograman shader pada RenderMonkey di atas :

Code program Vertex Shader (kiri) dan Pixel Shader (kanan)

Pada RenderMonkey dan pemrograman shader yang lain, secara umum terdapat 2 tahapan yang digunakan.

1.    Vertex Shader

Vertex shader merupakan salah satu tahapan dalam pemrograman shader. Dinamakan vertex shader karena pada tahapan ini akan menangani proses-proses yang dilakukan terhadap setiap vertex dari suatu object. Pada tahapan ini terjadi proses perpindahan/transformasi posisi object dari ruang 3D menjadi posisi 2D-Koordinat pada layar. Dimana posisi 3D setiap vertex dari suatu object akan diubah menjadi posisi 2D-Koordinat yang muncul di layar. Pada tahapan vertex shader ini, kita juga dapat melakukan perubahan/manipulasi terhadap posisi, warna dan tekstur koordinat dari suatu object. Output dari tahapan vertex shader ini, biasanya akan digunakan sebagai input dari tahap berikutnya dalam pipeline pemrograman shader.

2.    Pixel shader

Pixel shader biasa disebut juga dengan fragmen shader. Pixel shader merupakan suatu tahapan dalam pemrograman shader yang digunakan untuk melakukan perhitungan/komputasi terhadap warna, cahaya, serta atribut lainnya dari setiap pixel yang muncul di layar. Perhitungan tersebut berdasarkan apa yang telah dihasilkan oleh vertex shader (output dari vertex shader). Pada tahap ini biasanya dilakukan proses-proses yang dapat membuat object terlihat lebih realistik dan lebih menarik, misalnya proses pencahayaan, pemberian tekstur, pengaturan bayangan, bump-maping, specular highlights, translucency, serta proses-proses yang lainnya. Sebagian besar proses-proses pada pemrograman shader yang mampu membuat tampilan object lebih menarik dan menakjubkan biasanya dilakukan dalam tahapan pixel shader ini.

Berikut ini adalah sedikit penjelasan tentang code vertex shader dan pixel shader pada contoh di atas.

1	float4x4 matViewProjection;

Merupakan variabel matriks yang digunakan untuk mentransformasi suatu nilai variabel ke dalam ruang proyeksi.

1 2 3 4

struct VS_INPUT { float4 Position : POSITION0; };

Struct VS_INPUT di atas merupakan struct yang digunakan sebagai input pada vertex shader. Struct tersebut berisi variable Position yang bertipe data float4. Selain itu, variable position di atas juga memiliki semantik berupa POSITION0 yang menunjukkan bahwa variabel tersebut digunakan untuk menyimpan posisi vertex dari suatu object.

1 2 3 4

struct VS_OUTPUT { float4 Position : POSITION0; };

Struct VS_ OUTPUT di atas merupakan struct yang berfungsi untuk menyimpan output dari vertex shader. Pada contoh di atas, struct VS_ OUTPUT mempunyai variabel yang sama dengan struct VS_INPUT.

1 2 3 4 5 6 7

VS_OUTPUT vs_main( VS_INPUT Input )  {  VS_OUTPUT Output;   Output.Position = mul( Input.Position, matViewProjection );  return ( Output ); }

Fungsi vs_main pada code vertex shader di atas, adalah fungsi utama dari tahapan vertex shader. Fungsi tersebut mengempilan nilai dari variabel Output yang bertipe VS_OUTPUT, dimana pada struct VS_OUTPUT itu hanya tersimpan 1 variable, yaitu Position. Jadi, kalau kita pelajari, fungsi vs_main di atas hanya mengembalikan nilai posisi vertex dari object. Pada tahap vertex shader, minimal harus menghasilkan output nilai position supaya bisa digunakan untuk proses selanjutnya.

1 2 3 4

float4 ps_main() : COLOR0 { return( float4( 1.0f, 0.0f, 0.0f, 1.0f ) ); }

Pada code di atas, fungsi ps_main pada tahapan pixel shader mengembalikan nilai warna RGBA float4 dengan nilai (1,0,0,1) sehingga warna yang muncul pada layar adalah warna merah.

Kita dapat mengganti warna yang muncul di layar dengan dengan mengubah nilai warna diembalikan oleh Pixel Shader. Untuk mempermudah, kita dapat juga membuat variabel warna pada Pixel shader dengan cara klik kanan pada Pass 0, lalu pilih Add Variable => Color. Lalu ubah code program pada pixel shader menjadi seperti di bawah ini :

1 2 3 4 5 6

float4 myColor;   float4 ps_main() : COLOR0  {  return( myColor );  }

Untuk mengganti warna, kita hanya perlu mengubah nilai variabel myColor sesuai dengan warna yang kita inginkan seperti contoh gambar di bawah ini :

Output RenderMonkey dengan tambahan variabel myColor

Kita juga bisa mengubah model/object yang ingin ditampilkan pada layar dengan cara klik kanan Model padaEffect1 lalu pilih Change Model dan kemudian pilih model/object bawaan yang telah tersedia pada RenderMonkey. Atau jika kita ingin menampilkan model yang lain, kita bisa pilih Model lalu pilih Edit.

Demikian percobaan pertama saya untuk melakukan pemrograman shader pada RenderMonkey.

jangan lupa komentar ataupun jejaknya ya :D