SpriteHand
Module Border
  Silverlight 3: Pixel Shaders and Effects
Module Border
Location: BlogsAndy's Blog    
Posted by: host 3/18/2009 10:19 AM

 

In Silverlight 3, Shader Effects (aka Pixel Shaders) allow you to modify the rendered pixels of any UI Element before they are composited to the current view. They can be used to add effects to screen elements including shadows, blur, grayscale, redeye removal – pretty much anything you can accomplish by tweaking pixels using an algorithm. Normally, pixel shaders are done using the GPU (video card), but currently in Silverlight 3, Pixel Shaders are rendered using a software-based algorithm.  This means that Pixel Shaders in Silverlight aren’t nearly as fast as they might be using the GPU.

Built-in Shader Effects in Silverlight

Silverlight 3 comes with 2 built-in shader effects: Shadow and Blur. To apply these to an element in XAML, we can use property element syntax to specify the effect like so:

<TextBlock Text="THIS TEXT HAS A BLUR EFFECT!" >

       <TextBlock.Effect>

              <BlurEffect Radius="5" />

       </TextBlock.Effect>

</TextBlock>

<TextBlock Text="THIS TEXT HAS A SHADOW EFFECT!">

       <TextBlock.Effect>

              <DropShadowEffect ShadowDepth="4"/>

       </TextBlock.Effect>

</TextBlock>

Creating New Shader Effects in Silverlight


Shaders are created using
High Level Shader Language (HLSL), which was created as part of the DirectX SDK. One great thing about shaders is that they are easy to create, and have been around for awhile because they are used in DirectX and WPF. So you can search around and find lots of cool HLSL samples!

I recommend using a tool to create your HLSL code such as Walt Ritscher’s Shazzam Tool, which allows you to edit and debug HLSL and see output in real time. This is much more convenient than the alternative of using the fxc command line tool provided in the DirectX SDK.

So, here are the steps and tools I use to create a new Pixel Shader effect:

(1)   Download and install the DirectX SDK

(2)   Install Shazzam (a WPF ClickOnce App)

(3)   Run Shazzam. You will likely need to update the Settings for Shazzam, so go ahead and click the Settings Panel to expand it, and make sure the “Location of DirectX FX Compiler” is pointing to the location that you installed the DirectX SDK to in Step (1). You will need to restart Shazzam after changing the directory.

(4)   Now you can have some fun with writing a Pixel Shader in HLSL! You can think of a Pixel Shader as a function that takes in every pixel value, and outputs a new value for that pixel. Here is a very simple Pixel Shader example that brightens an element:

sampler2D input : register(s0);

float4 main(float2 uv : TEXCOORD) : COLOR

{

    float4 Color;

    Color = tex2D( input , uv.xy)*4;

    return Color;

}

Go ahead and enter the code into the Shazzam editor and hit F5 (or select Tools/Apply Shader). You’ll immediately see the image samples get brighter when they are processed.

 

(5)   Now try a slightly more complex sample. This one processes an image to Grayscale:

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

float4 main(float2 uv : TEXCOORD) : COLOR
{
    float4 color = tex2D(implicitInput, uv);
   
float gray = color.r * 0.3 + color.g * 0.59 + color.b *0.11
;   
   
    float4 result;   
    result.r = (color.r - gray) * factor + gray;
    result.g = (color.g - gray) * factor + gray;
    result.b = (color.b - gray) * factor + gray;
    result.a = color.a;
   
   
return
result;
}

(6)   Note that Shazzam also has a bunch of Sample Shaders. Just go to the “Shader Loader” panel and select “Sample Shaders.”

(7)   Now let’s see how we can bring these shaders into a Silverlight 3 App. In Shazzam, select Tools/View Compiled Shaders (*.ps). This will open up the directory containing the shader that you just compiled. Copy the .ps file to the clipboard for the next step.

(8)   Create a new Silverlight 3 Application.Paste the .ps file into the Silverlight project and set its Build Action to Resource.

(9)   Add a new Class file to the Silverlight Project named MyShaderDemo and paste the following code
into the class (be sure to replace temp.ps with your own compiled shader file):

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Effects;

using System;

   public class MyShaderDemo : ShaderEffect

      {

        public MyShaderDemo()

        {

            Uri u = new Uri(@"/CustomPixelShader;component/temp.ps", UriKind.Relative);

            PixelShader psCustom = new PixelShader();

            psCustom.UriSource = u;

            PixelShader = psCustom;

        }

      } 

(10) You can now use your Pixel Shader. Open your MainPage.xaml and add a xmlns reference to your assembly, and then you can apply your effect to any UI Element:

<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:shader="clr-namespace:MyShader"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="MyShader.MainPage"

    Width="400" Height="300" mc:Ignorable="d">

    <Canvas x:Name="LayoutRoot" Background="White" Margin="0,0,-47,0">

        <Image Height="123" Width="164" Canvas.Left="52" Canvas.Top="38" Source="Garden.jpg" Stretch="Fill">

            <Image.Effect>

                <shader:MyShaderDemo/>

            Image.Effect>

        Image>

    Canvas>

UserControl>

 

Permalink |  Trackback

Comments (4)   Add Comment
Re: Silverlight 3: Pixel Shaders and Effects    By Anonymous on 3/19/2009 1:33 AM
Also check out http://www.sharpgis.net/post/2009/03/18/Silverlight-30-Pixel-shaders.aspx

Links to Silverlight 3.0 resources    By TrackBack on 3/19/2009 3:26 AM
Links to Silverlight 3.0 resources
# Silverlight Playground

Re: Silverlight 3: Pixel Shaders and Effects    By Anonymous on 3/23/2009 5:05 AM
If you don't want to install the DirectX SDK, you can always compile your .fx files to .ps files online

http://silverlightuk.blogspot.com/2009/03/silverlight-web-pixel-shader-compiler.html

Re: Silverlight 3: Pixel Shaders and Effects    By Anonymous on 4/12/2009 10:59 PM
Andy.

Thanks for the plug for Shazzam! Since Silverlight 3 added shaders the number of installs for shazzam has jumped. I've got a new build coming within the next week including a bug fix that fixes a memory leak.
Walt Ritscher


Title:
Comment:
Add Comment   Cancel 
Module Border Module Border
Module Border
  Subscribe
Module Border
RSS   Twitter
Module Border Module Border
Module Border
  Diversions
Module Border


PHYSAMAJIG
This Windows app was created using Physics Helper XAML, and the Farseer Physics Engine.
DOWNLOAD

MORE INFO



TALKING RAGDOLL
This Windows Phone app was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine. It gets interesting when you import your friends photos and have your way with them!

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight , the Physics Helper Library,  and the Farseer Physics Engine.
PLAY IT

MORE INFO



DESTROY ALL INVADERS
A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth. Created using Silverlight.
PLAY IT

INFO AND CODE



PHYSICS HELPER DEMOS
These demos were created for the Physics Helper Library, which makes it easy to create physics games and simulations using Expression Blend, Silverlight, and the Farseer Physics Engine.
PLAY IT

INFO AND CODE



HOOK SHOT
This little basketball game took first place in the TeamZoneSports Silverlight Contest. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse. Created using Silverlight and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight.
PLAY IT

INFO AND CODE



FISH GAME
A simple game of harpoon-the-fish. Written using the AJAX Sprite Toolkit.
PLAY IT

INFO AND CODE

Module Border Module Border
Module Border
  Search_Blog
Module Border
Module Border Module Border
Module Border
  Blog_Archive
Module Border
Module Border Module Border
Copyright (c) 2014 andy.beaulieu.com - Login
toms outlet cheap toms jordan pas cher Timberland Boots mulberry outlet portafoglio prada hollister soldes hogan scarpe mbt hogan jordan pas cher louboutin soldes jordan Homme louboutin pas cher Gucci Borse louboutin pas cher jordan pas cher lancel pas cher cheap ray ban sunglasses ray ban outlet toms outlet toms outlet scarpe mbt occhiali da sole a basso costo Louboutin Chaussures basket louboutin hollister pas cher jordan shoes sale