Search Unity

  1. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  4. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

[RELEASED] VHS Pro - CRT Screen Emulation

Discussion in 'Assets and Asset Store' started by vladstorm_, Sep 12, 2015.

  1. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    Basic Info

    VHS Pro
    is a camera image effect that emulates look and feel of old Cathode Ray Tube ( CRT ) screens. It emulates phosphor screen trail and screen bleeding, VHS tape noise (VHS data corruption), interlacing and jitter (deviation) in the analog video signal.
    Best for 2D console-like games, 80's/90's/Retro/VHS look, security cameras and robot/computer vision.



    Link (To Asset Store)

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

    Trailer



    Manual



    Features v. 1.1

    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.​


    Migrating to v1.3


    So, I submitted v.1.3. It uses shader features instead of multi compiles.
    The new approach has lot of advantages (faster building, smaller build size, multiple instances).
    Unfortunately will have to set all the values again. Sorry about that.

    The best thing to do is:
    1. Update VHS Pro plugin
    2. Create a new instance (VHS Pro component on camera)
    3. Manually copy values from the old one to the new one.
    4. Delete the old one


    Update Log


    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


















     
    Last edited: Mar 6, 2016
  2. DrewMedina

    DrewMedina

    Joined:
    Apr 1, 2013
    Posts:
    418
    Awesome!
     
    vladstorm_ likes this.
  3. Ruby-Roid

    Ruby-Roid

    Joined:
    Jun 21, 2015
    Posts:
    26
    ahaha looks great!
     
    vladstorm_ likes this.
  4. Murgilod

    Murgilod

    Joined:
    Nov 12, 2013
    Posts:
    3,619
    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:



     
    Last edited: Sep 13, 2015
  5. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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)

     
  6. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    Phosphor trail / Feedback WIP. Gonna include it in Update 1.1








     
    Last edited: Sep 26, 2015
    moure likes this.
  7. Ony

    Ony

    Joined:
    Apr 26, 2009
    Posts:
    1,600
    This is so awesome. Picking it up soon to incorporate in our next update. Exactly what we need.
     
    vladstorm_ likes this.
  8. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    CRT screen phosphor trail debug. Coming with v1.1. Probably next week.






     
    Last edited: Sep 26, 2015
  9. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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
     
  10. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    Phosphor trail test


     
    Last edited: Oct 3, 2015
  11. TooManySugar

    TooManySugar

    Joined:
    Aug 2, 2015
    Posts:
    819
    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?
     
  12. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    good question. i gotta test it.
    should i try it on unity 4.6.8 ?
     
  13. TooManySugar

    TooManySugar

    Joined:
    Aug 2, 2015
    Posts:
    819
    Yep. I'm on 4.6.8.
     
  14. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    TooManySugar likes this.
  15. TooManySugar

    TooManySugar

    Joined:
    Aug 2, 2015
    Posts:
    819
    Managed to test on 4.6 ?
     
  16. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    @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.

     
    Last edited: Oct 7, 2015
    TooManySugar likes this.
  17. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    YIQ/VHS noise. work in progress

     
  18. TooManySugar

    TooManySugar

    Joined:
    Aug 2, 2015
    Posts:
    819
    Pretty nice. Added to purchase list. Will get on next store batch.
     
    vladstorm_ likes this.
  19. solid12345

    solid12345

    Joined:
    Oct 8, 2015
    Posts:
    2
    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.
     
  20. TooManySugar

    TooManySugar

    Joined:
    Aug 2, 2015
    Posts:
    819
    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.
     
  21. Devision4

    Devision4

    Joined:
    Jan 12, 2013
    Posts:
    1,184
    side question. How did you make the TEXT in front of your demo video? The text mit the blue background?
     
    TooManySugar likes this.
  22. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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.
     
  23. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    better tape noise #WIP
     
  24. solid12345

    solid12345

    Joined:
    Oct 8, 2015
    Posts:
    2
    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
     
  25. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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
     
    Last edited: Oct 9, 2015
  26. TooManySugar

    TooManySugar

    Joined:
    Aug 2, 2015
    Posts:
    819
    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.
     
  27. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    better noise. work in progress.
     
  28. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    working on noise optimization
     
  29. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    Update v1.2.1 is at Asset Store.
    i fixed a tiny bug with scanlines ui switch on Win.
     
  30. jnas

    jnas

    Joined:
    Jul 13, 2013
    Posts:
    7
    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.
     
  31. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    yea. i can do that. its just by default (in real life) its sort of orange. maybe ill put it in the next update.
     
  32. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    playing around w old graphic cards emulations.
    probably will make a separate asset for that.
     
    xenius likes this.
  33. Murgilod

    Murgilod

    Joined:
    Nov 12, 2013
    Posts:
    3,619
    You're going to bleed my wallet dry if it's as good as VHSPro has been to me
     
    vladstorm_ likes this.
  34. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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)
     
  35. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    Retro Palette. work in progress.
     
    xenius likes this.
  36. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    working on additional shader which emulates old consoles

     
    xenius likes this.
  37. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
  38. 0x646877

    0x646877

    Joined:
    Apr 19, 2014
    Posts:
    24
    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.
     
  39. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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.
     
  40. 0x646877

    0x646877

    Joined:
    Apr 19, 2014
    Posts:
    24
    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.
     
    vladstorm_ and Peter77 like this.
  41. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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.
     
  42. Peter77

    Peter77

    Joined:
    Jun 12, 2013
    Posts:
    2,513
    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.
     
    vladstorm_ likes this.
  43. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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.
     
  44. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
     
    xenius likes this.
  45. nateschmold

    nateschmold

    Joined:
    May 26, 2015
    Posts:
    12
    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.
     
  46. 0x646877

    0x646877

    Joined:
    Apr 19, 2014
    Posts:
    24
    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.
     
  47. trickymeow

    trickymeow

    Joined:
    Dec 27, 2015
    Posts:
    1
    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.
     
    Last edited: Dec 27, 2015
  48. sloopidoopi

    sloopidoopi

    Joined:
    Jan 2, 2010
    Posts:
    242
    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]
     
    Last edited: Jan 6, 2016
  49. vladstorm_

    vladstorm_

    Joined:
    Nov 26, 2013
    Posts:
    174
    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.
     
  50. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Posts:
    23,000
    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 :)