First of all let me note that the shader approach taken in that game will only work in WebGL, and will never be doable on 2d canvas, so that limits your game's compatibility with older devices. If you do want it to be compatible, you can have the football field on a separate layer, and apply a 3d transform to that layer's canvas.

If you don't mind limiting compatibility to WebGl-enabled devices, then shaders are the way to go. There are really 2 ways of doing this: using a vertex shader is going to be faster, but slightly complicated. Using a pixel shader is slower but easier to integrate with wade.

Ideally you'd want to use a custom vertex shader, but that's not something that wade supports out of the box. However wade allows you to set your own draw functions, so you can use a custom vertex shader if you want. That is, use Sprite.prototype.draw_gl as a starting point, and modify it to use your own shader. In fact, you don't even need to create a special draw function for it, you can just create your own WebGl ShaderProgram and assign it to your Sprite

mySprite._shaderProgram = myShaderProgram;

So how would you create such a shader program? You can mostly copy the code used internally by wade to create its own default shaders that you can find in layer.js (in the wade source files) around line 1722. Essentially you want to use that shader, but instead of calculating pos the way it does, you multiply aVertexPosition by your own model view projection matrix.This may sound confusing if you've never done 3d graphics programming before, but it really isn't that complicated once you understand the maths behind it.

Now for the easier (but much less efficient) approach. You can get a good approximation just by scaling up the uv coordinates of your sprite:

- first transform the horizontal uv coordinate uv.x (that is initially in the [0, 1] range) into a [-1, 1] range, i.e. multiply by 2 and subtract 1.

- multiply uv.x by (uv.y + a) * b, where a and b are factors that you can choose to vary the strength of the persepctive effect. For example, a = 1, b = 0.5

- transform uv.x back into the [0, 1] range (the inverse of the first operation)

- use these coordinates to sample your texture

- set the alpha value (gl_FragColor.w) to 0 for pixels where uv.x is less than 0 or greater than 1

Hopefully this makes sense - I'm a bit busy with the upcoming wade release now, but if you want I can try to write some code once the release is done.

Gio i use as you say:

vec2 uv = uvAlphaTime.xy;
uv.x *= 2.0;
uv.x -= 1.0;
uv.x *= 1.0 /((uv.y + 1.5) * .5);
uv.x *= 0.5;
gl_FragColor = texture2D(uDiffuseSampler, uv);

But it not work properly. It work only with https://s3-us-west-2.amazonaws.com/ccblogdemos/16/clouds/checkered.png sprite from "Scrolling Clouds..." entry. To be honest, I don't understand why it is.

The same is true with "MDN WebGL_model_view_projection" - I don't understand how to pass this to Wade. I will be very grateful to Gio if you still explain how to push 3d transformations into wade.