SilverShader – Introduction to Silverlight and WPF Pixel Shaders

Sign in to queue

The Discussion

  • User profile image
    Walt Ritscher

    Great article René.  Thanks for the shout-out for Shazzam.  FWIW, the next version of Shazzam with have a tutorial section, which should help learn the HLSL syntax.  I love the Ring shader, very nice effect.

  • User profile image
    Glenn Block

    Nice Job Rene, except for the comparing MEF to METH part Smiley

  • User profile image
    Rene Schulte

    @Walt: This sounds good. The tutorial section will be very helpful for beginners. Please feel free to include the mosaic / ring shader into the Shazzam samples.

    @Glenn: I know it's a cheap joke, but I couldn't resist. Wink MEF is really great and addictive.

    Many scenarios where I'd normally use a DI / IoC container can now be implemented with the simplicity of MEF. Congrats to you and the team for getting this integrated into the FW. Full win!

  • User profile image
    Ely

    Thanks Rene,

    Curious if using these techniques will work for writing shaders for XNA as well?

  • User profile image
    NickDarnell

    Nice post.  You might want to checkout my ShaderEffect Generator integration into Visual Studio over at CodePlex wpfshadergenerator.codeplex.com

    I wrote it to solve the annoying workflow issues with shader usage in WPF/Silverlight.  Does the HLSL compilation (warnings/errors dumped to the error list), inclusion of the resulting ps binary blob file into the project, and generates the C# wrapper for the HLSL (with Shazzam comment style tagging to provide that extra bit of metadata needed when generating the C#).

  • User profile image
    Rene Schulte

    I got this question by derbjoern via email earlier today and answered it:

    I guess you want to change the PixelsCount value with a Slider.

    You can not change the Width and Height of a Size. This is a Struct. You must call the constructor. Give it a try in the code and you'll see what I mean.

    You need separate Width and Height properties in your view model so you can bind them. The PixelCountsWidth might look like this for example:

        public double PixelCountsWidth

         {

             get { return shader.PixelCounts.Width; }

             set

             {

                 shader.PixelCounts = new Size(value, this.PixelCountsHeight);

                 OnPropertyChanged(new PropertyChangedEventArgs("PixelCountsWidth"));

             }

         }

    PixelCountsHeight the other way around.

  • User profile image
    derbjoern

    PS: If this comment is to long please delete it and pls write me a mail on derbjoern(at)hotmail.com

    whow i love shaders....thx for the great intro....

    but I have one question...maybe it is to early for me or I had not enough coffee..

    ******************************************************************

    I have this shader(fx):

    /// <class>PixelateEffect</class>

    /// <description>An effect that turns the input into blocky pixels.</description>

    //-----------------------------------------------------------------------------------------

    // Shader constant register mappings (scalars - float, double, Point, Color, Point3D, etc.)

    //-----------------------------------------------------------------------------------------

    /// <summary>The number of horizontal and vertical pixel blocks.</summary>

    /// <type>Size</type>

    /// <minValue>20,20</minValue>

    /// <maxValue>100,100</maxValue>

    /// <defaultValue>60,40</defaultValue>

    float2 PixelCounts : register(C0);

    /// <summary>The amount to shift alternate rows (use 1 to get a brick wall look).</summary>

    /// <minValue>0</minValue>

    /// <maxValue>1</maxValue>

    /// <defaultValue>0</defaultValue>

    float BrickOffset : register(C1);

    //--------------------------------------------------------------------------------------

    // Sampler Inputs (Brushes, including Texture1)

    //--------------------------------------------------------------------------------------

    sampler2D Texture1Sampler : register(S0);

    //--------------------------------------------------------------------------------------

    // Pixel Shader

    //--------------------------------------------------------------------------------------

    float4 main(float2 uv : TEXCOORD) : COLOR

    {

      float2 brickSize = 1.0 / PixelCounts;

      // Offset every other row of bricks

      float2 offsetuv = uv;

      bool oddRow = floor(offsetuv.y / brickSize.y) % 2.0 >= 1.0;

      if (oddRow)

      {

          offsetuv.x += BrickOffset * brickSize.x / 2.0;

      }

      float2 brickNum = floor(offsetuv / brickSize);

      float2 centerOfBrick = brickNum * brickSize + brickSize / 2;

      float4 color = tex2D(Texture1Sampler, centerOfBrick);

      return color;

    }

    ****************************************************************

    Through Shazzam i Got C# Effects:

      public class PixelateEffect : ShaderEffect {

         public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(PixelateEffect), 0);

         public static readonly DependencyProperty PixelCountsProperty = DependencyProperty.Register("PixelCounts", typeof(Size), typeof(PixelateEffect), new PropertyMetadata(new Size(60D, 40D), PixelShaderConstantCallback(0)));

         public static readonly DependencyProperty BrickOffsetProperty = DependencyProperty.Register("BrickOffset", typeof(double), typeof(PixelateEffect), new PropertyMetadata(((double)(0D)), PixelShaderConstantCallback(1)));

         public PixelateEffect() {

            PixelShader pixelShader = new PixelShader();

            pixelShader.UriSource = new Uri("/FaReFool;component/Shaders/Pixelate.ps", UriKind.Relative);

            this.PixelShader = pixelShader;

            this.UpdateShaderValue(InputProperty);

            this.UpdateShaderValue(PixelCountsProperty);

            this.UpdateShaderValue(BrickOffsetProperty);

         }

         public Brush Input {

            get {

               return ((Brush)(this.GetValue(InputProperty)));

            }

            set {

               this.SetValue(InputProperty, value);

            }

         }

         /// <summary>The number of horizontal and vertical pixel blocks.</summary>

         public Size PixelCounts {

            get {

               return ((Size)(this.GetValue(PixelCountsProperty)));

            }

            set {

               this.SetValue(PixelCountsProperty, value);

            }

         }

         /// <summary>The amount to shift alternate rows (use 1 to get a brick wall look).</summary>

         public double BrickOffset {

            get {

               return ((double)(this.GetValue(BrickOffsetProperty)));

            }

            set {

               this.SetValue(BrickOffsetProperty, value);

            }

         }

      }

    }

    *******************************************************************

    In my ViewModel I want to access through a binding on 2 slider in my View the PixelCounts.Height/Width. Like in BrickCount...this is working so far....

    namespace FaReFool.ViewModels

    {

      /// <summary>

      /// The view model for the mosaic shader.

      /// </summary>

      [Export]

      public class PixelateViewModel : AbstractViewModel, INotifyPropertyChanged

      {

         readonly PixelateEffect shader;

         public override string Name

         {

            get { return "Pixelate"; }

         }

         public override ShaderEffect Shader

         {

            get { return shader; }

         }

         [Import(typeof(PixelatePage))]

         public override UserControl View { get; set; }

         public double BrickOffset

         {

             get { return shader.BrickOffset; }

             set

             {

                 shader.BrickOffset = value;

                 OnPropertyChanged(new PropertyChangedEventArgs("BrickOffset"));

             }

         }

         public PixelateViewModel()

         {

            // Model

             shader = new PixelateEffect();

            // View is wired up with MEF

         }

      }

    }

    ******************************************************************

    Any Idea? any help? Please...

    Thx 4 all

    derbjoern

    PS: If this comment is to long please delete it and pls write me a mail on derbjoern(at)hotmail.com

  • User profile image
    Roy

    Great article, many thanks for sharing

  • User profile image
    MediLen

    It's very Nice Post, and it sees, have a greate potetial 4 development in Image processing field, dear Rene, do u have any advise 4 Iris Detection, i'm intersted 2 add Iris detection Capability, and even more improve it & using in mechanical engineering field. especialy in combined cycle thermodymic design, do u have any suggesstion?

    finally i should say again it's marvolous code.

    hope 2 hear ur advice.

    MediLen.

  • User profile image
    Rent A Car Otopeni

    Hi, I read on this site https://channel9.msdn.com/Blogs/gclassy/DirectCompute-Lecture-Series-230-GPU-Accelerated-Physics and  this thorough presentation DirectCompute GPU Accelerated Physics  captured my attention DirectCompute that can be employed to create solutions 
    for simulation of physical systems such as fluid systems and software systems. At first it shows the main features, algorithms, methods and techniques used in DirectCompute for physics, the most important mention: DirectCompute in the Bullet physics SDK,We assume some basic knowledge of DirectX and DirectCompute, Bullet involving: An open source physics SDK, AMD collaborating on GPU acceleration, Spring and masses involving Three main types of springs: Structural, Shearing and Bending. Then continue with Parallelism, Adding wind, CPU approach to simulation 
    involving The CPU approach code, GPU Parallelism, and Batching the simulation where they describe Driving batches code. Towards the end of the presentation is brought to the fore Simple cloth: CPU and GPU, describing the characteristics, among which Vertex solver: a single batch, Improving the constraint solver: A branch divergence warning, DirectCompute – part of DirectX, Efficiently outputting vertex data: Creating a vertex buffer layout, Create a vertex buffer, Construct a UAV of other buffer.
    Finally, I want to ask if the programming code examples from the presentation, among which we mention the most important: The CPU approach code, Driving batches code, Creating a constant buffer code, HLSL – side buffers, HLSL kernel loops, they are presented in pseudocode or may be used in programming languages VC++ or Java.
    Rent A Car Otopeni

Add Your 2 Cents