"Crop" WebGL Shader?

Share your Construct 2 effect files

Post » Mon Dec 08, 2014 6:39 pm

This could have been really useful for me, so I'm going to take some time to try to fix it.
http://www.schizokoa.com we are a small game jam group, visit us!
B
25
S
6
G
1
Posts: 51
Reputation: 1,934

Post » Mon Dec 08, 2014 9:00 pm

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.
Scirra Employee
B
152
S
53
G
17
Posts: 711
Reputation: 17,800

Post » Tue Dec 09, 2014 12:13 am

@Animmaniac
Woah!! That is exactly what I was trying to get all along!!! Ah it makes much more sense, I was so confused with the weird semi-transparent result from my own experiments :P Thank you very much!

I only need to figure out 2 more things and that's it :D . I reckon I might find some info to study from looking at other shader files but if you have any pointers considering you seem to know your way around this sort of thing, I'd be very grateful!
The first being, how would I be able to set the value according to number of pixels from the side? So if I set R to 7, it would trim 7 pixels off of the right side of the Sprite.
The second being, how would I incorporate Angles into this shader? If I had another variable called "AngleOfCrop" which is set to like 15 and "R" is set to 9, it would trim the right side 9 pixels, but at a 15degree angle. Below is a picture to explain (The Red part is the part that will be invisible from the crop) [EDIT: I realised that this little diagram might not be correct. I need to rethink the theory behind what I'm trying to explain.]
Image

I think this part is going to be harder to do than the original non-angled crop. It doesn't help that I barely know how shaders work but it's something I'm interested in and am picking up on information from reading documenation, looking at other existing shaders, and reading your replies. Thank you for your time!
B
51
S
20
G
10
Posts: 571
Reputation: 9,819

Post » Wed Dec 10, 2014 9:23 pm

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.
Scirra Employee
B
152
S
53
G
17
Posts: 711
Reputation: 17,800

Previous

Return to Effects

Who is online

Users browsing this forum: No registered users and 0 guests