Great effect! Animmaniac is there a way to get transparency in addition to the effect? For example, water that you can see through? I tried changing the opacity of the layer, but that only affects the edges of the effect.

Not right now. I need to modify the shader code to incorporate transparency.

Why this effect doesn't work on my iPad (dropbox demo)

Does your iPad support WebGL? If yes, then it should work.

To set the crop based on pixels rather than a percentage, you only need to multiply the values by pixelWidth and pixelHeight. This converts from object-space to screen-space. If you do this, remember to change the parameters from "percent" to "float".

Now to set an angle is a lot more complicated. I think you will need to use the line equations to check at which side of the crop line the pixels are, based on the angle and distance from the center. If you do a naive check (to right of the line opaque and to left transparent) you will probably get a pixelated line. So to get a smooth line you will need to think in a mathematic function that returns a value between 0 and 1 depending on the distance of the pixel to the crop line, so you get an anti-aliasing.

There's probably other ways to achieve it. But either way, when you put angles and different coordinate spaces into the mix things get a lot harder.

Sorry for not helping earlier, I totally forgot about this topic.

Here's a fixed version of the shader:

Fixed Crop Effect

C2 uses pre-multiplied textures, which means the RGB color values are stored multiplied by the alpha value.

So to avoid glitches you first need to divide the RGB by the alpha to get the real color values, then you do your pixel manipulation, and multiply the RGB by the alpha again at the end.