Retro CRT Shader — A post processing effect study

Think back to those halcyon days when video games came on cartridges, controllers were square, and televisions were big, rounded, and weighed nearly as much as a fully loaded pickup truck. The days when computational speed was measured in megahertz, and when television was fuzzy pixels dancing across curved screens illuminated by cathode rays that may or may not have permanently damaged our eyes. Ahhh the memories…

Image for post
Image for post
https://atariage.com/forums/topic/271350-crt-tv-vs-modern-tv-for-retro-games/?do=findComment&comment=3876282

We can’t bring back the past, but through the magic of shaders and math, we can try to emulate some of the artifacts of this bygone era to give your games that warm, fuzzy feeling you know you’ve missed:

Image for post
Image for post
Don’t mind the banding, that’s just the aliasing of our scan lines when compressed. Though you sometimes see this effect when real photographs of CRTs are manipulated as well! — https://drigax.github.io/RooftopRampage/

Starting off, TV screens were originally rounded and convex, driven by the limits of display technology at the time. Put briefly, our modern LED televisions are a densly packed matrix of individually controllable lights that we can use to create a moving picture:

Image for post
Image for post
https://thumbs.dreamstime.com/b/closeup-led-lights-bulb-diode-led-tv-led-monitor-screen-display-panel-closeup-led-lights-bulb-diode-led-tv-led-111461955.jpg

The precursor to this type of display technology were cathode rays, sequenced beams of electrons that would react with a phosphor coating on the inside of the television glass to create an image:

Image for post
Image for post
image borrowed from https://computer.howstuffworks.com/monitor7.htm

Magnetic fields were used to bend these electron beams to position them at different locations on the screen, which was curved to minimize the distortion throughout the picture.

For some more info, I highly recommend checking out Technology Connection’s series of videos on YouTube for more detailed explanation of how CRT televisions work, and a supplement for an in-depth explanation of early color implementations.

Lets start with simulating the low hanging fruit and working our way up. We can simulate the screen curvature by doing a similar process via a pixel, or post processing shader. We can define a mathematical curve, and modify how we sample from our rendered scene texture to the resulting render texture as we apply our process.

With the help of hiulit’s port of knarkowicz’s retro styled shader, we can see that the curvature of a screen can be represented by distorting the UVs using a cubic function expressed as:

Graphed, it may be a bit more intuitive:

Image for post
Image for post
1 dimensional view of remapped UVs after applying screen curvature filter.

Our “curvature” parameter can be used to control how extreme we want to deform our texture near the edges, to create the appearance that the image is projected on a rounded surface. We can represent a flatter display with a larger curvature factor. We also choose to add some bounds to this function to represent the “frame” around the television where the computed UV exceeds [0,1].

Implemented in GLSL, we get:

We can modify the default Babylon.js playground scene to allow us to add a post process to the end of the rendering pipeline without much hassle:

We can also add some downscaling to the post process to emulate the lower resolutions of these older displays by modifying the post process effect’s parameters:

Ok, our screen looks curved, but its a bit too “clean” to be believable. Our modern displays are too contiguous, the pitch, or space between pixels is smaller than our eye’s ability to discern them. This was not quite the case for older screens.

Image for post
Image for post
dem pixels. https://dirkdigduggler.files.wordpress.com/2013/04/img_04301.jpg

This is easily simulatable by adding some darkness periodically through the image to represent the pitch between the scan lines:

Image for post
Image for post
1-dimensional view of scan line filter over pixel intensity for a 15 pixel wide display.

We use a single period of a sine wave as our periodic function, set to repeat for as many virtual “pixels” we want to represent. The sinusoid peaks now represent the pixel centers, while the troughs represent the centerpoint between two pixels. Our scalars were chosen in order to offset the sinusoid between the bounds of [0.1, 1.0] such that we never fully darken the sampled color, even between our scanlines.

On top of this we can also add another factor, `opacity` to allow for the user to control the intensity of these scan lines in how they darken the screen.

Implemented, we get:

You can see the graniness in action, as we edge closer to our retro display:

Image for post
Image for post
Brightened for clarity. https://playground.babylonjs.com/frame.html#PPPXW0#12

There’s also a curious vignetting effect we want to add to simulate older, curvier monitors, masking out the sharp edges of our render to help the nostalgia factor a bit.

Image for post
Image for post
an oldie, but a goodie. http://www.retroaudiolab.com/tvphoto.htm

We can implement this using an exponent that decreases the pixel intensity the further from the center of the screen you go:

Image for post
Image for post
Note the steep drop in pixel intensity as we reach the edges and corners.

Implemented, you can see it here:

Image for post
Image for post
Brightened for clarity — https://playground.babylonjs.com/frame.html#PPPXW0#13

Now with all these screen darkening effects we’re starting to lose picture quality, lets boost the brightness of the lit pixels overall to help fight these effects applied.

We can also adjust the simulated “resolution” to increase or decrease the aliasing of the scanlines, our final scene should look like:

Image for post
Image for post
NOT brightened for clarity :) — https://playground.babylonjs.com/frame.html#PPPXW0#14

Great! We have a pretty convincing CRT emulating shader we can use to really reinforce that “retro” feel in our experiences! Sometimes its fun to take a stroll down memory lane….

Image for post
Image for post
That’s the good stuff. — https://drigax.github.io/RooftopRampage/

If you have a cool experience that you want to show off that uses this shader, or added some enhancements to really amp up this shader’s abilities, feel free to post it to our forum! https://forum.babylonjs.com

Till the next time,
Nick Barlow — Babylon.js Team

https://twitter.com/whoisdrigax

Written by

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store