A shader for sharp pixels (2017) | Hacker News Reader

A shader for sharp pixels (2017)

gamingprojects.wordpress.com

49 pointstosh13 comments

Would be interesting to see a poll on which is worse - slightly blurry "square" pixels, or slightly non-square "perfect" pixels. At a glance, I immediately noticed how blurry the shader's pixels are, but it wasn't until reading this blog post that I even thought about the problem of fractional scaling for pixel art games.

Worth pointing out that most SNES games had a vertical resolution of 224 pixels. At that size an upscale for a 1080p screen results in a maximum pixel irregularity of 1/5 (most pixels are 5x5 with the occasional 4x5 and 4x4 pixels thrown in). That might be close to negligible on a moderately high DPI screen.

Interesting side note about modern pixel art games: Celeste has a native resolution of 320x180. That's almost exactly the same number of pixels (or scan lines) as a typical SNES game, but the number is chosen to divide evenly into 1920x1080 (and 1280x720), meaning that you can get perfect pixels on common modern resolutions without fractional scaling. Kind of brilliant, actually.

It might also be worth noting that the SNES used non-square pixels. CRTs didn't really have a discrete horizontal resolution, so they could stretch the 8:7 image about 17% horizontally to 4:3. In other words, each pixel had a 7:6 aspect ratio. On an LCD, it's difficult to do this and still get all the pixels in the grid without any blurring or wobble. Even if you choose the vertical resolution as an exact multiple of 224, the horizontal resolution often won't be quite right. I believe 896x672 is the smallest resolution that will work exactly (for displaying 256x224 with 7:6 pixels).

Great point, thanks!

A fixed background might look fine with some pixels being smaller, but if you scroll it around you change which pixels are smaller which is very noticeable at a 4:5 ratio.

Upscaling retro content should NOT be sharp for, quoting the link, "achieve optimum image quality". These old games were designed on CRTs were they looked completely different than what they do if displayed on an LCD, except for handheld games. And even those often look better on CRTs due to the fact that the graphic artist didn't work on the device directly, for obvious reasons.

If you're not convinced, this twitter account makes great comparisons : https://twitter.com/CRTpixels In my opinion, even the most basic scanline shader is worth it.

Oh, also, pixels were often NOT square at the time. angry look at capcom

> except for handheld games

A distinction I didn't appreciate until the Analogue Pocket's impressive Game Boy screen emulation drew my attention to it. I'm not aware of any GB emulators that do the same thing but I'd love to be mistaken.

https://vgdensetsu.tumblr.com/post/179656817318/designing-2d... is an interesting article that covers this amongst quite a list of other things.

Search down the article for the “The preview function” section which includes an image perfectly illustrating the point¹, showing how much better things designed with CRTs in mind look on CRTs, and discusses the way many designers worked: a high def screen for working on and a more bog-standard CRT to preview the results on as that is what the players would be viewing the game on.

A gamer friend of mine who has recently had a retro period has a converter that sits between his emulator box and TV and does a good job of adding back in CRT artefacts. No doubt some emulation solutions do this in software out of the box.

----

[1] https://64.media.tumblr.com/8d2cf7adae94fde97d1a8c9cf78a46a2... for a direct link to that image, assuming it isn't referrer protected

What disappoints me about this shader is that in general it adds antialiasing between almost every scanline and column. When you need to upscale by a small amount like 1.8x that's a lot of blur, over 3/4 of all the pixels on the screen! Another alternative would be halfway between this approach and the point-filtered scaling, by allowing somewhat non-square pixels so that antialiasing is used less.

E.g. point-filtered 1.727x scaling produces pixels sized 2, 2, 2, 1, 2, 2, 2, 1, 2, 2, 1, ... (horrid!)

But you could instead create pixels sized 2, 2, 1.5, 1.5, 2, 2, 1.5, 1.5, 2, 1.5, 1.5, ...

I have seen this used and think it's fairly unintrusive, but would still suffer some "shimmering"/"pixel wobble" when something is moving across the screen very slowly or the screen scrolls slowly.

What about not scaling to the full size and leaving [black] bars at the top and bottom? Most of the old games will be 4:3 anyway and already leave you with [black] bars on the left and right on a 16:9 or 16:10 screens. Maybe one could even make use of the empty areas and put something useful there, maybe darkened while playing in order to not distract. Or just have a decorative frame.

A summary of other techniques to achieve similar results is provided below:

- https://filthypants.blogspot.com/2017/01/shaders-for-sharpes...

- https://jorenjoestar.github.io/post/pixel_art_filtering/

This isn't the first time I've seen work in this area - the author of the article is in good company. Ian Bogost over saw a group of students to add CRT simulation (phosphor glow, color bleed, etc.) to the Atari 2600 emulator, Stella.

http://bogost.com/games/a_television_simulator/

His article on the effort is pretty high level with no real meaty-details. Probably would have to look at the source code for Stella for that.

I wonder if you could improve perceived sharpness by adding sinc-like ringing borders around blended pixel edges, or if the average LCD pixel density is low enough this would produce visible artifacts. Note that this will not work for edges where one or both sides is close to full-scale black or white, since you can't produce darker than black (physically), or brighter than full-scale white (without HDR).

Would it be possible to use a shader of some sort to make antialised fonts look better on GTK?

Reply on news.ycombinator.com