## CRT effect and shaders:

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
pestocat
Prole
Posts: 6
Joined: Fri Aug 17, 2018 7:53 pm

### CRT effect and shaders:

So last year this game "Stray" was made for the love2d jam. It has really cool graphics and I was wondering if anyone has some Ideas on how to recreate the effects. I've been reading up on shaders a little bit and was thinking maybe that's how it works, what do you guys think?

Specifically the effects I would like to recreate are:

1. The bulging crt effect
I was thinking that this one may have been acheived like this:
The game is drawn to the screen normally, in a big perfect square, then a shader picks up each pixel and moves it to where it ought to be to make the bulging effect. What kind of logic would make that happen though? I could see moving each pixel closer to a corresponding set of points on x = y and x = -y lines, but idk.

2. This interesting color separation, it seems like the red and blue are offset a little bit.
I was thinking this might have something to do with red and blue values being relates to the x position on the screen (as you see the effect is mush more pronounces to the right) but it must be more complicated than that alone, because that would yield a sort of gradient look which is not what is seen here.

Thanks, I hope I was specific enough.
Attachments
Screen Shot 2018-09-14 at 7.36.49 PM.png (245.12 KiB) Viewed 516 times
Screen Shot 2018-09-14 at 7.36.49 PM.png (245.12 KiB) Viewed 517 times
Screen Shot 2018-09-14 at 7.37.12 PM.png (2.53 MiB) Viewed 517 times

zorg
Party member
Posts: 2409
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: CRT effect and shaders:

You can check this out: https://github.com/vrld/moonshine
Also that effect has a name, it's called Chromatic Aberration.
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

pestocat
Prole
Posts: 6
Joined: Fri Aug 17, 2018 7:53 pm

### Re: CRT effect and shaders:

Thank you zorg, will check out moonshine.

I was also able to find the actual shader from the game, messed around with it and it created some great effects, but my main goal here is to really understand what it is doing and how.
If anyone can see it in the code and explain it more plainly that would be much appreciated.

Code: Select all

extern float elapsed = 10;

vec2 radialDistortion(vec2 coord, float dist) {
vec2 cc = coord - 0.5;
dist = dot(cc, cc) * dist + cos(elapsed * .3) * .01;
return (coord + cc * (1.0 + dist) * dist);
}

vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc) {
vec2 tcr = radialDistortion(tc, .24)  + vec2(.001, 0);
vec2 tcg = radialDistortion(tc, .20);
vec2 tcb = radialDistortion(tc, .18) - vec2(.001, 0);
vec4 res = vec4(Texel(tex, tcr).r, Texel(tex, tcg).g, Texel(tex, tcb).b, 1)
- cos(tcg.y * 128. * 3.142 * 2) * .03
- sin(tcg.x * 128. * 3.142 * 2) * .03;
return res * Texel(tex, tcg).a;
}


zorg
Party member
Posts: 2409
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

### Re: CRT effect and shaders:

the crt effect is basically all that code, and the part that makes the red and blue channels be offset (not simply just "to the left/right" but radially outward and inward from the given coordinates, are these parts:

vec2 tcr = radialDistortion(tc, .24) + vec2(.001, 0);
vec2 tcg = radialDistortion(tc, .20);
vec2 tcb = radialDistortion(tc, .18) - vec2(.001, 0);
Me and my stuff True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

pgimeno
Party member
Posts: 1337
Joined: Sun Oct 18, 2015 2:58 pm

### Re: CRT effect and shaders:

A key to understand shaders is that they don't say "where each pixel should move", but "what each pixel should show". It's kind of the other way around. For example, if you want to show an image tilted 30° to the right, the shader has to sample the original image with an angle of 30° to the left.
Thrust II Reloaded - GifLoad for Löve - GSpöt GUI - My NotABug.org repositories - portland (mobile orientation)
The MS-Github repositories I had have been closed after the acquisition announcement and will be removed in the near future.

ivan
Party member
Posts: 1342
Joined: Fri Mar 07, 2008 1:39 pm
Contact:

### Re: CRT effect and shaders:

I use both of these effects in one of my games:
https://store.steampowered.com/app/2878 ... _Commando/
The trick is to render everything to canvas first.
There are more things you can do in addition to chromatic aberration and curving the screen.

Code: Select all

// jangsy5 code
extern number distortion = 0.1;
extern number aberration = 2.0;
vec4 effect(vec4 color, Image tx, vec2 tc, vec2 pc)
{
// curvature
vec2 cc = tc - 0.5f;
float dist = dot(cc, cc)*distortion;
tc = (tc + cc * (1.0f + dist) * dist);

// fake chromatic aberration
float sx = aberration/love_ScreenSize.x;
float sy = aberration/love_ScreenSize.y;
vec4 r = Texel(tx, vec2(tc.x + sx, tc.y - sy));
vec4 g = Texel(tx, vec2(tc.x, tc.y + sy));
vec4 b = Texel(tx, vec2(tc.x - sx, tc.y - sy));
number a = (r.a + g.a + b.a)/3.0;

return vec4(r.r, g.g, b.b, a);
}

pestocat
Prole
Posts: 6
Joined: Fri Aug 17, 2018 7:53 pm

### Re: CRT effect and shaders:

Thanks everyone for the replies! Very helpful, starting to get my head around the whole shaders thing...

### Who is online

Users browsing this forum: No registered users and 4 guests