Wrapping image around objects in web app

Question

I'm creating a web app in ASP.NET like this one: http://www.zazzle.com/cr/design/pt-mug

I know how to do everything except wrapping an image around an object. It would be a simple task to do if I would only have to stack an image on top of the other, if they were flat, but if it is a round object, as this mug is, it's kinda tricky.

My first guess was to create some sort of algorithm for GDI+ that would simulate "wrapping" image around an object (actualy it wouldn't be an 3d object, it would just be a screenshot of it).

I figured it would be to raw approach and it would result in very bad quality, if I could ever make it work.

So, my second guess was to implement somekind of 3d renderer to whom I would give an image map for some object, it would render me that image onto an object and in real time return me rendered image. Is that posible? Is there any other way? Where do I start?

Answer 1

It might be some sort of OpenGL 3D rendering, but an image could easily be morphed in a purely 2D way for this effect. Horizontally, it would need to be squished where it goes off the side of the cup. Each column of pixels needs to be shifted vertically by varying amounts depending on which column - such that a horizontal line the image would become like a "U" shape. With the right parameters, such a morph could mimic the proper 3D shape. Lighting effects could be applied to, by brightening/darkening the image a bit in the right places.

Answer 2

If you are willing to try a commercial product, my company makes a raster processing SDK for .NET called DotImage. If you try it, take a look at PolygonTransform. You supply a polygon as a list of points, and the class warps the image to fit inside the polygon. If you need sample code for it, let me know.