Silverlight 3 – Efeitos com Pixel Shader, parte 01

Um dos recursos mais interessantes do Silverlight 3 são os efeitos utilizando Pixel Shader, por padrão o Silverlight tem dois efeitos definidos, Blur e DropShadow mas podemos facilmente criar novos efeitos e utilizá-los nos nossos projetos.

por Márcio Fábio Althmann

Um dos recursos mais interessantes do Silverlight 3 são os efeitos utilizando Pixel Shader, por padrão o Silverlight tem dois efeitos definidos, Blur e DropShadow mas podemos facilmente criar novos efeitos e utilizá-los nos nossos projetos.

Para começar a trabalhar com a criação dos efeitos com pixel shader, o primeiro passo é instalar o SDK do DirectX da Microsoft,efeitos são programados utilizando a linguagem HLSL (High Level Shading Language).

Download do SDK do DirectX.

Podemos utilizar os efeitos tanto nas imagens, vídeos ou controles do nosso projeto, veja abaixo o código fonte de um efeito chamado Invert Color, também a imagem sem e com o efeito aplicado.

   1: sampler2D implicitInputSampler : register(S0);

   2: 

   3: float4 main(float2 uv : TEXCOORD) : COLOR

   4: {

   5:    float4 color = tex2D( implicitInputSampler, uv );

   6:    float4 invertedColor = float4(color.a - color.rgb, color.a);

   7:    return invertedColor;

   8: }

Imagem sem o efeito



Imagem com o efeito InvertColor aplicado

Crie um arquivo chamado InventColor.fx com o código acima nele, pode ser criado no Bloco de Notas mesmo. Agora para compilar o InvertColor.fx para o arquivo que realmente vamos utilizar no projeto que vamos chamar de InvertColor.ps, vamos utilizar o utilitário, fxc.exe do DirectX. O utilitário ficar no diretório C:\Arquivos de Programas\Microsoft DirectX SDK (August 2009)\Utilities\bin\x86 no Command Prompt execute a seguinte linha de comando.

fxc /T ps_2_0 /Fo arquivo.ps arquivo.fx

Caso a compilação ocorra sem problema uma mensagem de sucesso será mostrada, veja imagem abaixo.

Esse é o jeito mais trabalhoso de criar um pixel shader, criamos o arquivo .fx, compilamos para .ps com o utilitário fxc, mas existem vários aplicativos que ajudam visualmente todo esse processo, inclusive com um preview do efeito em tempo real, utilizo um muito bom chamado Shazzam, só precisamos configurar nele o diretório do DirectX e ele já vem com vários efeitos de exemplo, veja abaixo o programa funcionando.

Download do Shazzam.

Essa foi a primeira parte do artigo, na segunda parte vamos ver como utilizar o efeito no Silverlight e aplica-lo nos nossos projetos.