This shader was all about simulating CRT technology with the challenge of being as accurate as possible. It turns out it is just a combination of smaller effects and for a 4 week project this fit the scope well.
Warped Screen Coordinates and Vignette
The electron beam of a CRT screen doesn’t naturally travel in a straight line which is why the screen shape is warped. CRT screens usually have a vignette around the edges to minimise the noticeable curve of the screen. Heres how I did it:
float3 CRTCoordsAndSDF(float2 p, float2 screenParams, float vignetteWidth, float warpOffset)
{
float2 centredUV = p * 2 - 1;
float2 warpUV = centredUV.yx / warpOffset;
float2 uv = centredUV + centredUV * warpUV * warpUV;
uv = uv * 0.5 + 0.5;
if (uv.x <= 0.0f || 1.0f <= uv.x || uv.y <= 0.0f || 1.0f <= uv.y) uv = 0;
float2 vignette = vignetteWidth / screenParams.xy;
vignette = smoothstep(0, vignette, 1 - abs(uv * 2.0f - 1.0f));
float vignetteSDF = saturate(vignette.x * vignette.y);
return float3(uv, vignetteSDF);
}
To get a curve I squared the warped UV and added back to the centred UV. I combined both the vignette and warped UV because the vignette needed the calculated UV. It was just cheaper that way. I cull out anything outside the the 0-1 range to get the shape. The UV ends up looking like this:
Scanlines
Scanlines are due to the horizontal raster scanning of the CRT laser beam. The laser rapidly scans one line at a time. The area between each line remain darker causing this scanline effect. I wanted control over the scanline amount and fall off. The function I use here is quite short and simple, but it does the job.
float ScanLines(float rawScale, float colValue, float scanLineFallOff)
{
return colValue * pow(distance(frac(rawScale), 0.5), scanLineFallOff);
}
The input colValue will be the greyscale of the blit texture. This is too get brightness as a factor of the line width as brighter colours will yield thinner lines due to the bloom and colour bleeding they cause.
YIQ Colour Space
During the 1980s-1990s, broadcast television tend to use YIQ as a colour space. Y is the luminance and IQ is the chrominance. Using this colour space will constrain the colours I have available based on what was available during this period.
float3 YIQColorGrading(float3 color, float cyanToRed, float magentaToGreen, float brightness)
{
float3x3 RGBToYIQ = float3x3(0.299, 0.596, 0.211,
0.587, -0.274, -0.523,
0.114, -0.322, 0.312);
float3x3 YIQToRGB = float3x3(1, 1, 1,
0.956, -0.272, -1.106,
0.621, -0.647, 1.703);
float3 colParams = float3(brightness, cyanToRed, magentaToGreen);
float3 crtConversion = float3(0.9, 1.1, 1.5);
float3 final = mul(color, RGBToYIQ);
final = colParams + (crtConversion * final);
return mul(final, YIQToRGB);
}
I found the calculations to get to YIQ on the wikipedia page . This function allows me to colour correct in the Unity scene and still output RGB values. The YIQ parameters are also public for me to use in the Unity Scene.
Chromatic Aberration and Bloom
Chromatic Aberration occurs as the electron beams age. Each beam of a CRT is either red, green or blue and all must hit the same physical point on the screen. When the accuracy wears off chromatic aberration starts to occur. These beams were prone to bloom sensitive, where lighter colours bled into neighbouring phosphor dots (CRT version of pixels). Unity’s default bloom shader sufficed well so I won’t go into much detail about that. One thing I’ll say is to replicate the CRT sensitivity, I lowered the bloom threshold. To achieve the chromatic aberration effect, I sampled the blit texture three times, each with an offset controlled in the Unity scene. One channel of each blit texture was added to a new float3, creating a similar camera texture, but with each RGB channel slightly offset from the centre of the screen.
float chromABias = length(crtUV * 2 - 1) * _chromaticAberationIntensity;
float3 chromCol = float3(0,0,0);
for (int i = -offset; i <= offset; i++)
{
float o = chromABias * i;
float2 uv = crtUV.xy + o;
float4 blit = SAMPLE_TEXTURE2D_X(_BlitTexture, point_clamp_sampler, uv);
float3 col = YIQColorGrading(blit, _cyanToRed, _magentaToGreen, _brightness);
if (i== -offset)
{
chromCol.x += col.x;
}
else if (i == 0)
{
chromCol.y += col.y;
}
else
{
chromCol.z += col.z;
}
}
Signal Static
Broadcast signals were prone to being unstable at times causing signal static. I use a vertical scrolling sinewave with a high frequency that changes in amplitude randomly.
float SignalSDF(float2 p, float time, float range, float freq, float mag ,float bias)
{
float mask = 1 - saturate(range * distance(p.g, 1 - frac(time * 0.5)));
float sinIn = freq * p.g;
float b = 1 + (mask * mag * sin(sinIn));
float wave = 1 - saturate(distance(p.r, b));
float flooredTime = floor(time * 10);
float normRandRange = Hash21(flooredTime.xx);
float flicker = round(bias * normRandRange);
float t = mask * wave * flicker;
float sdf = lerp(1, 0.9, t);
return sdf;
}
I want it to snap in an out so I floored time and put it through a Hash21 I have which will output a random value between 0-1. The bias controls how frequently the static shows on the screen.
This is the final product. All fairly simple techniques here where research is the driving force for quality.
Jeremy Edwards 