JPontes: Silverlight como criar e usar efeitos Pixel Shaders

Os efeitos Pixel Shaders são hoje muito utilizados principalmente na industria dos vídeos jogos estes possibilitarem transformações visuais complexas ,no Silverlight estes efeitos começaram a ser suportados com o lançamento do Silverlight 3 .
Mas o que é o Pixel Shader?
O pixel shader é um conjunto de intrusões normalmente executadas na GPU(graphic processing unity) componente das placas gráficas e que permite realizar complexos efeitos nos pixels(pequena unidade da imagem) no Silverlight esta tecnologia é suportada por via de algoritmo de software .
Esta tecnologia permite então trabalhar os diversos atributos dos pixéis melhorando as imagens e criando os mais diversos efeitos e porque são executados na GPU da placa gráfica é libertado o processador para outras tarefas , infelizmente no Silverlight este efeitos são realizados por um algoritmo logo não são tão rápidos que executados na GPU.
Passando esta parte mais introdutória vamos ao realmente interessa que é utilizar este efeitos no Silverlight estes efeitos são criados usando High Level Shader Language (HLSL) que faz parte do SDK do DirectX mas escolhi começar por mostrar como utilizar este efeitos já criados porque certamente é a que vai utilizar mais vezes.
O Silverlight 3 traz implementados 2 efeitos o blur e o shadow se quiser ver um exemplo do shadow pode visitar o exemplo aqui que eu já anteriormente tinha criado.Visto que o Silverlight não fornece uma grande quantidade de efeitos e vamos aproveitar o projecto wpffx que fornece uma biblioteca com uma grande quantidade de efeitos, se quiserem visualizar os efeitos que este projecto fornece que podem verificar o seguinte vídeo:

Aplicar este efeitos é muito fácil , basta adicionarmos a referencia para a biblioteca dos efeitos escolhermos o controlo a aplicar os efeitos no meu caso vou escolher um imagem e criar um efeitos e aplicar na imagem ,agora configure os parâmetros do efeito aos seu jeito , no meu exemplo aplicarei o efeito de Pixlate a uma imagem e criar 2 slidebars para mudar a quantidade de pixéis na horizontal e na vertical.

PixelateEffect effect =new PixelateEffect();
effect.VerticalPixelCounts = 50;
effect.HorizontalPixelCounts =50;
MyImage.Effect =effect;

Código fonte da aplicação para download aqui.

Agora vamos a parte mais dolorosa que é criar de raiz os nossos efeitos .

Para fazermos isto teremos de fazer o download do DirectX SDK pois vamos necessitar do compilador de efeitos (fxc.exe) . Instalado já podemos criar o nossos efeitos usando o Microsoft High-Level Shading Language (HLSL) a linguagem utilizada para manipular imagens.

Relativamente a criação do efeito vou deixar ao vosso gosto o efeito que escolhi para este tutorial foi o Nightvision.fx (adaptação de código http://developer.valvesoftware.com/wiki/Vision_Nocturna) ,para criarmos o nosso ficheiro .ps existem varias possibilidade a primeira é gerar o ficheiro na linha de comando executando o fxc /T ps_2_0 /Fo Nightvision.ps Nightvision.fx a que aconselho é utilizar a aplicação http://shazzam-tool.com/publish.htm que permite compilar e visualizar vários exemplo da aplicação do efeito alem disso ainda gera código c# para utilizarmos no seguimento.

public class Nightvision : ShaderEffect 
    { 
        public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(Nightvision), 0); 
        public static readonly DependencyProperty BrightnessProperty = DependencyProperty.Register("Brightness", typeof(double), typeof(Nightvision), new PropertyMetadata(((double)(0)), PixelShaderConstantCallback(0))); 
        public Nightvision() 
        { 
            PixelShader pixelShader = new PixelShader(); 
            pixelShader.UriSource = new Uri(@"/SL3CustomPSeffect;component/Nightvision.ps", UriKind.Relative); 
            this.PixelShader = pixelShader; 

            this.UpdateShaderValue(InputProperty); 
            this.UpdateShaderValue(BrightnessProperty); 
        } 
        public Brush Input 
        { 
              get { return (Brush)GetValue(InputProperty); } 
              set { SetValue(InputProperty, value); }        
        } 
        public double Brightness 
        { 
              get { return (double)GetValue(BrightnessProperty); } 
              set { SetValue(BrightnessProperty, value); } 
        } 
    }

O resto já sabe é só utilizar.

Código fonte da aplicação para download aqui.

Se mesmo depois deste tutorial ainda tiver duvidas não deixe de assistir o vídeo tutorial oficial do Silverlight acerca do Pixel Shader aqui.

Referencias e recursos a consultar (EN):

JPontes

19/12/2009

Silverlight como criar e usar efeitos Pixel Shaders

Sem comentários:

Top Tabs