Posts
Search
Contact
Cookies
About
RSS

CRT scan line retro shader effect.

Added 29 Jan 2020, 11:26 p.m. edited 18 Jun 2023, 5:43 p.m.

video best viewed fullscreen!

Knowing I would need a render texture to draw on, in order to make a screen effect I simply started with the RayLib letterbox example. Which is a little ironic as I soon discovered that the approach I'm using doesn't scale well, I've ended up limiting the windowed mode and render texture to quarter HD resolution and when in full screen mode scaling the quarter HD to full HD, as its a 1:4 scale it doesn't mess up the scan line effect.

The shader draws every fourth line much dimmer (rather than making it black) this still gives a good scan line effect but still allows features like text still easily readable. Just a scan line effect on its own isn't quite enough however so by adding a simple bloom effect with the right parameters we get a bright slightly washed effect with ghosting.

As a final touch I added a small number of random "speckles" to give a slight interference, this looks best if left subtle as you can definitely over do it! in order for the interference not to look too hi res, they are 4x4 rectangles which are alpha blended.

You could take it further and bend the top and bottom areas down and up, so the corners don't make a sharp rectangle, but on balance the amount of render time that could take probably wouldn't wouldn't be worth it.

You can get the working source code here