Old-school CRT/NTSC Effect

Community Showcases
1

EDIT: My new efforts have been moved into a different thread. Please comment there instead :slight_smile:

I don’t know why, but I suddenly got it into my head that I wanted to make an NTSC/CRT effect in Unity.
At first I tried to hack it. Every other “scanline” I offset texture by a pixel, and I also slightly separated the red and green channels. It looked OK, but not great.
My next attempt is another beast altogether. This time it’s a multipass effect, ported over from an emulator. The idea is that the shader converts a digital RGB image into an NTSC composite signal (chroma+luma), then converts it back to RGB values. There’s some other stuff in there such as offsetting some values by a frame counter, but the basic idea is converting to and from an NTSC signal (there’s some inherent data loss in there which results in that classic color bleeding we all know and love)

Here’s the result. It’s some footage of Super Mario World on the SNES.

https://dl.dropboxusercontent.com/u/99106620/CRT Effect/CRTDemo.html

Click “Toggle NTSC” to switch the NTSC effect on and off (it’s off by default). I also hacked some scanlines into the shader, just cause they look cool.
Apologies if the video gets really repetitive (it’s only a minute long, and just loops). I suggest turning down your sound (or mute it altogether)

Thoughts?

2

A CRT-effect is something I’ve been looking for for some time, as I want my game to look like something from the 32/64 bit era.
Could you upload it somewhere?
I was also wondering, are you aware of an effect that turns off perspective-correction?

3

The dropbox link is a 404.

4

Yeah I know, I took it down because I was worried about space and because I thought the thread died lol
I’ll put up the source code when I get the chance.

5

I’m looking forward to this a lot. As I’ve asked before, I’m a bit curious regarding if you have any idea how to acheive the “shaky” effect seen in Sega Saturn and PSOne games, as they didn’t have proper perspective correction?

6

I don’t, unfortunately. It was really a consequence of hardware design that caused that, which I’m not sure can be easily replicated on modern hardware short of writing your own software renderer.

Anyway, here’s the shader.

Shader "Custom/NTSC"
{
	Properties
	{
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_Res ("Input Res XY / Display Res XY", Vector) = (640, 480, 640, 480)
		_FrameCount ("Frame Count", Float) = 0
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 200
		
		// base pass - creates Luma signal
		Pass
		{
			CGPROGRAM
			#pragma target 3.0
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"


			#define TEX2D(c) tex2D( _MainTex, (c) )
			#define PI 3.14159265
			#define PI_OVER_THREE PI / 3


			sampler2D _MainTex;
			float4 _Res;
			float _FrameCount;


			struct v2f
			{
				float4 pos : SV_POSITION;
				float4 uv : TEXCOORD0;
			};


			v2f vert (appdata_base v)
			{
				v2f o;
				o.pos = mul( UNITY_MATRIX_MVP, v.vertex );
				o.uv = v.texcoord;
				return o;
			}


			half4 frag (v2f i) : COLOR
			{
				float2 xy = i.uv.xy;
				
				float2 xyp = xy * _Res.zw * 4.0 * PI_OVER_THREE;
				xyp.y = xyp.y / 2.0 + 2.0 * PI_OVER_THREE * fmod( _FrameCount, 2 );


				float4 rgb = TEX2D( xy );


				float3x3 rgb2yuv = float3x3(0.299,-0.14713, 0.615,
											0.587,-0.28886,-0.51499,
											0.114, 0.436  ,-0.10001);


				float3 yuv;
				yuv = mul( rgb2yuv, rgb.rgb );


				float dx = PI_OVER_THREE;
				float c0 = yuv.x + yuv.y * sin(xyp.x+xyp.y) + yuv.z*cos(xyp.x+xyp.y);
				float c1 = yuv.x + yuv.y * sin(xyp.x+xyp.y+dx) + yuv.z * cos(xyp.x+xyp.y+dx);
				float c2 = yuv.x + yuv.y * sin(xyp.x+xyp.y+2.0*dx) + yuv.z * cos(xyp.x+xyp.y+2.0*dx);
				float c3 = yuv.x + yuv.y * sin(xyp.x+xyp.y+3.0*dx) + yuv.z * cos(xyp.x+xyp.y+3.0*dx);


				return (float4(c0,c1,c2,c3)+0.65)/2.3;
				//return float4(1,1,1,1);
			}


			ENDCG
		}


		// second pass - adds chroma signal and scanlines
		Pass
		{
			CGPROGRAM
			#pragma target 3.0
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"


			#define TEX2D(c) tex2D( _MainTex, (c) )
			#define PI 3.14159265
			#define PI_OVER_THREE PI / 3


			sampler2D _MainTex;
			float4 _Res;
			float _FrameCount;


			struct v2f
			{
				float4 pos : SV_POSITION;
				float4 uv : TEXCOORD0;
			};


			v2f vert (appdata_base v)
			{
				v2f o;
				o.pos = mul( UNITY_MATRIX_MVP, v.vertex );
				o.uv = v.texcoord;
				return o;
			}


			half4 frag (v2f i) : COLOR
			{
				float scanlineIntensity = ( (int)( i.uv.y * _Res.y ) % 2 );// * ( (int)( i.uv.x * _Res.z ) % 2 );
				scanlineIntensity = clamp( scanlineIntensity, 0.75, 1 );


				float2 xy = i.uv.xy;
				float2 xyf = frac( xy * _Res.zw );
				float2 xyp = floor( xy * _Res.zw ) + float2( 0.5, 0.5 );
				xy = xyp / _Res.zw;
				float offs = fmod( _FrameCount, 2 )/2.0;
				float val1 = xyp.x + xyp.y / 2.0 + offs;
				float val2 = -1.0 + val1;
				float val3 = 1.0 + val1;
				float4 phases = (float4(0.0,0.25,0.5,0.75) + float4(val1,val1,val1,val1)) *4.0*PI/3.0;
				float4 phasesl = (float4(0.0,0.25,0.5,0.75) + float4(val2,val2,val2,val2)) *4.0*PI/3.0;
				float4 phasesr = (float4(0.0,0.25,0.5,0.75) + float4( val3,val3,val3,val3)) *4.0*PI/3.0;
				float4 phsin = sin(phases);
				float4 phcos = cos(phases);
				float4 phsinl= sin(phasesl);
				float4 phcosl= cos(phasesl);
				float4 phsinr= sin(phasesr);
				float4 phcosr= cos(phasesr);
				float4 phone = float4(1.0,1.0,1.0,1.0);


				float2 one = 1.0/_Res.zw;
 
				float4 c = TEX2D(xy)*2.3-0.65;
				float4 cl= TEX2D(xy + float2(-one.x,0.0))*2.3-0.65;
				float4 cr= TEX2D(xy + float2( one.x,0.0))*2.3-0.65;


				float3 yuva = float3((dot(cl.zw,phone.zw)+dot(c.xyz,phone.xyz)+0.5*(cl.y+c.w))/6.0, (dot(cl.zw,phsinl.zw)+dot(c.xyz,phsin.xyz)+0.5*(cl.y*phsinl.y+c.w*phsin.w))/3.0, (dot(cl.zw,phcosl.zw)+dot(c.xyz,phcos.xyz)+0.5*(cl.y*phcosl.y+c.w*phcos.w))/3.0);
				float3 yuvb = float3((cl.w*phone.w+dot(c.xyzw,phone.xyzw)+0.5*(cl.z+cr.x))/6.0, (cl.w*phsinl.w+dot(c.xyzw,phsin.xyzw)+0.5*(cl.z*phsinl.z+cr.x*phsinr.x))/3.0, (cl.w*phcosl.w+dot(c.xyzw,phcos.xyzw)+0.5*(cl.z*phcosl.z+cr.x*phcosr.x))/3.0);
				float3 yuvc = float3((cr.x*phone.x+dot(c.xyzw,phone.xyzw)+0.5*(cl.w+cr.y))/6.0, (cr.x*phsinr.x+dot(c.xyzw,phsin.xyzw)+0.5*(cl.w*phsinl.w+cr.y*phsinr.y))/3.0, (cr.x*phcosr.x+dot(c.xyzw,phcos.xyzw)+0.5*(cl.w*phcosl.w+cr.y*phcosr.y))/3.0);
				float3 yuvd = float3((dot(cr.xy,phone.xy)+dot(c.yzw,phone.yzw)+0.5*(c.x+cr.z))/6.0, (dot(cr.xy,phsinr.xy)+dot(c.yzw,phsin.yzw)+0.5*(c.x*phsin.x+cr.z*phsinr.z))/3.0, (dot(cr.xy,phcosr.xy)+dot(c.yzw,phcos.yzw)+0.5*(c.x*phcos.x+cr.z*phcosr.z))/3.0);


				float3x3 yuv2rgb = float3x3(1.0, 1.0, 1.0,
											0.0,-0.39465,2.03211,
											1.13983,-0.58060,0.0);


				if (xyf.x < 0.25)
					return float4( mul( yuv2rgb, yuva ) * scanlineIntensity, 0.0);
				else if (xyf.x < 0.5)
					return float4( mul( yuv2rgb, yuvb ) * scanlineIntensity, 0.0);
				else if (xyf.x < 0.75)
					return float4( mul( yuv2rgb, yuvc ) * scanlineIntensity, 0.0);
				else
					return float4( mul( yuv2rgb, yuvd ) * scanlineIntensity, 0.0);
			}


			ENDCG
		}
		
	} 
	FallBack "Diffuse"
}

It’s a two-pass image effect, and you need to pass the frame count for the animated scanline effect (actually it works best if framecount is incremented 30 times per second instead of 60, looks more retro-ish)

7

Cool.
How do I apply it? I can’t drag it to the camera.

8

It’s a shader, it has to be used from an image effect script (via OnRenderImage callback)
Something like this:

using UnityEngine;
using System.Collections;


public class CRTEffect : MonoBehaviour
{
    public Shader CRTShader;
    
    private Material mat;
    
    void Awake()
    {
        mat = new Material( CRTShader );
    }
    
    void OnDestroy()
    {
        Destroy( mat );
    }
    
    void OnRenderImage( RenderTexture src, RenderTexture dest )
    {
        RenderTexture pass1 = RenderTexture.GetTemporary( src.width, src.height );
        Graphics.Blit( src, pass1, mat, 0 ); // render first pass
        Graphics.Blit( pass1, dest, mat, 1 ); // render second pass
        RenderTexture.ReleaseTemporary( pass1 );
    }
}
9

Parsing error :frowning:

10

Oops, typed “void” instead of “class”. Try it now.

11 
RenderTexture pass1 = RenderTexture.GetTemporary( src.width, src.height );
12

Sorry for necroing, but I was snooping for NTSC shaders and found this.
I believe the shake error was a projection based on look up tables, with errors in them.
Either that or it was rounding errors during the calculation due to integer math.
In any case, you’d have to get into the camera. The projection nowadays is done in hardware, so this would be tricky to pull off :-/
Perhaps with a Vertex shader and an estimation of the error based on distance from the camera it could be achieved.

13

Another year, another necro. Digging around for NTSC shaders as well, and this is one of the very few real results available. Like, at all.

I’m hoping someone can help figure out what’s gone wrong here. I’m testing a mock-up image (left) on a quad, and I have an orthographic camera with the CS script and shader applied. The only change I’ve made to the shader is the Input/Display resolution (256, 240, 256, 240), to match the input image.

1024×500 32.2 KB

I’ve had very little luck trying to troubleshoot it. The best I can get out of it is a red channel image with very faint blue/green channels showing through the scanlines — Fine for the Virtual Boy, but not what I’m aiming for! If anyone knows how to correct this, it’d be greatly appreciated.

1 Like
14

I’d sorta abandoned this, but I’ll give another shot at fixing it up.

EDIT: Interestingly, I have one project in which this works and one in which it doesn’t. No idea what the difference is yet, but that should be a clue as to how to get this fixed up and working properly :slight_smile:
I also have some ideas on how to make it more efficient and compact, by potentially using lookup tables to do the RGB->YIQ->RGB conversion instead of doing all of the math in the shader.

EDIT: OK, so today I actually decided to implement the effect from scratch using LUTs instead of a per-pixel matrix multiply. The good news is that it’s working (again). The even better news is that the new shader is much more concise. The even more better(er?) news is that it actually looks a little bit better IMHO, as I’m porting over some code from a different NTSC shader. This one is three passes instead of just two, but actually looks a bit more retro IMHO because it basically:

1.) converts RGB to YIQ color space
2.) converts the YIQ color into a composite signal
3.) low-passes and smears the composite signal a bit, and then decodes the composite signal back into RGB.

This has the effect of adding some of the image fuzzing and color smearing that you’d see on older TVs that the previous method didn’t have as much.
Also, since this shader is a lot more of my own code than the previous one was, I have a much better understanding of how it works and so it should be easier to maintain (thankfully!)

15

Some results of the reimplementation, using a screenshot from Sonic 2 for testing. Added a simple pixel mask effect which sort of simulates the shadow mask used in some TVs, plus fisheye distortion to give it the curved CRT look
Have yet to find a situation which makes everything go magenta in this version, so that’s a plus I suppose :slight_smile:

1 Like
16

Today I decided to write a screen fading image effect inspired by the Sonic The Hedgehog titles on the Sega Genesis. Those of us who’ve played it will remember that hue shift as the screen faded -when fading in you could see the whole palette shift through a blue-ish color. After doing some research, it turns out that the R, G, and B fades are independently staggered from each other. Since they don’t fade at the same time, it produces a hue shift. Whether or not this was intentional or a bug isn’t known, but I decided to replicate it anyway.
So the screen fade effect lets you specify an RGB separation value, which is how much each component is staggered. It goes from 0 (off) to 0.66 (components are faded in sequence, first R then G then B, with no overlap). You can see the results here (shows both fading to black, and fading to white):

EDIT: Oh, and by the way, I’m thinking I’ll be turning this into a whole suite of effects and releasing it on the asset store. In addition to effects intended for pixel art 2D games, I’ll also be throwing in some effects for Saturn/PS1 style games as well, such as the good old wobbly vertex effect, affine texture mapping, and a few dithering effects I came up with (as an example, check out the car shadows in Virtua Racer for the Sega Saturn).

It will also include a custom input manager which correctly handles mouse position even with the fisheye effect enabled (it can apply an optional fisheye distortion to the mouse position for mouse events).

EDIT2: I’ll probably also throw in an interesting tool I made… basically, a while back I spent a lot of time researching making digital-to-analog circuitry that could interface with the VGA standard. It turns out that, for each color component, you make a voltage divider which contains a series of resistors of doubling resistance values, one resistor per bit, such that when all bits are on the voltage sums to 0.7v (which is max voltage in VGA).
So, based on that research, I made a tool for Unity. You specify how many bits per color component, and voltage per bit, and it tries to spit out resistance values that would match this. You can tweak the resistance values from there (for instance, picking closest values you could actually order from manufacturers), and then based on that it can spit out a color lookup table which is made by calculating voltage values, which can be plugged into the Color Grading effect as-is. So in the end you can produce a color LUT which would be the result of using theoretical custom-designed VGA circuitry. Overkill? Probably. But I think it’s neat anyway, and you can always just plug in number of bits, hit Generate, and just save it without messing with any of the values.

1 Like
17

Wickeddd. There’s so many “retro” assets and tutorials out there that merely throw chromatic aberration over the top (or even more simply, shift color channels left and right) and call it a day, so it’s refreshing to see an effect that goes the full mile. Especially since older titles were designed around the limits of composite video, and even took advantage of them in some cases.

Integer vertex snapping and affine texture mapping are always fun too. Mercilessly unforgiving, but fun!

The VGA LUT generator sounds interesting though. I’m assuming the end result is fairly subtle but noticeable. How far can the generator’s values be pushed?

Edit: I saw the Video Mode Demo video on your channel, and it looks great right now. How customizable are the video mode presets? If I were to dig into the shader itself, could the amount of color smearing (for example) be fine-tuned? Can the display video be locked to a specific resolution or aspect ratio? (eg: Input resolution is 320x240, while output is set to display at 4:3 with pillar/letterboxing, regardless of the player’s actual screen res)

18

Hi. There’s actually a new thread for this stuff over at WIP RetroTV Effect Suite - Community Showcases - Unity Discussions, I meant for new replies to be moved over there. I’ll put my reply there as well.

1 Like