Click here to Skip to main content
14,841,837 members
Articles / Desktop Programming / WPF
Posted 27 May 2012

Tagged as


11 bookmarked

WPF Tilt Shader Effect

Rate me:
Please Sign up or sign in to vote.
4.86/5 (4 votes)
27 May 2012CPOL2 min read
Non affine transform for WPF without 3D.


The non affine transform is available now in WPF with the tilt shader effect. If you are interested in writing pixel shader effects in WPF or DirectX, you will be very interested in this article.


First I imagined that the effect was easy and small operations can be made but technically while working with the shader kernel, I found some limits of pixel shade 2 when running on WPF 3.5 sp1 and that was a very bad thing.

After a few months I started again to search for a solution and I found the trick.

The Effect

The Effect is based on transforming a rectangle (the Visual layout rectangle) by its 4 corners. Because of PixelShader2 limits, the Effect is divided into two parts:

Part 1: Running on CPU (normal VB.NET code). This part involves converting input points and transforming it to be usable by the shader effect.

The TiltEffect class has nine dependency properties

  • 1 for the InputProperty
  • 4 for the Pixel Shader Handlers of the transformed points
  • 4 for the public layout of the points used by the user

Part 2 is running on GPU (shader effect). This part involves calculating the transformation of the tilt effect. The trick of this effect is to calculate the result point in two steps. First calculate the "Y" value of the point and then calculate the "X" value of the result point. The transformation of the points on the CPU first will decrease heavy load from the GPU and thus the Effect will work.


The four points pt1, pt2, pt3, pt4 can be changed by the user and the TiltEffect class has to compute the p1, p2, p3, p4 points. The x and y values of the p1, p2, p3, p4 points have no relation because they are computed this way (p1 as example):

slope of (a - pt1) = slope of (pt1 - pt2) 
(a.y- pt1.y) / (a.x-pt1.x) = ( (pt1.y -pt2.y)/(pt1.x- pt2.x) ) 
(a.y- pt1.y) = ( (pt1.y -pt2.y)/(pt1.x- pt2.x) )/(a.x-pt1.x) 

a.y =[ ( (pt1.y -pt2.y)/(pt1.x- pt2.x) )/(a.x-pt1.x) ] +pt1.y 
the value of a.x = 0 
a.y =[ ( (pt1.y -pt2.y)/(pt1.x- pt2.x) )/(0-pt1.x) ] +pt1.y 
p1.y = a.y

slope of (b - pt1 ) = slope of ( pt1 - pt3 ) 
(b.y - pt1.y )/(b.x - pt1.x ) = (pt1.y - pt3.y)/(pt1.x - pt3.x )
(b.x - pt1.x ) /(b.y - pt1.y ) = (pt1.x - pt3.x ) / (pt1.y - pt3.y)
(b.x - pt1.x ) =( (pt1.x - pt3.x ) / (pt1.y - pt3.y) ) /(b.y - pt1.y ) 
b.x =[( (pt1.x - pt3.x ) / (pt1.y - pt3.y) ) /(b.y - pt1.y ) ] + pt1.x
the value of b.y = 0 
b.x =[( (pt1.x - pt3.x ) / (pt1.y - pt3.y) ) /(0 - pt1.y ) ] + pt1.x 
p1.x = b.x

And then calculate p2, p3, p4 points the same way.

On the GPU

The 4 registers pt1, pt2, pt3, pt4 resemble the p1, p2, p3, p4 properties in the TiltEffect class.

w1 = pt1.y + (pt2.y-pt1.y) * uv.x;
w2 = pt3.y+ (pt4.y- pt3.y) * uv.x;
maxy = w2 - w1;
cury = (uv.y - w1)/maxy;

This algorithm retrieves the Y value of the result point to be rendered in uv position and also curx is calculated by this algorithm separately.

Finally, trimming the results and returning the result color from the input texture.

But why this hard way?

The pixel shader limited arithmetic operations count.

Using the code

WPF 3.5 sp1 provides a very nice property named "Effect" for visual objects. This property can be used for making special effects on pixels of a specified visual.

Points of Interest

While playing with GPU you can make awesome Effects. Use your mind and release your imagination to get the most of your mind and to learn faster.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

sameh obada
Software Developer (Senior)
Egypt Egypt
DotNet developer

Graphics researches and GPU Acceleration Developer.

Full stack web developer.

Bachelor's degree of Medicine and Surgery.

Comments and Discussions

Questiontilt.fx fixed Pin
chrislai00004-May-16 22:17
Memberchrislai00004-May-16 22:17 
AnswerRe: tilt.fx fixed Pin
Greg Mulvihill30-Nov-17 5:48
MemberGreg Mulvihill30-Nov-17 5:48 
GeneralRe: tilt.fx fixed Pin
sameh obada14-Dec-17 11:36
Membersameh obada14-Dec-17 11:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.