Recreating CRTs - NFGworld!

Reply · Quote

(Administrator) 2009-04-21, 22:42 #1

User title: Top Chaos Wrangler
Member since Sep 2007 · 1747 posts · Location: Brisbane, AU
Group memberships: Administrators, Members

Show profile ·

Link to this post

This thread was split from this dicussion about aspect ratios and fixed-res screens.

I put together some comparison snaps of scaling options in the GENS (Sega Genesis / MegaDrive) emulator. These are 2x-pixels scaled up in six different methods: pixel doubled, scanlines (50% brightness), and four different resampling methods. These methods are detailed (often excruciatingly) over on Wikipedia.

[Image: /grafx/games/ASPECT-flinks-1.png]

For your viewing comparison, I've doubled these images up again, so you can see how the scaling algorithms affect the image. As you can see the resampling methods are quite different: the interpolated system essentially blurs the images, where the SAI and SuperEagle try to knock off corners and create diagonals where none exist.

[Image: /grafx/games/ASPECT-flinks-2.png]

There are other methods available, and some emulators go to great lengths to create a pleasing image for the player. In lieu of perfection, my favourite method is hard-pixel scaling, 'cause it suggests the most clarity. Sometimes though, you want to go the extra mile. The SNK and Capcom emulator Kawaks will even render the game using a multi-coloured faux-CRT shadow-mask filter that is so extreme you can't help but love it:

[Image: /grafx/games/ASPECT-haohmaru.png]

Here's another shot, from Capcom's Ghouls n Ghosts, showing CRT emulation, and raw pixel doubling. For comparison, the last shot is my 1/3 scanline method, which I gotta say looks pretty sweet. =D

[Image: /grafx/games/ASPECT-ghouls-2.png]

Finally, here's something I just tried and immediately fell in love with. First, the lesson: on the old CRTs, a brighter signal (more power to the firehose) would result in a wider scanning beam, which in turn would create an illuminated line that was thicker, and would encroach on the dark spaces (scanlines) between the beams.

Here's my attempt to emulate that:

[Image: /grafx/games/ASPECT-ghouls-3.png]

Man, how awesome does that look? =D Speaking of silly modifications to game graphics... I made some crazy tweaks to Yoshi's Island the other day...

Edit: greets to Kotaku, gizmodo, and gonintendo readers, and to everyone else... Especially you!

Edit 2: My wife just told me a story about how, when telling her friends about my pixel art book, they didn't quite get what a pixel was. She explained a pixel to be the square, pointy things that mario is made out of. They almost got it, but couldn't get the idea of a whole book about it. "What does it discuss? How 'this top-right pixel on Mario's hat is extra sharp' or something?"

[Image: http://nfggames.com/system/arcade/special.php/b-d/bp-5/y-kof97/z-10/x-What?/.png]

This post was edited 3 times, last on 2009-04-24, 14:54 by NFG.
Edit reason: Added extra edits.

Reply · Quote

(Guest) 2009-04-21, 22:57 #2

No profile available.

Link to this post

Subject: The HDTV Problem

Hey NFG... I'm personally running into exactly these issues right now as I'm in the middle of creating a script that you can run to take an install of Yellow Dog Linux 6.1 and make it into an emulation machine with a nice frontend. (I used your Arcade fontmaker to help design the frontend backgrounds.) I'm running headlong into these sorts of limitations and came to the same conclusions. I also have the added issue that PS3 Linux has no sort of 3d acceleration or OpenGL, so simply running games at fullscreen is just too slow. I run the emulators at the original resolution of the console (I have 256x240 for NES, hmmm...) I have to run a scaler program that runs on one of the SPU units which will scale the image... but I can only do so by integers (2x, 3x, 4x, etc...) which is good because I get good crisp sprites that do not have the scaling issues you're seeing, even if it's not exactly fullscreen.

I run the CPS1/2 games in Pixel aspect ratio which makes them look like they were originally widescreen games. Works for me.

Reply · Quote

(Administrator) 2009-04-21, 23:12 #3

User title: Top Chaos Wrangler
Member since Sep 2007 · 1747 posts · Location: Brisbane, AU
Group memberships: Administrators, Members

Show profile ·

Link to this post

ZeroJay: that's pretty awesome, actually. I wonder, have you tried to implement any of the scaling mechanisms I mentioned above? Wikipedia's got the math you need to put that together... Might not be too taxing, especially if you've got spare CPUs. (And hey, according to Sony and Toshiba, putting another PS3 anywhere near the first one magically links the CELLs together, or something, right?

---

Also, if anyone notices any errors in this page, please either reply here, or send me a note using this fabulous form.

Reply · Quote

(Guest) 2009-04-22, 00:20 #4

No profile available.

Link to this post

Subject: The HDTV Problem

I'm not actually a programmer. I'm basically a long-time Linux user that's just put pieces other people have made together into a package, really.

There's a version of the scaler program that I'm using which implements some of the scaling mechanisms mentioned there (nearest neighbor x2 x3 x4, scale2x 3x 4x, and 2xSal) and even allows you to do two passes (2xSal and scale2x after if you want a 4x image for example). The main reason why I'm not using is because I'm a fan of seeing pixels as sharp as they should be but also because when running it alongside Mednafen (my emulator of choice for a few systems) seems to cause Mednafen to run off into the weeds every so often... and the last thing I want is to have people install this and have tons of issues.

If you want to take a look at how I used your fontmaker (which is amazing and a huge help, by the way), you can take a look at the following screenshots:

http://www.zerojay.com/zerogame/zerogame1080pnes.png
http://www.zerojay.com/zerogame/zerogame1080pgenesis.png
http://www.zerojay.com/zerogame/zerogame1080psnes.png

http://www.youtube.com/watch?v=RQPG4X5_Ato

I plan to release in a few weeks.

Reply · Quote

2009-04-22, 10:07 #5

Member since Apr 2009 · 15 posts
Group memberships: Citizens, Members

Show profile ·

Link to this post

Subject: Phosphor simulation

Hey, Lawrence!

I never really did anything with this, but back in '03 (just before joining Insert Credit, actually) I was pondering a future where displays have 4k+ resolutions, each pixel is a pure tone with no sub-pixel elements, and the color space is floating point HDR. All of the same upscaling and color space issues of 2003 were still going to exist, but now be that much worse. So then I though about how CRTs do their thing, and dorked around in Photoshop to try to recreate the effect. Result:

[Image: http://psiga.mp3.googlepages.com/PhosphorSimTest1.jpg]

[Image: http://psiga.mp3.googlepages.com/PhosphorSimTest1.jpg]

It was much less than perfect, but really said to me that the concept could work. The process that I used in Photoshop is too inefficient, unreliable, and doesn't do everything that I want, so I did not pursue it from there.

Something I'd like to see is a totally GPU-driven simulator that interprets pixels as packs of glowing oblong R, G, and B spots in space. These spots would glow, expanding outward relative to their sub-pixel shape and brightness, and like proper light, the halation would be additive. Scanlines would be easy to simulate by changing the spacing of the spots; widened aspect ratios like in your Splatterhouse post would be easy to simulate by changing the shape of the spots; screen curvature would be easy to simulate by dispersing the spots along bent rows.

So many aspects of that would be easy to parameterize, and it would be both resolution and colorspace independent.

Toss in something like blargg's NTSC filter for that antique patina, and you're all set.

This post was edited on 2009-04-24, 07:41 by NFG.

Reply · Quote

(Guest) 2009-04-22, 18:20 #6

No profile available.

Link to this post

Subject: GLSL Monitor->CRT filter

Hi,
I was trying to develop an algorithm that would apply as a filter over normal RGB image and turn it to look like it is CRT displayed.
First test solution was:
1. switch RGB to YUV colorspace (the normal TV colorspace)
2. separate signals
3. resize down 2x U and V signals
4. bilinearly size them back
5. combine back into YUV image
6. convert back to RGB

It was a first test to see if I'm going right way, and I would latter add more errors (chroma shift, for ex.), but it didn't really work well. Final idea was to rewrite algorithm (once I get it right) to GLSL shader that could be applied via WinUAE (amiga emulator), zSnes or whatever else.

I see you guys do some pretty amazing work finding out how to reproduce errors. Forgive my lack of time to read whole forum, but I can see that @psiga made some amazing reproducing with photoshop.
Is it possible that you could lay down a list of steps needed to reproduce that image?
It might be possible (with few tradeoffs) to reproduce it realtime with GPU shader, and that's exactly what I'm looking for.

Reply · Quote

(Guest) 2009-04-22, 19:21 #7

No profile available.

Link to this post

Subject: NeoGeo

Yes, I have the same problem with my Neo (and a lot of PCBs) on my widescreen CRT... It's just a tiny bit off-spec, and the TV chokes, rolling the image every few seconds as it loses sync. It sucks.

This is the RGB to HDMI converter i mentioned, and it fixed about 95% of the jumping signal issue: http://www.cypconverters.com.au/video-scalers/cs-720phd.html

It smooths the jumping to a slight "vibration" that makes all games playable at least. I got mine for 55$ shipped so its not a bad investment. It´s a rather painless option for playing the Neo(and other consoles too) easily on a new HDTV or a Projector.

The converter is also lag free, so no worry on that.

Reply · Quote

2009-04-22, 22:57 #8

Member since Apr 2009 · 15 posts
Group memberships: Citizens, Members

Show profile ·

Link to this post

In reply to post #6
Subject: Phosphor simulation trick

Heh, the Google Pages space that I am hosting that image on has had its bandwidth thoroughly exceeded. This thread must have gotten even more popular than before.

@Deus Ex Machina: It's been nearly six years since I did it, so the exact method has been lost. I went in now and tried it again from the top, repeating the steps that I remember. The screenshot is here, but since my bandwidth is shot, I don't expect it to work for a while. http://psiga.mp3.googlepages.com/MotW-phosphorsim-1.jpg

Steps (as performed in Photoshop; algorithmic methods could be optimized liberally):
3x increase image size, no interpolation
Delete column of two pixels width from red channel (oxx), repeating every 3 pixels
Repeat for green, moving over one pixel (xox)
Repeat for blue, moving over one last (xxo)
Delete row of one pixel width from all channels, repeating every 3 pixels

At this point a single sub-pixel for the red channel should look like:
oxx
oxx
xxx

Copy this image 3x, applying Linear Dodge layer blending to the top 2 copies.
Gaussian blur top image (approx 0.9)
Gaussian blur middle image (approx 0.9)
Gaussian blur bottom image (approx 3.0)
Increase brightness by approx 20 (in legacy mode of Photoshop, for the more rudimentary algorithm)
Increase contrast by approx 45 (also legacy mode)

That should do it. Parameterizing the gaussian blur, brightness, and contrast will help to tweak the image. Downsampling the final result often makes it look better — that Seiken Densetsu 3 shot was processed at 3x and then downsampled to 2x, however I left the new MotW shot at 3x.

This method is really only a prototype, and my inner perfectionist is throwing interrobangs all over the place, but I'll just stop typing and clicky the button now.

This post was edited on 2009-04-24, 07:41 by NFG.

Reply · Quote

2009-04-22, 23:01 #9

Member since Apr 2009 · 15 posts
Group memberships: Citizens, Members

Show profile ·

Link to this post

Oup. When I said "Delete row of one pixel width from all channels, repeating every 3 pixels" I should have said one pixel height. I'm sure the ascii illustration makes it clear enough, but wanted to clarify anyhow.

This post was edited on 2009-04-24, 07:41 by NFG.

Reply · Quote

2009-04-22, 23:24 #10

Member since Apr 2009 · 15 posts
Group memberships: Citizens, Members

Show profile ·

Link to this post

Subject: Phosphor simulation

Oh hey, here's an example of my method on the GnG image that Lawrence used (I presume that my bandwidth is still shot, but whatever):

[Image: http://psiga.mp3.googlepages.com/GandG-phosphorsim.jpg]

[Image: http://psiga.mp3.googlepages.com/GandG-phosphorsim.jpg]

For reference, here's his:
[Image: http://nfgworld.com/grafx/games/ASPECT-ghouls-3.png]

Big differences are that I am taking the RGB subpixels into account, and he is using some method to make bright spots glow more. If we could meet in between somehow, that would be nice.

This post was edited on 2009-04-24, 07:40 by NFG.

Reply · Quote

2009-04-23, 17:02 #11

Member since Apr 2009 · 15 posts
Group memberships: Citizens, Members

Show profile ·

Link to this post

The more I play with this in Photoshop, the more it bugs me. Sometimes the brightness needs to be 25, sometimes it needs to be 0; sometimes contrast needs to be 45, and sometimes it needs to be 66. I think it varies too much to be a set-it-and-forget-it option. Then I don't like how the gaussian blur is ignorant of brightness, so everything looks hazy even if it's dark and shouldn't give off any halation. Maybe I'm just being a perfectionist about it.

Another dabbling example:

[Image: http://img23.imageshack.us/img23/1913/phossimgen3.jpg]

[Image: http://img23.imageshack.us/img23/1913/phossimgen3.jpg]

For reference:
[Image: http://nfgworld.com/grafx/games/ASPECT-scanlines-1.png]

This post was edited on 2009-04-24, 07:40 by NFG.

Reply · Quote

(Administrator) 2009-04-23, 20:32 #12

User title: Top Chaos Wrangler
Member since Sep 2007 · 1747 posts · Location: Brisbane, AU
Group memberships: Administrators, Members

Show profile ·

Link to this post

I like your work there, psiga. I can save you a ton of time though: Get a camera and take a slightly out of focus photo of your LCD screen. If you use a fisheye lens you can even duplicate the screen curvature. =)

That's really my only complaint about your efforts: it's geometrically too perfect. The blur and scanlines are nearly perfect.

As for my image:

I made that by adding the 1/3 scanlines, duplicating the layer, adding a 2.0 gaussian blur to the new layer, and changing the layer type to Lighten. I'm not sure the photoshop equivalent, I used Paintshop Pro to do it.

Reply · Quote

(Guest) 2009-04-23, 23:38 #13

No profile available.

Link to this post

@psiga
Hello, thanks a lot for an answer!!

I will try to reproduce the steps with a small algorithm in a static image conversion program, just to make sure if I get everything right. Do you think that brightness and contrast might have been some variables dependent on overall image brightness and contrast?

I will continue to post my progress on this forum is that OK?

Reply · Quote

2009-04-24, 00:59 #14

Member since Apr 2009 · 15 posts
Group memberships: Citizens, Members

Show profile ·

Link to this post

In reply to post #12

Quote by "NFG":
That's really my only complaint about your efforts: it's geometrically too perfect. The blur and scanlines are nearly perfect.

Exactly. Ideally, the glow needs to vary depending on the brightness of each subpixel. I can't figure out how to get Photoshop to do that properly. It could be done algorithmically, but I'm not sure specifically how.

Even with your method, I'm getting hung up on the smear of gaussian blur and the fact that 'lighten' is not the same as the brightening effect of more photons emitting from a CRT. Escaping that digitized sameness is a bitch.

Quote by "Deus Ex Machina":
Do you think that brightness and contrast might have been some variables dependent on overall image brightness and contrast?

Probably, yes. I am not familiar with the process of gauging those values, so I wouldn't be able to suggest numbers, but maybe this example might help?

Outdoors scene is overall bright, so 20 brightness and 45 contrast results in a vivid but balanced image.

[Image: http://img5.imageshack.us/img5/4138/ffvitown.th.png]

[Image: http://img6.imageshack.us/img6/165/phossimffvi.th.jpg]

Indoors scene is overall dim, so 20/45 results in a washed out image.

[Image: http://img144.imageshack.us/img144/832/710395finalfantasyiii00.th.png]

[Image: http://img106.imageshack.us/img106/6520/phossimffvi2.th.jpg]

I'll keep checking this thread as you work on the project. We'll probably have to solve some problems along the way. No matter what happens, thanks for giving it a try!

This post was edited 2 times, last on 2009-04-24, 12:10 by Psiga.

Reply · Quote

(Administrator) 2009-04-24, 07:40 #15

User title: Top Chaos Wrangler
Member since Sep 2007 · 1747 posts · Location: Brisbane, AU
Group memberships: Administrators, Members

Show profile ·

Link to this post

While trying to replicate the GnG image on other games, I found a rather significant problem with it: the scanlines tend to etch horizontally, so that a darg space transitioning to a brighter one will have very dark scanlines where you don't want any. You're certainly right that the effect we're after would benefit from a brightness-sensitive blur, rather than an all-over one...

This post was edited on 2009-04-24, 11:44 by NFG.