[RELEASED] Ultimate CRT - Cathode Ray Tube display simulation

If you used this effect in your released game, please let me know, I’m sure we can talk about some sort of cross-promotion or anything like that :slight_smile:

Overview

Ultimate CRT is a camera post-process which simulates the small imperfections of cathode ray tube (CRT) displays. It lets you adjusts things like lack of sharpness, luminosity bleeding, RGB and shadow masks, color and monochromatic noise, color adjustments, screen curvature and many others (it offers over 30 different settings to adjust). And to make it easier for a beginner, it comes with 10 various presets for different display types (old black and white display, kitchen TV, arcade display, monochromatic terminals, etc.). It supports single- and multi-camera setups and comes in two versions, a standard one which can be combined with other image effects, but is a bit slower and a standalone one which can’t be combined with other effects, but is faster (especially on mobiles).

Asset Store link

Supported platforms

It runs on basically everything. Tested on PC, Mac and mobiles and WebGL. It is an expensive effect however, so don’t expect 60 FPS on a 5 years old mobile device. On my Moto X Style it runs at 45 FPS (at 1440p resolution).

Introductory video

Features

  • Sharpness adjustment.
    Adjustable sharpness reduction - adds a bit of blur to make the image look less LCD-like.
  • Luminosity bleeding.
    Brighter pixels “glow” more than the darker ones on CRTs, this simulates this behaviour.
  • Chromatic aberration.
    Adds colorful halos around the edges. Can be turned off for better performance.
  • RGB mask.
    It simulates the way CRTs produce image - some pixels let only the red channel through, some just the green channel and others just the blue one. Fully adjustable.
  • Noise.
    Two types of noise (white and color) can be added with different blending modes. Adding the right amount of noise works like dithering - it makes color gradients smoother and edges more round.
  • Various color adjustments.
    Things like brightness, saturation and contrast can be adjusted, along with the black and white point (what the darkest and brightest color is going to be) and levels (similar to Photoshop’s levels setting).
  • Interference.
    Horizontal interference, which lets you simulate a flickering display or, as the name suggest, a horizontal bar moving across the screen.
  • Shadow mask, curvature and vignetting.
    Six different mask are available, screen curvature can be adjusted for X and Y axes independently, vignetting can be set.
  • Adjustable internal resolution.
    This lets you set the dimensions of internally used buffer, which directly defines the internal resolution of the simulated display (and makes your setup not depend on screen resolution).
  • Single- and multi-camera scenes support.
    There’s a special property you can use to add other cameras which render the scene, so they all will be processed as well.

Screenshots

2946750--218292--anim0.gif

1 Like

If you’d like to check how your game would look like with the effect applied before buying, let me know, provide a couple of screenshots and send me those. I’ll do the magic and send you back the processed images :slight_smile:

There’s a WebGL demo available for those of you who want to see the effect in action before buying:

https://b005t3r.github.io/UltimateCRT/

Added three animated demos, enjoy!

https://b005t3r.github.io/UltimateCRT/fodder/index.html
https://b005t3r.github.io/UltimateCRT/furries/index.html
https://b005t3r.github.io/UltimateCRT/bunker/index.html

does this support single pass stereo rendering for VR?

I never tested it with VR, so it’s hard to tell.

BUT it works like any other image effect out there, so if they (the ones from the standard effects package) work in your scenario, mine should work as well.

I realize this is probably a longshot, but is there any way to have the effect not apply to transparent portions of the image. I was hoping to use this on our UI camera to get a scanline-ish effect without affecting the rest of the game.

Hi Just got the asset, and I have one simple help request.
I want to take out the curvature and when I put curvature on 0 for both horizontal and vertical I still see a very little black curvature around the edges. Maybe Its a bug or I’m doing something wrong.

Thanks

I’m not sure, you mean like masking part of the filtered image? You can probably do it as another step with a custom image filter. But Ultimate CRT does not have a build-in functionality for this I’m afraid.

It’s bug-ish :slight_smile: You can play with the way params are passed to shader or comment out the curvature step in the shader code. It’s pretty straightforward to do, but if you’ll have any problems doing it, let me know, I’ll try to prepare an example piece of code (can’t do it ATM).

Hi! I wonder if this is compatible with Pro Camera 2D?

I assume it is because that camera plugin it’s all about WHAT you see on screen, not HOW you see it… but I’m kind of curious about if you tested your plugin with other camera focused ones.

Thanks.

Yes, it is! It requires a bit of additional work and depends on your setup (e.g. if you have any other image effects on your sub-cameras they won’t be taken into account), but basically all you need to do is use a special property on the Ultimate CRT component, add all sub-cameras to it and add Ultimate CRT itself to the last camera that renders on screen. I know it sounds complex, but it’s really simple - you’ll find a demo project for it, it’s also explained in the docs.

And I should probably put it in the description as well :smile:

Also, if you really have to, because your setup it so custom, you can always make Pro Camera2D render to a texture, display that texture using a quad and use a separate standard camera to render than quad and use Ultimate CRT with it. Not the optimum approach, but it should work if everything else fails :slight_smile:

Hi I’m very satisfied your asset!. But I have some trouble in picking the objects when I use CRT_CurvatureX&Y.
I have to adjust mouse position when the object are placed in edge of game screen . Could you help me some easy idea of adjust mouse position?

Interesting :wink: I never tested that if I’m honest. I’m guessing your pointer is not processed by the shader (so it’s drawn on top of the processed image). You could try looking at the crt() function inside UltimateCRT/Resources/CRTFinalPostprocess.cg.shader - this is how coords are transformed from “flat” screen coords to curvy CRT coords (input coords vary from (0.0, 0.0) to (1.0, 1.0)) and do the reverse for your coords, because you’re trying to click an already transformed object (output coords vary also from (0.0, 0.0) to (1.0, 1.0), they are just squeezed towards the center a bit).

I would try copying this function entirely into your click detection code and changing crtOverscan, bendX and bendY to 1.0f / crtOverscan, 1.0f / bendX, 1.0f / bendY. This is just off the top of my head, give it a go :slight_smile:

Thanks alot.I’ll try it. But when I play my game in my android phone, the frame is serously dropped. (My game adjust your CrtEffect value in playing time ) Can you give me some tip? Are these three shader codes will be big load to my phone?

It’s hard to say, it depends on various factors.

The effect uses an internal texture for rendering stuff on - the bigger you set it to be, the more GPU power it’ll require to render a frame, which may cause your FPS to drop quite significantly. Another thing to consider is chromatic aberration - it’s really subtle, but requires 3x more texture samples than rendering without it, so setting this to 0 should eat up less of your GPU time.

On the phones I tested, with very simple games, it was always able to run at 30+ FPS (on my Moto X Style it runs at 47 FPS) with chromatic aberration on and internal texture set to 768p.

But you should always keep in mind this is a full screen effect and just to simply render a screen-sized input image at 1080p at 60 FPS, you’d need about 0.5 GB/s of bandwidth. Now, this effect samples the image about 15 times (I’d need to check that again) per each pixel it sends to output, so this is already a lot and it need to do the processing as well, so asking a 5 years old phone to do that is probably a bit too much :slight_smile:

Hello again, I appreciate your advice. thx.
I tested my game within your crt Asset a lot, I found that my Frame Drop is caused by ‘TextureSize’ variable. I’m not use that variable, so I set it 0. But It cause serious Frame Drop. But when I set it 768 that is your default value. I work well in my phone(LG G2 same perforamnce as GALAXY S4 samsung).

But my phone get hot in short time. So I wanna do not use ‘texture Size’ and ‘chromatic aberration’ for performance.
(I think I have to avoid CreateCameraTexture() or do not adjust texture size calculation. I didn’t see the code detaily… sorry ) Could you give me some tip?

(I have to publish the game in march… If you help me, you save my life T.T)
Thank you again

You should probably never set it to 0 :slight_smile:

Please, read some more about this setting in the docs. What it’s for is setting the size of internally used texture - if you set it to 768 and set the adjustment mode to “height”, then for a FullHD display the effect will use an internal texture of size 1365x768 - significantly smaller than the input image, so significantly less calculations are needed for the effect to work. Setting it to 0 will cause it to work at screen resolution, which won’t look good and will be a lot slower.

For performance optimization, I’d suggest keeping this value as small as you can (if the output image still looks good, there’s no point in increasing this value) and turning off chromatic aberration (just set this one to 0). Start with the default value of 768 and go lower (it depends on your particular game how low can you go), try things like 720, 640 etc. Probably going below 600 will make your game look very blurry, but anything between 600 and 768 should (reasonably) work.

And about your phone getting hot. Well, you’re pushing it to the limit 60 times per second, what did you expect? :slight_smile: Seriously, there’s no solution. You can try using a lower frame rate (maybe your game looks good at just 30 fps), but there isn’t much I can help you with here.

I updated to unity 5.6 and the CRT effect is now broken. The code has errors and displays incorrectly, either black screen or upside down.
I get this error.

NullReferenceException: Object reference not set to an instance of an object
BaseCRTEffect.ProcessEffect (UnityEngine.Texture src, UnityEngine.RenderTexture dest) (at Assets/UltimateCRT/Scripts/BaseCRTEffect.cs:700)
CRTEffect.OnRenderImage (UnityEngine.RenderTexture src, UnityEngine.RenderTexture dest) (at Assets/UltimateCRT/Scripts/CRTEffect.cs:8)

All right, I’ll give it a go tomorrow and see what’s going on.

Thanks for reporting.