CRT TV Filter!
2 Likes
Love this! Super accurate approach and really clean/efficient as a GLSL-based component.
Really nice, thanks for sharing!
It goes a little crazy when trying to simulate a full HD panel, like resolution of 1920, but at that point you can’t see the pixel area unless you are zoomed in anyways, so probably a condition not worth changing.
You’re right, it does go crazy. Since it is a more direct approach, it doesn’t scale well to these resolutions if you are rendering it in a TOP which is relatively close in size to your virtual resolution. For now, I will leave it as is, but I will update this post when I have a more nuanced way to deal with these cases.
Nice Tool! Thanks for your work! I noticed that Pixel Size and Softness don’t do anything… I tried to fix it myself but unfortunately my GLSL skills are non-existent 
This looks awesome! I’ve seen multiple tutorials for achieving this effect and this looks like the best one yet. But from an angle of being realistic I have a few nitpicks…
CRTs scan from left to right (sloping slightly downwards), then they blank and return to the left. So each horizontal line is rendered left to right before the next vertical line is rendered. In the example the phosphors appear to be moving in an unusual pattern. In a CRT the pattern would be very consistent. Now, does your pattern look better than realistic? Probably!
Also, if you’re emulating a CRT computer monitor, it probably would have progressive scanning, but an SD CRT would have interlaced scanning. Meaning, odd horizontal scanlines would be rendered for one frame, then the even scanlines would be rendered.
CRTs don’t have LEDs or pixels. They have phosphors that are activated by electron guns. For accurate resolution, SD CRTs would be 480i @ 30fps (NTSC) or 576i @ 25fps (PAL), and HD CRTs would be 720p/1080i/1080p.
It seems like you went with a slot mask design for the shape of the phosphors, but I’m wondering if it’d also be possible to have an aperture grille or shadow mask version. An aperture grille would probably be really tricky to replicate though…
Ultimately, none of that matters since the effect looks great. But I’m somewhat obsessed with CRTs, even though I don’t yet understand them and probably got a lot of things wrong in this post. Figured I’d insert myself into the discussion anyway!
@sledgeslammer Thank you! I appreciate all the comments and the deep dive into the details of CRT displays.
In terms of scan lines, my implementation has no implementation whatsoever of the mechanics of scanning; the scanning-like behavior you see in the example images are actually artifacts from the input image itself. In other words, every virtual phosphor here is rendered by the shader in every (non-virtual) frame.
I think scanning would be a huge add to this component, so I will try to return to this when I have some time to think more deeply about how to achieve this effect.
1 Like