How can i create an image morpher inside a graphics shader?

Question

Image morphing is mostly a graphic design SFX to adapt one picture into another one using some points decided by the artist, who has to match the eyes some key zones on one portrait with another, and then some kinds of algorithms adapt the entire picture to change from one to another.

I would like to do something a bit similar with a shader, which can load any 2 graphics and automatically choose zones of the most similar colors in the same kinds of zone of the picture and automatically morph two pictures in real time processing. Perhaps a shader based version would be logically alot faster at the task? except I don't even understand how it works at all.

If you know, Please don't worry about a complete reply about the process, it would be great if you have save vague background concepts and keywords, for how to attempt a 2d texture morph in a graphics shader.

Answer 1

There are more morphing methods out there the one you are describing is based on geometry.

1. morph by interpolation

   you have 2 data sets with similar properties (for example 2 images are both 2D) and interpolate between them by some parameter. In case of 2D images you can use linear interpolation if both images are the same resolution or trilinear interpolation if not.

   So you just pick corresponding pixels from each images and interpolate the actual color for some parameter t=<0,1> . for the same resolution something like this:

    for (y=0;y<img1.height;y++) for (x=0;x<img1.width;x++) img.pixel[x][y]=(1.0-t)*img1.pixel[x][y] + t*img2.pixel[x][y]; 

   where img1,img2 are input images and img is the ouptput. Beware the t is float so you need to overtype to avoid integer rounding problems or use scale t=<0,256> and correct the result by bit shift right by 8 bits or by /256 For different sizes you need to bilinear-ly interpolate the corresponding (x,y) position in both of the source images first.

   All This can be done very easily in fragment shader. Just bind the img1,img2 to texture units 0,1 pick the texel from them interpolate and output the final color. The bilinear coordinate interpolation is done automatically by GLSL because texture coordinates are normalized to <0,1> no matter the resolution. In Vertex you just pass the texture and vertex coordinates. And in main program side you just draw single Quad covering the final image output...

2. morph by geometry

   You have 2 polygons (or matching points) and interpolate their positions between the 2. For example something like this: Morph a cube to coil . This is suited for vector graphics. you just need to have points corespondency and then the interpolation is similar to #1 .

    for (i=0;i<points;i++) { p(i).x=(1.0-t)*p1.x + t*p2.x p(i).y=(1.0-t)*p1.y + t*p2.y } 

   where p1(i),p2(i) is i-th point from each input geometry set and p(i) is point from the final result...

   To enhance visual appearance the linear interpolation is exchanged with specific trajectory (like BEZIER curves) so the morph look more cool. For example see

   • Path generation for non-intersecting disc movement on a plane

   To acomplish this you need to use geometry shader (or maybe even tesselation shader). you would need to pass both polygons as single primitive, then geometry shader should interpolate the actual polygon and pass it to vertex shader.

3. morph by particle swarms

   In this case you find corresponding pixels in source images by matching colors. Then handle each pixel as particle and create its path from position in img1 to img2 with parameter t . It is the same as #2 but instead polygon areas you got just points. The particle has its color,position you interpolate both ... because there is very slim chance you will get exact color matches and the count ... (histograms would be the same) which is in-probable.

4. hybrid morphing

   It is any combination of #1,#2,#3

I am sure there is more methods for morphing these are just the ones I know of. Also the morphing can be done not only in spatial domain...