aris_feryanto

WPF Effect: Introduction

Tergolong sesuatu yang sudah cukup lama ada dalam WPF, tapi saya penasaran dan ingin mencoba mengutak-atik. Setelah menemukan beberapa referensi (di bawah), saya tertarik sekali untuk mencoba “GPU-accelerated custom effect”. ^^

Dengan adanya .NET framework 3.5 SP1, banyak fitur dan peningkatan telah ditambahkan. Salah satunya untuk memperkaya user exprience dalam hal interface untuk WPF. GPU (Graphics Proccessing Unit) pada perangkat komputer telah semakin berkembang. Hal inilah yang menjadi faktor pendukung sehingga pada .NET framework 3.5 SP1 ini, WPF mendukung “GPU-accelerated effect” (untuk selanjutnya disebut “Effect”). Untuk fitur ini, WPF 3.5 SP1 hanya mendukung Pixel Shader versi 2.0 dan tidak ada dukungan untuk Vertex Shader.

Contoh Effect sederhana

Contoh Effect yang sederhana dan telah built-in di dalam WPF adalah DropShadowEffect. Untuk membuat sebuah label seperti di bawah

menjadi seperti ini

cukup dilakukan dengan menambahkan property Effect dari label dalam kode XAML seperti di bawah.

Ini hanya satu contoh dari Effect yang sudah built-in. Developer bisa mengembangkan berbagai macam Effect sendiri. Beberapa developer telah membuat library berisi Effect yang umum digunakan di http://www.codeplex.com/wpffx.

Apa bedanya dengan BitmapEffect?

Ketika WPF dirilis, awalnya terdapat sebuah kelas bernama BitmapEffect yang pada dasarnya sama seperti Effect. Hanya saja terdapat isu performansi untuk BitmapEffect. BitmapEffect menggunakan thread UI untuk memproses, sehingga akan timbul masalah saat efek yang digunakan cukup kompleks. Penggunaan CPU akan meningkat. Sedangkan Effect memanfaatkan kemampuan GPU untuk “mempercantik” UI program. Semua proses menggambarkan Effect, ditangani oleh GPU, sehingga tidak memberikan kerja “extra” bagi CPU.

Komponen apa saja yang bisa diberi Effect?

Ini salah satu hal yang menarik di WPF. Effect bisa diaplikasikan pada setiap komponen UI yang merupakan turunan dari UIElement (Grid, Panel, Button, Image, dll). Effect bekerja per pixel. Ketika sebuah Effect diaplikasikan pada UIElement, WPF me-rasterize UIElement pada ukuran tertentu menjadi bitmap, dan kemudian mengaplikasikan Effect untuk setiap pixel bitmap nya.

Dengan memanfaatkan kemampuan pemrosesan GPU, aplikasi WPF bisa menggunakan Effect yang membuat:

• Modifikasi warna
• Efek gerakan
• Efek yang menghasilkan pola-pola fraktal yang dihasilkan menggunakan algoritma
• Efek yang multiple-input

Effect ditulis dalam bahasa HLSL (High Level Shading Language), dikompilasi dengan DirectX SDK (fxc.exe), kemudian dibungkus dengan kode C# (atau VB, dalam hal ini saya menggunakan C#), dan akhirnya siap digunakan dalam UI.

Pada postingan berikutnya, saya akan mencoba menjelaskan step by step untuk membuat Custom Effect. Jika ada kekurangan, mohon kritik dan sarannya..

Sumber:
Greg Schechter's Blog
Membuat Shader Effect pada WPF by Wely

Share this post: | | | |