Geeks With Blogs

Welcome to my blog.
Here's what we've got on the menu today:

Lorin Thwaits A geek says what?

A friend of mine, Scott Cate, recently gave me a challenge to create an ASP.NET server control that renders images similar to Microsoft Max.  That is with a little tilt and some reflection below as if it were sitting on a glass table.  This is the first of three posts in which I'll detail how to make that happen.

Overall the real challenge comes in getting GDI+ to do anything resembling 3D.  It will do great 2D things all day long.  Part of the namespace is appropriately called “Drawing2D”!  But that doesn't help us to perfectly present an image as if it's tilting, which is really a 3D thing.

One of the underlying reasons there's no great 3D support in GDI+ is that of the various transforms available, the most powerful one with its Matrix class implements only a 3x3 matrix.  This is great for scaling, stretching, shearing, and shifting, but not at all good for tilting.  There's no perspective, which comes from using 4x4 matrices and a projection transform.  Environments like OpenGL, DirectX, and Windows Presentation Foundation (WPF, or code-name Avalon) all make use of 4x4 matrices to do that magic.  Here's a good introductory overview for those who haven't heard of things like vanishing points and viewing frustum.  Another place to learn about it is in the DirectX documentation.

So what is possible with the 3x3 matrices in GDI+?  For starters, let's talk about the simplest transform: the Identity transform.  It actually doesn't adjust the rendering in any way:

1 0 0
0 1 0
0 0 1

Doesn't seem so useful until you pick it apart and learn what each piece is capable of.  To avoid going into any mathematics whatsoever, you're going to have to trust me on something: The right column will ALWAYS be the same: 0,0,1.  So as we talk below about what each of the remaining six parts does, I'll just leave that column grayed out.  The rest will tweak the Draw...() methods of GDI+ in these ways:

Stretch wider / narrower (X axis) Shear in the Y axis 0
Shear in the X axis Stretch taller / shorter (Y axis) 0
Shift left / right (X axis) Shift up / down (Y axis) 1

When you compare this table to the Identity transform above, there's 1s in the place for stretching, meaning it's stretched 100% in both the X and Y axis.  And there's 0s in the place for shearing and shifting, so it basically doesn't tweak the image in those ways.  Hence the identity transform does not modify things in any way, shape, or form.  Great.  Now let's see what happens when we change those values a little.

To better visualize how it all works, I put together a quick WinForms app that you can experiment with.  It will open images either from the web or your file system, and has six sliders to tweak each of the six matrix parameters available to us.  The sliders are laid out in the same 3x3 placement as the matrix itself for a better understanding of how it relates:

At the left is the orginal image, in the middle the modified one appears, updated in real-time as you play with sliders.  When you like the transform's result, then on the File menu there's an option to copy the appropriate C# code that performs that transform to the clipboard.

When you put the code that's generated in your application, it goes before the various Draw...() methods you want to impact.  You first put the transform in place, and then all other calls like DrawArc() will tweak their coordinates based on that transform.  The transform does nothing to what's in the bitmap at the time.  It's all about what happens later.

You can download the app with full source code here.

We'll use this app in my next post on Max for the Web (probably later this week) to figure out the best tilt for the image, and also prepare an inverted reflection.  We'll also apply a gradient to that reflection, ending up with (hopefully) the perfect image.  Then in the third installment, coming next week, we'll be wiring up the GDI+ code to an ASP.NET handler to render the image as a JPEG.

That's all until next time.  For now I need to hit the books and prepare for the 71-411 exam that I'm taking later this afternoon!

Posted on Wednesday, November 23, 2005 7:01 AM ASP.NET , GDI+ / Images , WinForms | Back to top

Comments on this post: Max for the Web - Part 1: Matrix Transforms in GDI+

# re: Max for the Web - Part 1: Matrix Transforms in GDI+
Requesting Gravatar...
Glad you liked the article! Part 2 about gradients is just about ready, and will also include a similar program to test with.
Left by Lorin Thwaits on Dec 01, 2005 5:01 AM

# re: Max for the Web - Part 1: Matrix Transforms in GDI+
Requesting Gravatar...
This is exactly the article I was looking for. Though the sample is simple its very effective. the cool part is redrawing the image based on the scroll change. I am glad that I saw this.
Left by Suresh on Mar 19, 2009 5:49 AM

# re: Max for the Web - Part 1: Matrix Transforms in GDI+
Requesting Gravatar...
To reset transmission, dicconnect negative on battery for 10to 15 seconds, that should eraze the code, drive normally that should reset it normally.
Left by DDos Protection on Nov 06, 2009 8:52 PM

# re: Max for the Web - Part 1: Matrix Transforms in GDI+
Requesting Gravatar...
Very nice ASP.NET server control, wish i could program like this, sadly i'm not part of the game when it come to web apps. Still playing with pc softwares, a bit easier for now. Very nice article, loved it.
Left by Rpg games on Nov 13, 2009 1:53 PM

# re: Max for the Web - Part 1: Matrix Transforms in GDI+
Requesting Gravatar...

Nice post,thank you for your sharing.

Frank Gehry has designed and lent his name to this line of tiffany silver jewelry that

includes frank gehry bracelet´╝îfrank gehry tiffany rings,tiffany necklace, earrings, cuff links

and more.
Left by tiffany silver jewelry on Nov 17, 2009 9:49 PM

Your comment:
 (will show your gravatar)

Copyright © Lorin Thwaits | Powered by: