"Crop" WebGL Shader?

Share your Construct 2 effect files

Post » Wed Feb 12, 2014 2:21 pm

Hi!
tl;dr I really want to write a "Crop" shader, any pointers? :P

So I have literally no experience with writing GLSL shaders, or ANY shaders for that matter. I'm trying to create a (seemingly) simple "Crop" shader. I've been looking through the documentation and files that Scirra provides, but I can't seem to wrap my mind around it!
I then found my ol' files from MMF2 which had a similar "Crop" shader (Not owned by me, part of the "Complex-softwares" pack I downloaded yearrrrs ago) that I decided to edit and tinker with to figure out how to port the shader into the GLSL language.
Since I'm not entirely understanding what I am doing (I get a few things but barely anything), I have ended up trying many different combinations of words and replacing things here and there, and I simply can't get it to work. I have failed to get any sort of effect EXCEPT making my sprite's alpha channel get affected. I guess that's something!

So the way this particular crop works, is that you get several parameters to edit (Left, Right, Top, Bottom, Alpha). You would specify the amount of pixels to modify from each parameter, and then the alpha would transform those pixels to the alpha specified.
So say you have this sprite:

And you then set "Bottom" to something like 10, and Alpha to 0, it should give this result:


I will attach what I've attempted, I'm pretty eager to learn about how to actually solve this and how it works. If it's also much to ask for, I'd LOVE to be able to retain the angle if the sprite is rotated; so following the previous example with Bottom and Alpha, the crop would appear like this when the sprite is rotated:


IN AN IDEA WORLD: If I was a pro shader writer, I wouldn't make this exact shader for Crop, I would instead, have only 2 parameters, "Amount" and "Angle", in which you specify an angle in which the crop will come from, and "Amount" would be how many pixels it crops off (That way, You could specify 45degree angles whilst the sprite's angle is 0.)

Here's my failed attempt (along with the shader I'm trying to port):
https://dl.dropboxusercontent.com/u/7765312/C2/Croppy/crop.zip

Thanks!
B
51
S
20
G
10
Posts: 571
Reputation: 9,819

Post » Wed Feb 26, 2014 5:58 am

Bumpity bump.
Any sort of advice would be greatly appreciated! I have read the documentation supplied from Scirra but I'm having a hard time for something that sort of looks like it'd be extremely easy to figure out if one had prior knowledge about shader writing. :P
B
51
S
20
G
10
Posts: 571
Reputation: 9,819

Post » Wed Feb 26, 2014 7:53 pm

B
70
S
40
G
24
Posts: 518
Reputation: 20,070

Post » Thu Feb 27, 2014 9:08 am

@jase00 : I gave a look to your shader. For the moment, it does what you want. If you want to crop an "amount", you can ask the user to give the amount as a percentage. Then you have a number between 0 and 1 that you can use as a condition for fL, fR, fT and fB directly. For the angle, it's less obvious, you need to use some trigonometry.
B
33
S
9
G
6
Posts: 708
Reputation: 6,704

Post » Thu Feb 27, 2014 10:47 am

@digitalsoapbox , thanks! I haven't checked that out actually, I will give it a look! Though I still hope to figure out my situation, would be handy to gain some knowledge on Shader writing as well as this would directly fit what I need in my project at the moment :P
@Pode , Hey thanks for checking it out! But,...well, it's broken haha. I uploaded it fully knowing it's not working as expected, but it's an attempt nonetheless. If you enter any value into any of the parameters, it will not crop at all, it will just set the transparency to whatever Alpha value is set. :(
If you set "Left" to 0, the sprite will just look normal.
Set "Left" to 1 and the entire sprite will go to whatever Alpha is specified.
Set "Left" to 0.09, and the outer edge of the sprite will turn into the Alpha specified.
So in conclusion, it's broken... :P

I figured doing the angle version of this shader would require Trig, and I think I know the math to do it, I just don't understand at all how to implement it in shader language at all :P I figured if I could get this "Left Right Top Bottom" version figured out, I would have a better chance at the Angle version.

Thanks for response! I appreciate it greatly!
B
51
S
20
G
10
Posts: 571
Reputation: 9,819

Post » Thu Feb 27, 2014 4:15 pm

There's a couple of issues with your shader:

- First you are not using brackets in your if statement, so the alpha is set for every pixel and the if is effectively doing nothing.
- Second you are using front.x and front.y, that is the same as front.r and front.g respectively, and those returns color values and not positions. What you meant to use is vTex.x and vTex.y that are the coordinates.
- Just a minor thing, but you can multiply the alpha value directly (front.a *= fA) instead of repeating the alpha then multiplying (front.a = front.a*fA).

So your code should look like this:

Code: Select all
lowp vec4 front = texture2D(samplerFront, vTex);

if( vTex.x<fL || vTex.x>1.0-fR || vTex.y<fT || vTex.y>1.0-fB )
{ front.a *= fA; }

gl_FragColor = front;
Scirra Employee
B
148
S
53
G
17
Posts: 711
Reputation: 17,700

Post » Sun Mar 02, 2014 4:41 pm

Wow, thank you so much @Animmaniac ! This is extremely helpful and has helped me understand a bit more about writing shaders :D
I didn't expect that the effect is applied BEFORE rotations (as in, apply this shader, then change the sprite's angle, the shader rotates too, which is what I wanted :D) , so that's awesome!
There's only 1 problem with the shader (which I'm struggling to understand why it's happening), and that is that it's not affecting certain colours correctly (Black would crop correctly, white is still visible). I reckon I've probably mucked up with the brackets somehow in the entirety of the shader or something. :P
Here's a copypasta of the entire shader code, just incase I've mucked up something simple:
Code: Select all
// Pixel shader input structure
varying mediump vec2 vTex;
uniform lowp sampler2D samplerFront;
uniform mediump float pixelWidth;
uniform mediump float pixelHeight;
uniform mediump float fL;
uniform mediump float fR;
uniform mediump float fT;
uniform mediump float fB;
uniform mediump float fA;

void main(void)
{
lowp vec4 front = texture2D(samplerFront, vTex);

if( vTex.x<fL || vTex.x>1.0-fR || vTex.y<fT || vTex.y>1.0-fB )
{ front.a *= fA; }

gl_FragColor = front;
}


And here is a screenshot of the problem.
Image

I'll poke around with it but I'm not sure if it's not an obvious fix :P
B
51
S
20
G
10
Posts: 571
Reputation: 9,819

Post » Fri Mar 28, 2014 6:44 pm

Did you manage to fix the issue?
I know nothing about glsl, but I'm pretty good with trigonometry, so if you need some help there send a PM.
B
36
S
8
G
8
Posts: 532
Reputation: 6,903

Post » Sun Sep 21, 2014 9:47 pm

I've not managed to solve this and not quite sure what to do :P
Does anyone have any good reading material for GLSL? I remember looking at a PDF file I found but I couldn't figure much out.
B
51
S
20
G
10
Posts: 571
Reputation: 9,819

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

Next

Return to Effects

Who is online

Users browsing this forum: No registered users and 2 guests