20140819

Scanlines

Link to the Shadertoy example.


Growing up in the era of the CRT "CGA" Arcade Monitor was just awesome. Roughly 320x240 or lower resolution at 60 Hz with a low persistence display. Mix that with stunning pixel art. One of the core reasons I got into the graphics industry.

Built the above Shadertoy example to show what I personally like in attempting to simulate that old look and feel on modern LCD displays. The human mind is exceptionally good at filling in hidden visual information. The dark gaps between scanlines enable the mind to reconstruct a better image than what is actually there. The right most panel adds a quick attempt at a shadow mask. It is nearly impossible to do a good job simulating that because the LCD cannot get bright enough. The compromise in the shader example is to rotate the mask 90 degrees to reduce chromatic aberration. The mask could definitely be improved, but this is a great place to start...

Feel free to use/modify the shader. Hopefully I'll get lucky and have the option to turn on the vintage scanline look when I play those soon to be released games with awesome pixel art!

17 comments:

  1. Wow, just wow. I've seen some recently developed crt-shaders that are great, but this one I like the most. I guess this shader can be easily be used with tools like GeDoSaTo and SweetFX, that support .fx shaders?

    Curious what the 'soon to be released games with awesome pixel art' are :)

    ReplyDelete
    Replies
    1. Thanks. A twitter comment from the makers of http://www.chasmgame.com/ inspired this shader. So that's one of the "soon to be released games with awesome pixel art". The http://pixelartus.com/ site also posts shots from games with great pixel art.

      Anyone is free to grab this shader and drop it into other tools like SweetFX. Source is up on shadertoy (click the photo above).

      BTW, the shader even works great on high resolution VGA CRTs when attempting to emulate the older lower res TVs.

      Delete
    2. Thanks for the links, love the pixel art and games!

      Delete
  2. This shader is absolutely fantastic. You should work with MAMEdev to get this into MAME as the default shader. It's a game changer. It's far superior to MAME's current HLSL implementation.

    Someone ported your shader to work with SDLMAME, but Windows MAME is where it would have the biggest impact. Please make this happen!

    ReplyDelete
    Replies
    1. You have a link for the SDL MAME implementation?

      Delete
    2. There isn't an official SDLMAME/SDLMESS version or anything. But since they provide a way to run your own shaders, there are some floating around message boards. There is an NTSC shader by MooglyGuy on shadertoy that R.Belmont (both are mame devs) ported to their system. And there is a CRT shader called CRT-geom that works with a lot of emulators.

      Your shader, with a couple of simple changes, was posted here: http://www.mameworld.info/ubbthreads/showthreaded.php?Cat=&Number=330562&page=0&view=expanded&sb=5&o=&fpart=1&vc=1

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. http://filthypants.blogspot.com/2012/07/customizing-cgwgs-crt-pixel-shader.html

    Check out the halation on Metroid. Image looks soft without looking muddy. I really want this to happen.

    ReplyDelete
    Replies
    1. I did another shader with halation (I called it bloom for lack of a better word at the time):

      https://www.shadertoy.com/view/MsjXzh

      Delete
  6. tim there's an emulator to try your shader? thx!

    ReplyDelete
    Replies
    1. A link in a post above references a thread where some one added it to SDLMAME. I'm not sure who else is using it.

      Delete
  7. Can you please port this shader to HLSL? I think it'd get a lot more usage if you did. Most Windows programs (SweetFX, gedosato, and so on) work with Direct3D, so a GLSL shader won't work with them.

    ReplyDelete
    Replies
    1. Unfortunately I don't have any Windows machine at home, so nothing to try HLSL. The best I could do is guess at what the HLSL would be, but no way to test it. In any case someone with HLSL knowledge would need to be on the implementation end. The port is really easy however. If I get some time I will attempt to make it easier to port (setup stuff on defines like FXAA was). Right now I've been quite busy.

      Delete
    2. If you get the time to put something together, I'd gladly test it for you, and I'm sure many others would, too. As a GLSL implementation, this really isn't going to get that much usage, unfortunately. Being able to apply it to every Direct3D 9 game would give it a ton of applications.

      Delete
  8. Javad Kouchakzadeh ported your shader to HLSL, and I hooked I added it to the post.fx of GedoSato.It almost works, but I think there are some problems with the texture coordinates. Can someone who knows more about this take a look at it? It's almost there.

    http://pastebin.com/rVLXJmAm
    http://blog.metaclassofnil.com/?tag=gedosato

    The pastebin link is a modified post.fx that GedoSato uses.

    The thing I like about this is that you can just apply any shader to any D3D program and disable HLSL.

    It's AperatureGrillePostProcessing, and it's flagged by USE_ADVANCED_CRT == 1. There's something wrong, though, because the shadowmask and scanlines are slightly misaligned.

    ReplyDelete
    Replies
    1. If this is DX9, the following might be an issue: DX9 has a different pixel offset than DX10+ and GL. DX10+/GL interpolates at the pixel center for the output framebuffer, DX9 interpolates at the corner.

      Delete