aris_feryanto

WPF Effect: Adding Parameter to Custom Effect

Pada postingan sebelumnya, kita telah mengetahui bagaimana membuat sebuah GrayscaleEffect yang “menghilangkan” warna dari elemen UI. Dalam Effect ini kita tidak menggunakan parameter apapun (hanya <fx:GrayscaleEffect /> saja). Kali ini saya akan mencoba menjelaskan sedikit, bagaimana menambahkan parameter untuk GrayscaleEffect. Kita akan menambahkan parameter GrayStrength yang mengatur seberapa banyak warna yang akan diubah menjadi grayscale. Dan dengan sedikit mengutak-atik, kita bahkan bisa membuat animasi UI yang perlahan-lahan berubah dari berwarna menjadi grayscale, sama seperti Windows XP ketika akan di-shutdown.

KODE SHADER

Dari program yang telah dibuat pada postingan sebelumnya, pertama-tama kita ubah kode Grayscale.fx menjadi seperti di bawah:

sampler2D implicitInput : register(s0);
float grayStrength : register(c0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
    float4 color = tex2D(implicitInput, uv.xy);
    float4 newcolor;
    newcolor = (color.r + color.g + color.b) * 0.33333333 * grayStrength;
    newcolor.rgb += color.rgb * (1 - grayStrength);
    newcolor.a = color.a;
    return newcolor;
}

kode shader di atas:

• menambahkan parameter grayStrength pada register “c0”
• mengalikan grayStrength sebagai intensitas warna grayscale, dan
• menambahkan komponen RGB dengan intensitas (1 – grayStrength)

nilai grayStrength adalah bilangan desimal dari 0.0 sampai 1.0.

Kemudian kompilasi lagi kode .fx ini dengan DirectX (fxc.exe) menjadi file .ps dengan cara yang sama seperti pada tutorial sebelumnya.

NB: untuk lebih detail mengenai kode HLSL bisa dilihat di MSDN

PEMBUNGKUS EFFECT DALAM C#

Untuk pembungkus dalam C#, kita cukup menambahkan property GrayStrength, property GrayStrengthProperty, dan kode UpdateShaderValue untuk GrayStrengthProperty dalam konstruktor GrayscaleEffect.

Pada kode di atas, assignment untuk GrayStrengthProperty cukup panjang. Dan terdapat kode seperti

Ini digunakan untuk menyinkronkan penambahan parameter grayStrength pada kode shader Grayscale.fx yang ditempatkan pada (register “c0” == PixelShaderConstantCallback(0) ). Apabila terdapat lebih dari 1 parameter yang ditambahkan, maka bisa digunakan register c1, c2, dst…. Tentu saja dengan penambahan juga pada pembungkus C#.

Setelah selesai menambahkan kode di atas, rebuild project Class Library GrayscaleEffect.

KODE WPF APPLICATION

Sekarang, apabila kita meng-apply GrayscaleEffect pada sebuah image dengan sintaks sebagai berikut:

maka image akan terlihat berwarna, bukan grayscale. Hal ini terjadi karena kita belum mengeset parameter GrayStrength pada kode XAML. Apabila ditambahkan parameter GrayStrength pada XAML seperti di bawah,

maka akan terlihat image berubah menjadi sedikit grayscale, namun masih sedikit berwarna.

ANIMASI EFFECT

Sekarang, bagian serunya. Kita akan membuat animasi image yang perlahan-lahan menjadi grayscale.

Pertama-tama, ubah Effect pada kode XAML

Lalu, tambahkan kode event handler untuk komponen Window pada UI untuk Event Window_Loaded seperti di bawah.

Jalankan program dengan menekan F5, dan lihat image yang perlahan-lahan berubah menjadi grayscale dalam 3 detik ( TimeSpan(0,0,3) ). :D

Share this post: | | | |

WPF Effect: Creating A Custom Effect

Beberapa tutorial berbahasa Inggris tentang WPF Effect yang saya lihat, tidak menampilkan bagaimana langkah-langkah yang cukup jelas untuk membuat Custom Effect. Akhirnya saya mencoba-coba mengutak-atik sana sini di Visual C# 2008 Express Edition saya dan berhasil membuat sebuah Effect yang sederhana. Di sini saya akan mencoba berbagi bagaimana caranya…

Bersiap…

Pertama-tama harus diinstall beberapa tool yang dibutuhkan untuk membuat Custom Effect, yaitu:

• Microsoft Visual C# 2008 (Express Edition)
• Microsoft DirectX SDK

Selain itu, dibutuhkan pengetahuan membuat pixel shader dalam bahasa HLSL yang akan coba saya bahas sedikit nantinya (jika ada waktu :p).

Mulai…!

Custom Effect yang akan kita buat kali ini adalah Grayscale Effect.

  ==>

MEMBUAT SHADER

1. Buka notepad (atau editor kesayangan Anda yang lain)
2. Ketikkan kode program shader berikut:
   
   sampler2D implicitInput : register(s0);

   float4 main(float2 uv : TEXCOORD) : COLOR
   {
       float4 color = tex2D(implicitInput, uv.xy);
       float4 newcolor;
       newcolor = (color.r + color.g + color.b) * 0.33333333;
       newcolor.a = color.a;
       return newcolor;
   }
   
   NB: kode program shader di atas bekerja untuk setiap pixel. newcolor di-set menjadi campuran warna rgb yang intensitasnya dibagi rata 1/3.
   

3. Simpan dengan nama file Grayscale.fx (ingat: gunakan encoding ANSI, jangan unicode, compiler shader dari DirectX hanya bisa mengkompilasi kode dengan encoding ANSI)
4. Buka DirextX SDK Command Prompt, pindahkan CWD (Current Working Directory) ke tempat penyimpanan file .fx sebelumnya.
5. Ketikkan
   
   fxc /T ps_2_0 /E main /Fo Grayscale.ps Grayscale.fx
   
   untuk mengkompilasi file .fx yang telah dibuat dan meng-output kan hasilnya ke Grayscale.ps.

MEMBUAT PEMBUNGKUS EFFECT DI C#

1. Buat project baru di Visual C# 2008, File –> New Project, pilih template Class Library. Beri nama GrayscaleEffect.
2. Rename dokumen Class1.cs menjadi GrayscaleEffect.cs.
3. Tambahkan file .ps yang telah dikompilasi ke dalam project
   
4. Set Property “Build Action” pada file .ps yang telah ditambahkan menjadi Resource
   
5. Tambahkan References “WindowsBase”, “PresentationCore”, dan “PresentationFramework”
   
6. Ketikkan kode berikut dalam file Grayscale.cs
   
   1. using System;
   2. using System.Windows;
   3. using System.Windows.Media;
   4. using System.Windows.Media.Effects;
   6. namespace GrayscaleEffect
   7. {
   8.     public class GrayscaleEffect : ShaderEffect
   9.     {
   10.         public GrayscaleEffect()
   11.         {
   12.             PixelShader =
   13.                 new PixelShader()
   14.                 {
   15.                     UriSource = new Uri("pack://application:,,,/GrayscaleEffect;component/Grayscale.ps")
   16.                 };
   17.             UpdateShaderValue(InputProperty);
   18.         }
   20.         public Brush Input
   21.         {
   22.             get { return (Brush)GetValue(InputProperty); }
   23.             set { SetValue(InputProperty, value); }
   24.         }
   26.         public static DependencyProperty InputProperty =
   27.             ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(GrayscaleEffect), 0);
   28.     }
   29. }
   
   Sedikit penjelasan: Kode di atas membuat kelas GrayscaleEffect yang merupakan turunan dari kelas ShaderEffect. Dalam konstruktornya, property PixelShader di-set dengan shader dari file .ps hasil kompilasi fxc sebelumnya. Property Input dan InputProperty (DependencyProperty-nya) dari kelas ini merupakan “penghubung” dengan implicitInput dalam kode program shader sebelumnya.
   
   
7. Build project dengan menekan F6

MEMBUAT APLIKASI WPF YANG MENGGUNAKAN EFFECT YANG TELAH DIBUAT

1. Tambahkan project baru ke dalam solution, Klik kanan solution –> Add –> New Project.
   
   Karena project library GrayscaleEffect tadi belum disimpan, maka VS akan menanyakan tempat penyimpanan. Pilih directory yang diinginkan, simpan, dan lanjutkan membuat project baru.
2. Pilih template WPF Application, beri nama GrayscaleTest.
3. Tambahkan Reference GrayscaleEffect pada project, Klik kanan pada References GrayscaleTest –> Add Reference –> Tab Projects –> GrayscaleEffect –> OK
4. Tambahkan namespace dalam kode XAML untuk library GrayscaleEffect yang telah dibuat.
   1. xmlns:fx="clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect"
5. Tambahkan sebuah image dari file gambar ke dalam Grid yang telah ada secara default. Kemudian tambahkan property Grid.Effect sebagai berikut:
   1. <Grid.Effect>
   2.     <fx:GrayscaleEffect />
   3. </Grid.Effect>
6. Kode XAML keseluruhannya akan mirip seperti berikut:
   1. <Window x:Class="GrayscaleTest.Window1"
   2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4.    xmlns:fx="clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect"
   5.    Title="Window1" Height="300" Width="300">
   6.     <Grid>
   7.         <Grid.Effect>
   8.             <fx:GrayscaleEffect />
   9.         </Grid.Effect>
   10.         <Image Margin="12,12,66,100" Name="image1" Stretch="Fill" Source="nature.jpg" />
   11.     </Grid>
   12. </Window>
7. Set GrayscaleTest sebagai StartupProject
   
8. Jalankan dengan menekan tombol F5. Lihat Image berubah warna menjadi grayscale.

Demikian tutorial membuat GrayscaleEffect. Pada postingan selanjutnya, saya akan membahas bagaimana menganimasikan GrayscaleEffect ini menjadi seperti background Windows XP yang menjadi grayscale saat akan di shutdown.

Share this post: | | | |

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: | | | |

Windows Live Writer – GREAT Tool for Blogging..!!

Tadi pagi, isenk2 melihat-lihat postingan blog di geeks, saya tidak sengaja melihat postingan mengenai server geeks yang pernah down karena disk failure (para sesepuh yang uda lama pasti tau n salut buat tim Gulver atas dedikasinya ^^). Pas baca,

“Semoga para blogger baik di geeks maupun wss-id memanfaatkan fasilitas Windows Live Writer, sehingga masih memilki backup di hardisk masing-masing dan mohon untuk melakukan reposting.”

saya langsung penasaran dengan Windows Live Writer.. Apa itu??

Trus, lanjut baca2 lagi komen2 dari geeks yang lain, baca komen dari Jimmy Chandra,

“Untung ngeblog pake Windows Live Writer, gua bisa recover semua post yang hilang, hehehe.  Tinggal direpublish aja :)”

Wah, makin penasaran buat nyobain Windows Live Writer.

Langsung download Windows Live Writer di http://download.live.com/writer. Setup pertama kali juga gampang, tinggal masukin URL blog ini, username, n password. Setting yang telah ada di blog juga diunduh ke dalam Writer (termasuk setting tampilan, themes), sehingga kita bisa melakukan editing dengan lingkungan yang sama seperti di blog (font, themes, lebar page, dll). Untuk melihat hasil editan, tersedia fasilitas preview. Kita juga bisa mengedit kode html dari post kita.

Untuk publishing, cukup klik tombol Publish, dan kita bisa langsung melihat post yang baru saja kita lakukan. Jika ingin membuka postingan yang sudah ada juga bisa. Tinggal klik tombol Open, dan pilih blog yang ingin diedit postingannya.

Keren deh Windows Live Writer…! ^^

NB: Postingan ini dibuat n dipublish pake Writer. :)

Share this post: | | | |