Stretching a sprite to an arbitrary (convex) quad

[wayfinder]

Hi!

 

As far as I could see, neither Phaser nor PIXI have out of the box capabilities to free transform a rectangular image (move the corners anywhere and stretch the image accordingly). Correct me if I'm wrong... (please! PLEASE!!! )

 

After trying a lot of different things that didn't work at all, my current approach is to use three.js to paint the transformed image to a rendertarget, which works as far as this: http://jsfiddle.net/beAh8/5/

 

I correctly render the transformed quad into a rendertarget that I can then use as a texture in three.js.

 

But, how do I get the resulting texture into a format I can use in Phaser?

 

I tried to do it like this:

 

var rtt = new Phaser.BitmapData(this, 'rendertarget', 1280, 1280);rtt.ctx.drawImage(rtTexture, 0, 0, 1280, 1280);

 

However, the WebGL element that I'm rendering to (three doesn't support Canvas Render To Texture) doesn't have a 2d rendering context, so I get an error.

 

 

 

Can you help?

 

 

(I'm 100% open to other approaches to solve the underlying problem of stretching images, too!)

 

[wayfinder]

Went another way and adapted this for use in Phaser: https://code.google.com/p/cartagen/source/browse/trunk/cartagen/public/cartagen/lib/projective.js?r=357

 

It kind of works!

[wayfinder]

Just as an update: I have a quite pretty working version now and understand it (for the most part ). The code from cartagen subdivides the image into many, many parts and then uses standard shear/scale transforms on them to approximate any given polygon. You can set how finely grained the effect should be (and thereby how high the cpu cost and how good the results are).