I am totally blown away by the possibilities of Pixel Shaders and already finding a great variety of uses for it. To get started on Pixel Shaders I would recommend stopping by Greg Schecter’s blog and reading his series of articles on this subject. It was definitely a starting point for me.
As an experiment, I decided to do the Genie Effect as a Pixel Shader. The original implementation involved the use of a 3D mesh to get the distortion effect. There was also quite a bit of setup code involved to initialize a Viewport3D, put a GeometryModel3D in it and also initialize the MeshGeometry3D. With Pixel Shaders it becomes a lot easier and boils down to just applying an Effect !
<Image Source="img.jpg" Grid.Row="1" Stretch="Fill"> <Image.Effect> <WpfApplication1:WarpEffect
L1="{Binding Value, ElementName=_lp1}" L2="{Binding Value, ElementName=_lp2}" L3="{Binding Value, ElementName=_lp3}" L4="{Binding Value, ElementName=_lp4}" R1="{Binding Value, ElementName=_rp1}" R2="{Binding Value, ElementName=_rp2}" R3="{Binding Value, ElementName=_rp3}" R4="{Binding Value, ElementName=_rp4}" /> </Image.Effect> </Image>
The parameters L1, L2, L3, L4, R1, R2, R3 and R4 control the two sides of the Warp mesh. In short they represent the control points of a Bezier curve for the left and right side. Each of these parameters is of type double and is bound to a HLSL constant register (c0 – c7).
By tweaking these parameters I can get some nifty looking Genie curves:
Here is a short video of the demo app in action:
I worked on a few effects when the beta was first released. At http://labs.adobe.com/wiki/index.php/Pixel_Bender_Toolkit:Gallery there are some effects that can be converted to WPF easily. I think its a shame that they’re not more integrated with the imaging pipeline (WIC). I haven’t used either CoreImage or Pixel Bender but they seem to have some nice advantages. Maybe the multi-input effects that have been mentioned will enable some more scenarios.
I would really appreciate source code for the demo app. Do you intend to make it available?
Thanks,
Pierre
Kris: I have played with Pixel Bender before and the syntax is very similar to HLSL. I love the fact that you can test the shaders on the fly using Pixel Bender. We still need a great development support for shaders in Visual Studio: compile, debug, build, etc.
PierreMF: I will put out the source in a day or two. Stay tuned
Thanks for stopping by!
Hi Pavan, great work as usual. It´s kinda sad that there aren´t that much pixelshader-samples out there. This is probably the best tutorial/samples I´ve found so far: http://blogs.microsoft.co.il/blogs/tamir/archive/2008/06/17/hlsl-pixel-shader-effects-tutorial.aspx
It´s quite a different way of thinking, at least i´m having some trouble grasping it. But it´s like one of the MS guys said in a interview. the amount of developers using shaders will be many, the amount of developers writing them will probably be quite few.
At the moment i´m looking for a drop/water-effect to use with a touch-screen app i´m working on, I heard jeremiah morril is working on it but haven´t seen anything from him..
Aaaanyways. nice to see more samples on pixelshaders, hope it will end up in fluidkit eventually!
regards, Simon
Hi Simon,
I will try to put out more samples and tutorials eventually. Tamir definitely did a good job on his blog post highlighting the different kinds of stuff you can do with shaders.
My upcoming book has a chapter dedicated to HLSL and pixel shaders !
The WarpEffect will make its way into FluidKit soon..
There are two good ShaderX2 books that are now free for all, edited by Wolfgang Engel.
http://www.realtimerendering.com/blog/shaderx2-books-available-for-free-download/
Enjoy!
Thanks for the link Adam. It’s certainly a valuable resource !
Hi
Did you ever post the sample code?
Yup…its part of the FluidKit project at http://www.codeplex.com/fluidkit
Nice one!
I created this effect for Silverlight 3 beta 1/WPF, using the same approach with Bezier curves. But I’m using a “transition”-kind shader, i.e. I’m passing current transition time to the shader, and it calculates current values of control points as a function of time.
You can check live demo here (green rectangle – the lamp, is draggable): http://anvaka.googlepages.com/SLGenieDemo.htm
Source code for the library is here: http://anvaka.googlepages.com/GenieDemo.zip
Looks great anvaka! Thanks for sharing.
HI Pavan,
Have you tried implementing image zoom in pixel shaders ?
Hi Ashish,
Zooming via Pixel Shaders is certainly an option but not the best one. Since shader is the last stage before the pixels are pushed to the screen, you will not get antialiasing to happen. This becomes important when you are dealing with vector content. In fact jaggedness is a common artifact of shaders, unless you specifically do some antialiasing in the shader.
That said, zooms can be easily achieved via ScaleTransforms in WPF.
Hy pavan!
Thankyou for this great work… im trying to get a cylindrical distortion with pixel shaders… the effect im trying to get is that i have the image rolled over a bottle. Like this distortion
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
|| | | | | | | | ||
Did you think its possible to build with your warp plugin??
Thanks in advance
Best Regards from Brazil and happy new year