WIP RetroTV Effect Suite

Hmm, it's barely noticeable, there's a lot more flickering in PhobicGunner's version I think. But it also is a good example of a game where it doesn't really matter if you use it or not:

 

Right, so new version just went up. RF, Composite, and S-Video now take two passes for the effect instead of three. Turns out it made no visual difference to encode the signal with a multi-sample filter kernel, so the signal can be generated directly in the first pass and I only need the luma/chroma decode filters for the second pass. Still doesn't exactly match the colors of that YT video, but I think at this point the fact that on any frame the letters are clearly visible as relatively solid patches of color means chroma/luma crosstalk is working as intended.
I did port over the 24-tap filter kernel too. Didn't see much of a difference aside from higher color bleeding in S-Video, so it's compiled out in favor of the 8-tap filter I already had (in the interest of efficiency) but the two can be easily switched between (using a define in the NTSC.cg file as well as a define in CRTEffect.cs)

 

This is awesome, thanks for sharing! I've got it working in my game, but am having a hard time getting the look I want. It seems a bit too blurry and I don't notice any of the red and blue color bleeding that I want. I can reduce the blur by upping the resolution, but it gets super slow above 1024.

 

Well, red/blue color bleeding isn't specifically programmed in. It just does the same color bleeding an NTSC television would do. You can get a very sharp look, but with some visible hue bleeding, by switching to S-Video and making the horizontal resolution very small (maybe just 2x your canvas resolution).

I'm also surprised you'd be seeing slowdowns above 1024. Just about the only thing that does is set a shader parameter and sets the internal render texture resolution used for passes. Are you trying to run this on integrated graphics? Perhaps it's a fillrate issue.

 

Yeah it's a 2013 Macbook Pro with integrated graphics. I'll try changing the horizontal canvas resolution I didn't even think of that.

Another question I had was about the pillarboxing. My game is already pillarboxing a quad that displays a rendertexture from another camera. I want the filter to only affect the actual game content but I can't figure out how. It seems to just take the entire screen no matter what.

 

Maybe try creating another render texture, have the CRT camera set to render to that texture (and, at the same time, set to stretch to that rendertexture), and then display that on your quad?

 

I have no idea what you're saying, hahaha. I created a script to stretch the render texture to fill the camera and am just using that. Seems to look good. I've got everything the way I want it to look except it's still missing ghosting and fringing like this:


I'm not smart enough to figure any of this out, but it's all detailed pretty well here:
http://www.gamasutra.com/blogs/KylePittman/20150420/241442/CRT_Simulation_in_Super_Win_the_Game.php

And he also released his source code here:
http://superwinthegame.com/dsoptalk/

His ghosting is a little extreme for me, but I'd really like the fringing, which is something lacking in all of the NTSC CRT shaders I've tried. I always said that one of these days I'd port his to Unity, but I have yet to go down that rabbit hole. Most of my coding is done on a train with really poor wifi too, so it's hard for me to find time to research new things.

 

Hm, the fringing doesn't seem like it's physically based on the real thing though, so for lack of a better way to say this I'm not sure whether I'd really care to add it. The whole goal (and one of the reasons it's so niche) is that I'm effectively ignoring pure asthetics and going entirely for how to model the actual signal in such a way that it works, and therefore looks, like a real television. Beyond that, adding purely aesthetic features like fringing is a bit outside the scope of this project.

 

I'm pretty sure it is, because I see it on my CRT. Maybe the TV is doing some sharpening and that's what causes it. Either way, I assumed you wanted to simulate the CRT look and not just the NTSC signal, which is totally fine, it's still a great project either way and I really love and appreciate the accuracy!

I made a change to it yesterday to use a variable for realtime instead of _Time.x because I need to set Time.deltaTime to 0 but still need the TV to keep doing its thing. I'll do a PR at some point hopefully today. It's too bad Unity doesn't have realtime time built into shaders but it was pretty simple based on this: https://feedback.unity3d.com/suggestions/realtime-shader-variable-like-

 

Hm, you know what, you actually might be right. Your TV doesn't happen to have a sharpness knob on it somewhere, does it? Because an actual sharpness filter, designed into the TV intentionally, absolutely could have those artifacts. And I'm not sure why I didn't think of it that way. Maybe I'll take a look at what a sharpness filter entails and try and implement one (I guess question is do I try and sharpen the signal, the decoded YIQ, or the converted RGB? maybe I'll experiment).

Ah, yeah I sorta took a shortcut there and forgot about delta time. Good catch.

EDIT: Might implement some sort of comb filter for sharpness, since apparently that was pretty common for TVs. Looks like I could write a simple comb filter which attempts to sharpen the Y component after decoding.

EDIT 2: Also just realized that the S-Video mode isn't doing color quantization, so I'll try and fix that too.

 

Alright, pushed some new changes to Github:

- I made that fix you pointed out, so it uses realtime since startup and is independent of timescale. No more frozen RF noise
- I've added a new feature to RF/Composite modes which applies a naive sharpen filter to the luma component after decoding. RF/Composite are back up to 3 passes now though, in order to implement the sharpen pass. You get a new slider in the inspector which is 'Luma Sharpness'. At 0, it's the original muddy/blurry signal. Increase the slider to have it attempt to sharpen the luma component. It not only sharpens the image, it introduces luma fringing as well (more noticeable the more you increase the sharpness). It isn't a comb filter like a lot of TVs would have used, but it should suffice for now until I can look into that subject further.

 

Oh no I've ruined performance for everyone! This is awesome though, I'll have to try it out ASAP!

EDIT: It looks great! I'll send up some screenshots at some point. I'm at work right now so I shouldn't play around too much

 

I promised a screenshot, so here you go. This is in RF mode.

 

Oh man that looks so good! XD

 

Yeah! Thanks for making it possible

There are a few things I'd still like, such as scanlines and the glowing effect CRTs have, but it works great for now!

Oh yeah, there's also a problem. I want to make the screen pixel perfect, so I got that all working for my render texture, but your effect works on the whole screen instead of just where the render texture is so it doesn't work well Would be nice to have an option to send in a render texture or at least a region of the screen.

 

Awesome! Your game looks so much like Crystalis.. which was a fave of mine as a kid!!


@PhobicGunner - Hope you're feeling better nowadays! Thanks for sharing your really amazing tools. If you do post it to the asset store, let us know. I'll buy it for sure

 

@indieNendoroid I am feeling better! Have been for several months now. It was definitely a relief to get that energy back.
I don't know if you saw the reply but it is on Github. I just added a link to the first post but here it is again: https://github.com/KillaMaaki/RetroTVFX

@ayrik It *is* designed to be an image effect... What about having the CRT camera render to a separate render texture and then blit THAT to the screen? (there's a blit function which lets you pass a rectangle for the quad in the GraphicsUtils class). So the order would be Game Camera -> virtual canvas render texture -> CRT Camera -> screen render texture -> blit to screen. Would that work? I'm still not entirely sure what it is you want to accomplish, but if I could get an example or some clarification I can probably figure something out.

 

Thanks @indieNendoroid there is a reason for that

@PhobicGunner the issue is that 224 is not very divisible, and so when I stretch it to fill the screen vertically it will scale at like 3.15x etc, so I scale the render texture so it's always a flat number like 2x, 3x, 4x and center it on the screen. Your suggestion would work, but it seems pretty intensive! Anyway, I'll look at it again at some point, probably when I get burned out from some other part of my game....

 

Hm, I'm not sure if that's an issue though? It would only matter most if all CRT effects are disabled, since that's the only case where virtual "canvas" pixels of the render texture map directly to monitor pixels, and even then at standard monitor resolutions I doubt anyone's going to notice at all. And with the CRT effects active, you lose pixel perfect anyway (even just by applying the tube distortion), which is the reason for using a virtual "canvas" render texture - within this render texture things are pixel perfect, and *then* it's blown up to screen size.

 

@ayrik, it might help you to add 16px of padding, so you get a height of 240 (I'm pretty sure this is what we got in PAL regions). It cleanly divides into 720 and 1200, though you'll run into the same scaling issue at 1080 (4.5x though, so it's still relatively clean).

Sharing a screenshot while I'm here, I really love the luma sharpener you added! It helps text out a considerable amount.


Showing off the difference between 0 sharpening and 1.5 sharpening. (I've blended frames to remove flicker artifacts)


There is one thing that's bothering me at the moment though... These diagonal lines appear in RF and Composite modes. They can be very noticeable at times, even with anti-flicker enabled. What's going on here?

 

@PhobicGunner, if it didn't bother me I wouldn't have brought it up. It's mostly noticeable when things are moving and you get some subpixel swimming. It's not something wrong with your image effect by any means.

@3noneTwo I've thought about it, and I still might by making it look like a TV like Gunmetal Arcadia.

The reality is I've still got a LOT to do on my game and this isn't a priority for me it's just the fun stuff

 

@3noneTwo those stripes are the result of the decoding stage. Essentially, at some point the signal is reduced down into a single 0-1 value which somehow has to represent a full YIQ space color. This is done by overlaying the chroma IQ signal on top of the luma signal using cosine and sine waves, respectively (they're 90 degrees out of phase with each other, which makes it possible to *mostly* separate them later on). Additionally, the phase is offset by 120 degrees per scanline, resulting in the diagonal bands.

If you were to decode this on the receiving end using the same cosine/sine filters (multiply value by cosine/sine waves) you'd get one pixel having a Q of zero, the next having an I of zero, the next having a Q of zero, etc. Which would result in EXTREMELY noticeable bands. So a box filter is used to average them together, allowing the color elements to bleed into neighboring pixels where that element would otherwise have been pure 0.0 and making those bands more subtle. They're still there, just less noticeable.

They're much more subtle in motion, of course, because the diagonal lines alternate on every frame, but still there. They're also made more noticeable if you use the sharpen feature, because it will exacerbate even small differences in color between them.

 

Thank you for that solid explanation! Makes it much easier to accept them, now that I know why it happens.

 

@ayrik - we really need a sequel to Crystalis! So I'm going to looking forward to your news in the future. It's a shame SNK stopped the series (and most games) altogether.

@PhobicGunner - Thanks for the link! Can't wait to see how you're going to use it in your game too!

 

No problem!
It's funny you should mention my game... I actually only just started on a little game prototype which I'm gonna try and see if I can do a "game in a month" thing (very small in scope, almost jam-style game with a functional prototype within 30 days). Actually the idea came from seeing the stuff @ayrik was doing with it plus watching gameplay of Gauntlet, plus an earlier jam game I started and never finished - so the overall concept is a NES-themed dungeon crawler in which up to four players hack and slash their way through a randomly generated dungeon. Haven't quite nailed down the combat yet but so far I'm thinking A for main attack and B for a MOBA-style special/"ult" which has to be charged up by killing opponents. The end goal would be for players to complete a set number of "floors" and compete for having the most gold by the end. Players would also have lives, and at the end of each floor gold can be exchanged for extra lives (even if the player has already run out of lives, as long as they have gold they could purchase more lives).

This is what the prototype looks like at the moment (the funny thing is all of the dungeon tiles and UI were originally just supposed to be quick placeholder art but I'm actually kinda proud of them):

 

Those sprites are seriously cute. The wall tiles are awesome, floor tiles are nice and simple - non-distracting.

 

@PhobicGunner That's looking great! I don't think anyone has attempted a NES guantlet successor yet. Brings back good old childhood memories. The main hero reminds me a bit of the fighter from FF1

BTW in case you wanted to know. I'm getting these error logs. Maybe it's just me? Should we be upgraded to unity 5.6?

 

The main character isn't quite final, actually. He's the one thing that wasn't drawn from scratch, actually he's based on a base which I found on OpenGameArt (I had to draw a number of frames myself for his attacks, his sword, and his death animation, but the idle/walk frames were already drawn though I did tweak his head too).

As for those errors, those are minor details that can be fixed! I haven't paid much attention to those two shaders at all, to be honest, instead focusing primarily on the CRT effect, so I apologize for the errors they're causing.

For that first error, in the shader I'm not sure which part is throwing the error (because that line number, somewhat unhelpfully, points to a closing bracket), but try finding where it assigns 'outpos' in the vertex shader, and then changing it to declare and use a new variable (name it like I don't know, 'outputPos'). So instead of:

Code (CSharp):

1.  
2. outpos = UnityObjectToClipPos(v.vertex);
3.  
4. float2 res = float2(_ResolutionX, _ResolutionY) * 0.5;
5. res /= outpos.w;
6.  
7. outpos.xy *= res;
8. outpos.xy = floor(outpos.xy);
9. outpos.xy /= res;

It becomes:

Code (CSharp):

1.  
2. float4 outputPos = UnityObjectToClipPos(v.vertex);
3.  
4. float2 res = float2(_ResolutionX, _ResolutionY) * 0.5;
5. res /= outputPos.w;
6.  
7. outputPos.xy *= res;
8. outputPos.xy = floor(outputPos.xy);
9. outputPos.xy /= res;
10.  
11. // then finally assign it to the output SV_POSITION variable.
12. outpos = outputPos;
13.  

Let me know if it fixes it. If it doesn't then the next thing to try is replacing the VPOS semantic in the fragment shader.

As for the other three errors they're all technically the same error, and this is much easier to fix. In PS1ObjectShader.shader, find the v2f structure and change col and pos so that instead of TEXCOORD1 and TEXCOORD2 they're TEXCOORD2 and TEXCOORD3.

 

Yeah I just deleted those files because I didn't need them!

@PhobicGunner you're game looks awesome
@indieNendoroid feel free to follow me @AyrikX on Twitter and I actually have a Discord server where I post builds: https://discord.gg/2TtgMWZ (you'll need to DM me to get in the testing group)

 

@PhobicGunner - Hopefully we can see more progress on your side. Always room for more NES nostalgia IMO

I'm a total newb when it comes to shaders. I'm wrapping my head around C# still. If those shaders have no relevance to the CRT shader, then I dodged a bullet. But thanks so much for sharing the solution. Sorry, which shaders were those errors even coming from?

BTW if you have a twitter, pls share it! I'd love to follow your progress.

@ayrik - twitter added! Looking forward to seeing how your Crystalis Sequel turns out! Also I'm on discord, but i think u need to give me permission. I can't PM you, I get this error.
"Your message could not be delivered because you don't share a server with the recipient or you disabled direct messages on your shared server, recipient is only accepting direct messages from friends, or you were blocked by the recipient."

 

@PhobicGunner Any updates on your game's progress? Would love to keep track on your project's progress and this super cool shaders use in it

 

Is anyone else having problems with this shader on Unity Ver 5.6.1f1?

 

I haven't updated to 5.6 so I haven't seen it. I did try 2017.1 and got some errors and a pink screen too.

 

Yeah Unity did some auto-upgrade crap to my shader and that auto-upgrade then subsequently broke in 5.6. When I find the time I'll go in and revert those and make a commit. In the meantime, anywhere the RetroTV.cginc file has a line like this:

Code (csharp):

1. = UnityStereoScreenSpaceUVAdjust(i.uv + realCoordOffs, _MainTex_ST);

Just replace that with this:

Code (csharp):

1. = i.uv + realCoordOffs;

 

Sweet, thanks @PhobicGunner!

 

@PhobicGunner Thanks alot~ You're awesome!

 

@PhobicGunner I've been using your amazing effect in a project of mine and I really like it. I can't, however, get the curved TV effect to happen. Did you do something special or are there specific assets from Github I should use?
Thanks in advance!

 

It should just work if you click the Enable TV Curvature toggle and then play with the slider. Is that not working for you?

 

Could you update this for Unity 2017? I'd love to give it a try.

Edit:
Nevermind, just saw your post, will give the fix a try.

 

I'll see about it. I've been extremely busy with a new job and it hasn't left time for much, but I'll see what I can do on the weekend.

 

I have a question, first of all the effect looks really good!

The aperture grille/shadow mask looks fine on my 1080p monitor but on other monitors with different aspect ratios it doesn't look right, is there a way to get the aperture grille tiling to look right at any resolutions?

1080p



1050p

 

By the way here's my setup, camera that follows the player around records to a 960x540 (16:9) render texture, camera that records the render texture outputs to monitor and has the CRT effect on it, CRT effect is set to stretch to display, looks perfect on a 1080p (16:9) monitor but not at other aspect ratios.

The issue appeared when running my game at 1600x900 on a 1680x1050 monitor, i've set Unity to only support 16:9 resolutions since my game is designed around that aspect ratio, it stretches to fill any screens beautifully.

When allowing other resolutions and picking 1680x1050 the pixel mask looks fine but my UI gets rendered outside the 16:9 game screen, that's why i'm forcing 16:9 resolutions, i also wouldn't want the pixel mask to look wrong when people don't pick their native resolutions.

Is there a way around that?

 

Hm, try switching the texture used for the aperture mask to Bilinear filtering. It won't fix all of the artifacts but they may be much less noticeable.
The primary issue is in trying to sample a texture with very high frequency pixel content (in this case the pixel mask image) at a resolution which is not an exact multiple of that texture.

 

Yeah it's already set to bilinear, the thing is it will display fine at 900p on an 1080p monitor, but not on a 1050p monitor, why? Isn't it outputting the same thing? It looks to me as if the pixel mask is being tiled across the whole 1680x1050 screen, then scaled to fit the 1600x900 output resolution causing artifacts but i could be wrong, i'm not very good with shaders.

The same issue happens if i play the game in 1050p on my 1080p monitor, the game has to be played in a resolution that matches the aspect ratio of the native resolution of the monitor or else the pixel mask doesn't look right.

Anyways, i'm loving the composite effect even without the pixel mask, gives that analogue feel without being too intense, might stick with that, thank you for sharing!

 

The thing about 960x540 resolution is that the aperture mask texture is 3x3, so to properly have an rgb triplet of that texture match directly to one pixel of that 960x540 buffer with zero artifacts, you'd actually need to render it at three times that both horizontally and vertically - so it would technically require a target resolution of 2880 x 1620 (!) to not have any texture sampling artifacts. You're rendering at much lower, so the texel density of the aperture mask is *much* higher than actual screen pixels. Because of this, the actual artifacts you get and how bad it looks will *highly* depend on the resolution you're using (basically being a case of the classic "salt and pepper" effect when you don't use mipmaps - which I'm not, because in this case mipmaps turn the texture into a single weird-looking color fill across the screen, which is even worse)
My guess is that it was actually rendering at the monitor resolution and not at 900p - otherwise the artifacts should have for the most part been consistent.
Note that the mask texture does not take resolution into account whatsoever - it just renders at however many repeats you specify in the inspector. Beyond that it's just a straight texture sample, nothing fancy going on in the shader.

 

So i've tried another CRT shader and had the same issue, decided to make some changes to my game and support every possible resolutions, my 960x540 render texture stretches to fit any resolutions nicely leaving some black bars to fill the rest of the screen, both CRT shaders now displays properly since it is rendering at the native resolution, it will look odd if the player decided to switch to a weird resolution but oh well.

 

@KhenaB the trick is to render your effect to a render texture (render-texture-ception) of a desired size and stretch that. You can procedurally decide the desired size based on the resolution and what resolutions you know look good.

 

Well, i'm rendering the effect on the camera that is recording my game on a rendertexture, isn't that pretty much the same?

Anyways the effect looks fine now, the only issue is that it's just too much of a performance hit, on an integrated graphics device it literally halves the fps, form 60 to 30.

 

Hey all! Sorry for reviving a dead post. Hoping to get some help rather quickly.

Here is my issue:
I downloaded the github project to my local machine and imported the `Assets` folder into my scene.
I attached the `CRT Effect` script onto my main camera and test the game but it is not changing the visuals in anyway.
I have also tried attaching the script to my canvas and messing around with it with no results.

So I guess I am just looking for some help as to how I get something like this properly running in my game?

Additional information:
Unity 2017.1.1f1 Personal (64bit)
2D Environment.

Let me know if anyone is willing to look at this with me.

 

Am I allowed to use this in a game I plan to sell?