[RELEASED] VHS Pro - Analog video signal and CRT screen emulation

Basic Info

VHS Pro is a camera post-processing effect for Unity 3D which emulates look and feel of retro video cards, graphics adapters and cathode ray tube (CRT) screens. It emulates resolution decimation, signal color encoding and downsampling, screen bleeding and phosphor trail (ray tail/fading on a phosphor screen), VHS tape noise (VHS data corruption), interlacing and jitter (deviation) in the analog video signal, color dithering and color palette matching from existing palettes or your own custom one. It's best for 2D console-like games, 80's/90's/retro/VHS look, security cameras and robot/computer vision and video processing.

There're 3 versions of VHS Pro.
1. Built-in RP
2. HDRP
3. URP



Link (To Asset Store)

http://u3d.as/content/vladimir-storm/vhs-pro

Trailer

Manual

VHS Pro v3.0 supports all 3 : Built-in RP, URP, HDRP. info here
VHS Pro v2.0 added HDRP version. info here
VHS Pro v1.1 Built-in RP original version features are listed below

1. Custom Texture
You can use custom movie texture or a sprite if you want it to be affected by the effect.

2. Cathode Ray Tube Emulation
Emulates CRT Screen. Bleeding, Fisheye, discretion (quantization) and vignette.

a.Vertical Resolution / Quantization
The picture will be quantized vertically by lines. You can choose the amount of lines:
You can choose between these modes:
"FullScreen" (no quantization), "PAL 240 Lines" (240 Lines per height), "NTSC 480 Lines" (480 Lines per height) or "Custom" (you can set custom number of lines).

b. Bleed Mode (CRT screen bleeding mode)
“Bleeding” is a cathode ray tail on the phosphor screen. When the ray (electron beam) passing certain point of the phosphor screen, the point keep glowing some small amount of time after the ray is already gone. So, the ray has a fading tail behind itself while going across the screen. This effect called bleeding.
You can choose between these modes: "Old Three Phase", "Three Phase", "Two Phase". These modes emulate different screen bleeding curves. You can make bleeding longer or shorter.

c. Custom Bleeding Curve
Allows you to generate your own bleeding YIQ curves. Sync YQ channels and change the Bleed Length.

d. Fisheye
Emulates a real screen by "bending" the corners of the image and making it look like if it would be put thru a wide-angle lens. You can adjust fisheye amount.

e. Vignette
Emulates vignette (reduction of an image's brightness or saturation at the periphery compared to the image center). You can adjust amount and change speed how it pulsates.​

3. Noise
Emulates different sorts of noises.

a. Vertical Resolution / Quantization
The noise vertical quantization. You can inherit from the CRT Vertical Resolution or use custom vertical resolution for noise which is different from CRT Vertical Resolution.

b. Quantize Noise X / Pixilate
If you want to quantize noise by width (i.e. make squares instead of tiny vertical lines) then adjust this value.

c. Background Noise
This is a simple background noise (“film grain”-like noise). You can adjust transparency.

d. Tape Noise
Emulates noise which you can find on old VHS cassettes. Noise lines floating down the screen.
You can adjust transparency and speed.

e. Line Noise
Emulates noise in the analog video signal and VHS cassettes. Noise lines popping up randomly within the screen. You can adjust transparency and speed.​

4. Jitter
Emulates deviations in the analog video signal and CRT.

a. Floating Lines
After the screen was quantized vertically it consist of the horizontal lines which will float down the screen if this option is on. It works the best on the low resolution.

b. Scan lines
draws the black lines in between the screen lines. You can adjust the width.

c. Stretch Noise
Emulates noise, and data corruption on the VHS cassette plus some CRT jitter. Looks like if some of the screen lines were stretched and floating up and down the screen.

d. Jitter Horizontal
Emulates interlacing jitter. You can adjust the amount.

e. Jitter Vertical
Emulates analog video signal and CRT jitter. Adds a bit of YIQ shifting. You can adjust transparency and speed.

f. Twitch Horizontal
Shifts/displaces the image horizontally sometimes. You can adjust the frequency.

g. Twitch Vertical
Shakes/Shifts screen horizontally sometimes. The images "jumps" or "falls" vertically. You can adjust the frequency.​

5. Analog Signal Tweak
YIQ is the color space used by the NTSC color TV system. The analog video signal is transmitted in YIQ and not in RGB. In this section you can adjust the YIQ values.

a. YIQ Permanent Adjustment
"Adjust Y", "Adjust I", "Adjust Q" - use these to make a permanent adjustment.

b. Shift YIQ
"Shift Y", "Shift I", "Shift W" - use these to tweak/shift the values.

c. Gamma Correction
use this to balance the gamma(brightness) of the signal.​

6. Phosphor Trail
Emulates phosphor screen decay.
"Input Cutoff" - Adjusting brightness threshold of input. How much of each frame affects the trail.
"Input Amount" - Amplifies the input amount after cutoff.
"Fade" - Adjusts how fast the trail fades. In other words it's a feedback amount.

7. Tools
Additional tools.

a. Unscaled Time
When you are pausing the game using Time.timeScale = 0 (or Application.timeScale = 0) it stops all the animation, sound, etc. It also stops shader timer and it's animation. If you still need shader to run while this sort of pause you can use "unscaled time" feature. The shader will keep running even when your Time.timeScale == 0. It will use Time.unscaledTime instead of Time.time.​

b. Debug Bleed Curve
Helps to debug bleed curve.

c. Debug Trail
Helps to debug phosphor trail.​

Update Log

v3.0
-URP version: added
-HDRP version: rewritten for new Unity 2022.2.1f
-HDRP version: fixed DLSS bug in
-BRP version: rewritten for Post-Processing Stack v2 3.2.2
-BRP version: merged with Graphics Adapter Pro Plugin, new features added
-Graphics Adapter Pro is deprecated
-all 3 version have the same fields now
-custom palette field is deprecated. but it's still possible to add one
-fixed bug for adding shader features to a build

v2.0
+ re-wrote for Unity 2019.3 HDRP Post-Processing Stack
+ added resolution presets
+ merged with Graphics Adapter Pro plugin and added functions like Color Encoding, Dithering, Palette Color Replacement
+ removed features like fisheye, vignette, gamma correction because they already exist in Post-Processing Stack
+ removed "custom curve" support

v1.3
+switched from multi_compiles to shader_features (faster building, smaller build size, but you have to turn on multi_compile for the features you switching on/off in runtime)
+added feedback color
+added fisheye hard and soft cutoff
+added hyperspace cuttoff
+renamed movietex to bypass tex
+auto disable movie texture for ps4/xbox/mobile
+added bleeding on/off switch
+fixed 'for' loops for windows
+fixed 'lines float' feature
+added 'lines float' speed - with both ways
+fixed ps4 bug

v1.2
+ added signal noise
+ added distortion to tape noise
+ added tails to tape noise
+ added color shift to tape noise
+ make better background noise (fixed cross pattern)
+ renamed background noise amount to alpha
+ renamed background noise to film grain
+ put noises into YIQ space
+ a lot of noise performance optimizations
+ renamed jitter vertical to jitter
+ renamed jitter horizontal to interlacing
+ renamed tape noise values (amount to alpha, threshhold to amount)
+ renamed/switched shift and adjust of signal tweak

v1.1
- changed vertical jitter from RGB color space to YIQ color space
- fixed gamma correction range. now you can go both directions
- fixed scanlines - made them more expensive but better looking
- added scanlines width parameter - allows you adjust scanline width
- renamed CRT mode to bleed mode
- added custom bleeding curve feature - now you can create your own bleeding curves
- bleed amount renamed to bleed stretch
- added phosphor trail section
- added tools section
- added unscaled time feature - now you can use unscaled time
- made better UI


Contact

If you have any questions or want to report a bug, please, write here or PM on email: vladstorm00@gmail.com
Twitter: https://twitter.com/vladstorm_

Screenshots

 

Awesome!

 

ahaha looks great!

 

I've been using this for a few days and it's pretty much perfect. The fact that it allows me to play with the YIQ values is worth the price of admission on its own, honestly. Even minimal effects look authentic with it:

 

Thank you. I maybe will make this YIQ tweak section even more flexible in the future.
Atm, I'm working on custom bleeding curve and phosphor feedback features. So, its getting even more accurate and will have more trippy effects)

 

Phosphor trail / Feedback WIP. Gonna include it in Update 1.1

 

This is so awesome. Picking it up soon to incorporate in our next update. Exactly what we need.

 

CRT screen phosphor trail debug. Coming with v1.1. Probably next week.

 

I made an update v1.1! The new main features are Custom Bleeding Curve and Phosphor Trail.
You can check out new video manual for the details

Full Update Log:
- changed vertical jitter from RGB color space to YIQ color space
- fixed gamma correction range. now you can go both directions
- fixed scanlines - made them more expensive but better looking
- added scanlines width parameter - allows you adjust scanline width
- renamed CRT mode to bleed mode
- added custom bleeding curve feature - now you can create your own bleeding curves
- bleed amount renamed to bleed stretch
- added phosphor trail section
- added tools section
- added unscaled time feature - now you can use unscaled time
- made better UI

 

Phosphor trail test

 

The old tv effect is incredible. Distoritions artifacts etc are nice but to appear ocassionally. But 90s tv oh my god. No way this can work on unity 4.6?

 

good question. i gotta test it.
should i try it on unity 4.6.8 ?

 

Yep. I'm on 4.6.8.

 

@TooManySugar
ok. ill test it :3

 

Managed to test on 4.6 ?

 

@TooManySugar
i just checked. It works on 4.6.8. but you need a Pro version.
because RenderTexture in Unity 4.x is only in Pro version.
in Unity 5.x it's in Personal Edition (free) version also.

 

YIQ/VHS noise. work in progress

 

Pretty nice. Added to purchase list. Will get on next store batch.

 

Hi, I came to this forum seeing screenshots of this on google images, I know nothing about unity3d, game development or programming, I am however an emulation enthusiast and love the old CRT displays I am wondering how this tech can be used in emulators or implemented in an app somehow? I'd even be willing to pay for it.

 

If you can run your emulation in a web browser you could render the webbroser as a texture and apply this filtering to the camera. This is to me the quickest way to do so. Unless there is a way to render as a texture the windows desktop.

 

side question. How did you make the TEXT in front of your demo video? The text mit the blue background?

 

hi, i actually wanna make an app in the future that u can use this effect on pictures and videos.
i even wanted to run a kickstarter for that but not sure that its gonna work.
do u know any people who would be interested in using this not just for the games?

There's a script, i wrote, called Typer Its in the asset. You can put any text there and use Camcorder font. I just didnt put this font into the asset because it's not free (atm there's similar free font there). the the script types the text basically.

 

better tape noise #WIP

 

Hello Horz

Funny you mentioned kickstarter, i've actually had an idea for months about creating something similiar to what you are doing, I can't PM you I guess as a newbie but do you mind emailing me at mikegtulsa833@yahoo.com? It might be worth your interest

- Mike

 

I had this idea like for a couple of years tbh.
That was one of the reasons why i started to write this shader.
I wrote u an email

 

Just did a quicksearch and mame can run on web browser.
http://www.techhive.com/article/247...ome_plays_all_your_favorite_arcade_games.html

So you could today have the emulation with this shader working.
Just render the browser as a texture with a plugin put a camera in front with this asset an there you have it.

Surely there are other emus running on browser.

You could create a template web build or an exe that ask your for the browser adress or a simple menu with predefined adresses for each emu.

 

better noise. work in progress.

 

working on noise optimization

 

Update v1.2.1 is at Asset Store.
i fixed a tiny bug with scanlines ui switch on Win.

 

Playing around with it and I really like the results. For me it would be a nice feature if the colour of the phosphor trail could be changed.

 

yea. i can do that. its just by default (in real life) its sort of orange. maybe ill put it in the next update.

 

playing around w old graphic cards emulations.
probably will make a separate asset for that.

 

You're going to bleed my wallet dry if it's as good as VHSPro has been to me

 

thank you.
atm i cant really say when it will be finished. i have some ideas in mind. just gotta find time to write everything)

 

Retro Palette. work in progress.

 

working on additional shader which emulates old consoles

 

Love the shader! I am wondering if you know why postVHSPro_First.shader takes up 49mb. Is there any way this can be reduced? It's far too large to use in my mobile game and I would really hate to remove it.

 

that's a good question. i have no idea tbh. i'm planning to make mobile optimisation next months. ill make a research about it.
the file as text is definitely not 49mb) but probably unity compiles it or something. i dunno. i gotta figure it out. i never worked that much with mobile development on unity.

 

I was able to figure out the issue. With all the options the shader has it's compiling all the different versions of the shader with them on or off. It builds currently about 2048 different versions. I commented out the #pragma multi_compile for the options I was not using. I have it down to about 20 different versions resulting in 548kb. Better than the 101mb that version 1.2.1 was giving me.

 

thank you a lot! i didn't know this. I should add it to the documentation when i'll make mobile optimization.

If I'd only know how to make shader code separation other way. The only one thing I found is multi_compile.
Also I'm not sure how you can turn on/off #define blocks for an instance of a shader. I'm not even sure that there's such thing as an instance of a shader for one specific object (for example).
Let's say I have 2 objects and they using same shader. Can I turn on/off #define blocks differently in these 2 objects for the same shader?
I'm not sure that it's possible. Also I can't use if instead of #define because the shader will get slower.
Please, write me back if you know how to do it other way than multi_compile if you know.

 

If your image-effect is using a material rather than being hard-wired to a shader and controlling its values through scripting, you could use shader_feature.

#pragma shader_feature is very similar to #pragma multi_compile, the only difference is that unused variants of shader_feature shaders will not be included into game build. So shader_feature makes most sense for keywords that will be set on the materials, while multi_compile for keywords that will be set from code globally.

multi_compile and shader_feature are pretty much just defines, which you can turn on and off using the Material/Shader.EnableKeyword functionality. That's not possible if you by-pass this system by using your own defines. In this case, you need to replace the shader.

A common technique, before Unity provided the multi_compile and shader_feature functionality, was to use defines. Below I briefly describe how I used it in the past. BTW, this approach is often refered to as Uber-Shader. You have one (big) .cginc file that contains all shader code for every feature supported and you drive through defines what part in the shader is enabled. You create for each shader permutation a separate shader file and activate via defines what features you want to use in this particular permutation, followed by including the .gcinc uber shader file. You end up having (many) small or almost empty shader source files that all use the same code located in the .cginc file.

I'd look into the shader_feature a bit, it sounds like it a good fit. I prefer to use a material for image effects, rather than hard-wiring the shader it via scripting. This allows to use an image-effect as a regular material, so it could be assigned to other objects as well.

I wrote a TV glitch shader some time ago, not as fancy as yours, but you could assign it to a material. Artists started to assign a "TV picture" texture to the texture-slot where usually the framebuffer texture would be and could use the same (image) effect for regular TV screens throughout the level as well.

Hope it helps.

 

thank you!
yea. i should try that. I also wanted to write a TV shader that you can apply to the textures but didn't find the way to make it work. like if i'd have 2 in-game tv's and put my shader as textures and then tweak parameters independently on each tv. maybe it will work with materials. but the question then - how it will work with multi-passes and stuff, when i'm having few materials. anyways still i'd try what you said about shader_feature and materials.
thank you a lot for the information.

 

Seems it cant build to iOS due to use of MovieTexture.. Or am I doing something wrong?

Thanks so much for the great asset, bummer if i cant use on mobile, but I understand if that's the case.

 

You can edit the shader/scripts and remove the reference to MovieTexture and it will work. It's how I got it working on mobile. Doing this means you can't use a custom MovieTexture tho.

 

Hey Horz,

I bought your asset and I'm very impressed with it. It looks amazing on my 8bit-esque retro style games.
However, when I try to make a standalone build, it hangs on Building assets - resources.assets.

The Unity Shader compiler process takes up all cpu, and I've left it running for 20-30 minutes without any progress so I can only assume it hangs.

This happens on my own projects as well as the test scene provided in the asset pack.

If I move the shaders out of the Resources folder it compiles without issues, but then, of course, no shaders.

Do you (or anyone else) know of a way to get past this problem?

(I'm using Unity 5.3.0)

EDIT: It DOES finish compiling, but it takes a long time.

 

Hi,
I also bought this cool shader and i love it, but there seems to be an issue with the publishing. I have the same problem like @trickymeow has. I tested it with Unity 5.2.2 and 5.3.1 . There are 4 shader compiler processes that suck my CPU . And i didn't had the patience to wait so long for publishing. (Windows 8.1 64 bit)

[Edit] I have a small improvement: right now the movieTex property is a MovieTexture. It would be more useful to make this a Type of Texture . In the Start method you can change the MovieTexture related stuff to this:

Code (CSharp):

1. if(movieTex!=null){
2.             if(movieTex is MovieTexture)
3.             {
4.                 ((MovieTexture)movieTex).loop = true;
5.                 ((MovieTexture)movieTex).Play();
6.             }

With this modification it was possible for me to set the movieText property to a Texture from another material.[/Edit]

 

yea. there's no MovieTexture on mobile in general but i guess some guys wrote an asset to make it work.
I'm planning to make a mobile version in the future maybe without MovieTexture.

I know this issue and know how to fix it but I'll have to rewrite the asset bit differently. I'm planning to do it. Later here Its written how to fix it.

thank you for mentioning the Texture thing. I used MovieTexture coz most of the time I used video to process it with the shader. Maybe in the next version I'll use your improvement. I'll put it in the list.


Also, about slow building while publishing. It was mentioned somewhere in the thread how to make it faster. I just didnt have time to fix it yet. The point is -> You should remove code parts in the shader which you dont use, including multicompile define lines. They make building process slow coz unity creates all possible variants of the shader.
I wanna make it automatically in the future versions.

 

Great asset, just bought. I have a problem with the fisheye, in that the edges of the fisheye are jaggy. It would be nice to fade these off to black so that it doesn't look glaring. Using antialiasing for this purpose is a bit overkill. Any ideas what can be done? Thanks