Some Shaders I've Been Working On

“Whatever you now find weird, ugly, uncomfortable and nasty about a new medium will surely become its signature. CD distortion, the jitteriness of digital video, the crap sound of 8-bit - all of these will be cherished and emulated as soon as they can be avoided. It’s the sound of failure: so much modern art is the sound of things going out of control, of a medium pushing to its limits and breaking apart. ... The excitement of grainy film, of bleached-out black and white, is the excitement of witnessing events too momentous for the medium assigned to record them.” -Brian Eno 

I've been working on some shaders lately. 

The first one I want to talk about was inspired by some posts on the RetroArch/libretro subreddit, where a guy was using overlays (I think? might have just been photoshops) to make some really dark images of Game Boy Color games that mimicked the experience of using their technically awful front-lit LCD screens.

I never owned a GBC, and only played on a GBA very briefly in its day, but the enthusiastic response to those shots was really something, and it highlighted a significant unmet need that I had never really considered before. So, I borrowed a friend's GBA 001 and set to work on it, and here's what I came up with (as always, click to embiggen):

Rather than reinvent several wheels, I'm leaning on fishku's "authentic-gbc" LCD shader, which includes the characteristic little dog-ear on each subpixel, as well as Matt Akins lovely "pixel transparency" shader, which makes the white pixels appear transparent and adds a little drop shadow to them.

My addition darkens the image (adjustable how dark you want the ambient light), desaturates it, and then adds a point light source, the focus of which you can adjust (diffuse, like an overhead light, or more focused like a lamp or even a "worm" light attachment) and move around (by default, it's in the upper-right corner, like an overhead light). Direct light washes out whatever is under it, but indirect light fades off quickly, and some of the colors get inverted in the semi-lit area.

I also added in a "shmutz" effect using a dirty glass texture, which only really shows up when it's directly lit, along with a slight green tint that those old LCDs had under direct illumination.

There's also a "Nighttime Car Mode," which makes a bright light sweep across the screen every few seconds to simulate a car passing under streetlights in the night, which is a situation people seem to have a perverse nostalgia for.

While I was working on my shader, Matt Akins was exploring another idea that had been teased by that same redditor, of showing a rainbow pattern at certain angles due to a quirk of the GBC LCD's internal structure. He added this functionality to his pixel transparency shader, and he also submitted a patch to RetroArch to enable gyro and accelerometer control hooks to the shader backend. I was planning to work on this, too, but I'm thankful that Mr. Akins got to it first because he did a much better job than I would have.

With that in place, I added an option to control the light source using gyro control, which makes for a very uncanny gaming experience, tilting a controller to shine a virtual light source on a virtual crappy screen, but then seeing hints of rainbowing as you tilt it. Fun stuff.

I also made a modification of the 'gbc' console-border preset, which looks pretty nice, but the light source only affects the screen and would have required a lot of invasive changes to work on the border, too, so I didn't think it was worth the trouble. Ultimately, it's not my favorite, but it still works well for people who really want a border.

The other shader I've been working on is a CRT shader. Yes, another one, because there aren't enough already. This one focuses on monochrome displays, which are usually just an afterthought in CRT shaders, and monochrome modes don't usually exhibit any special characteristics vs the color-full settings. This is unfortunate, I think, because monochrome CRTs are cool devices that ruled the land for decades, even after color TVs were commonplace.

First off, monochrome CRTs don't have subpixels or masks. The entire screen surface is coated with a layer of powdered phosphor material that glows when the electron gun scans over it. Having this direct view of the beam makes the dynamic width very visible, and the beam itself has a bit of ... life to it.

I tried to capture that, and, as a result, static screenshots aren't going to look very good or capture the "magic," so I recommend trying the presets live / in person, if you have the inclination. Nevertheless, here's what it looks like:

That's the 'black and white tv' preset, which is intentionally pretty blurry, horizontally. Monochrome computer monitors could be quite sharp, though, and there's an "apple-monitor-ii" preset that handles that better:

In addition to the beam perturbations, this preset also has the scanline brightness cranked up really high, which brings in some general glow visible around the numbers, and it also makes some nice trails anywhere there's movement (courtesy of the 'glow-trails' shaders I made several years ago): 

Both of these presets include my analog service menu shader, which lets you adjust lots of physical CRT parameters, like h- and v-size, pincushioning, etc., as well as a version of crt-royale's geometry control that I isolated just for this. It allows you to tilt the monitor up/down/left/right and control the radius of its curvature, among other tweaks. I picked a really exaggerated, low-radius curvature, since these displays were often very small (sub-15 inches), but I used the pincushion control to flatten the middle out some, just as you would on such a small display.

These presets also leverage blurbusters' and Timothy Lottes' crt-beam-simulator shader whenever shader subframes are enabled, and, in addition to the motion clarity improvements, I think the flicker it introduces provides another level of verisimilitude that I wasn't able to capture properly in still shots.

The monoCRT shader also includes several different monochrome phosphor colors:

Just be sure to use integer scaling with this shader, since the scanlines look like crap otherwise. As usual, it looks better when it has more pixels to work with, and I think 5x scale is a minimum, making integer overscale on the Y axis a great way to experience these on 1080p displays. 

So that's what I've got. The 'frontlit-reflective' shader is available in handhelds/shaders, and monoCRT is available in crt/shaders, if you want to use them in your own presets. Most of the presets I've shown here (authentic-gbc-frontlit, black-and-white-tv, and apple-monitor-ii) are available in the 'presets' directory. Aside from the beam sim effect and the gyro controls, which aren't widely supported outside of RetroArch, these shaders should work fine anywhere you can load slang shaders (e.g., ares, snes9x, OpenEmu, etc.).

Customizing Harlequin's Gameboy Cg Pixel Shader

CRT shaders are great, but they're not always appropriate for every console, seeing as handhelds' tiny LCD screens have very different characteristics, which in turn shaped the way the games for those consoles were designed. The original Gameboy handheld had these characteristics in spades, including a slow response time (manifesting as motion blur), very low resolution and a distinctive 2-color palette that ranged from yellow to green. Emulators typically represent this color palette as black and white, which can be jarring for people who spent a lot of time with the system.

Thankfully, a nice fellow named Harlequin has come to the rescue with a really great pixel shader for RetroArch that does for Gameboy displays what cgwg's CRT shader did for those displays. Like cgwg's CRT shader, Harlequin's Gameboy shader reproduces a lot of different aspects of the Gameboy display and presents a number of options to the user that are easy to modify with just a simple text editor (I use/prefer Notepad++ but almost anything will work). Unlike cgwg's, though, the Gameboy shader also uses some lookup textures (LUT) that require no text editing and can be modified using an image editor such as Photoshop or GIMP. Harlequin has included several example LUTs and I'll cover a few in screenshots.

As usual, all shots are at 4x (which is a bit small for Gameboy resolution, but oh well) and you can click the thumbnails to embiggen. All shots were taken via RetroArch with the Gambatte core unless stated otherwise.

First, here's an unfiltered shot for comparison:

And here's one of Harlequin's Gameboy shader with default parameters:

First, I'll cover the LUTs, which can be edited with an image editor. The palette files are found in the 'resources' folder and they're just two 64x64 squares of color that the shader pulls from to get the appropriate colors (i.e., to replace white and black in the emulator). One of the included samples is yellower and resembles the display in strong light, such as daylight:

Another sample mimics the higher contrast of the Gameboy Pocket revision:

Also in the resources folder, you'll find some sample backgrounds, which apply a texture to the image. The default has some angled hatching, while the included samples show some different types of texture that are possible, like this noisy bit:

Next up, we have the shader variables that are easily modified by users with a simple text editor. These are enumerated in the shader's enclosed README file and I'll include some shots here for reference.

The first one is the 'alpha' setting, which determines how dark a 'white' pixel should be. If you raise the value,  everything becomes darker:

While lowering the value will make the pixel grid less visible in white areas:

The next option, response time, determines how long it takes a pixel to go from white to black and vice versa. It doesn't really translate very well into static screenshots so I didn't bother showing it here. The next option after that, though--blending mode--determines whether just the space between dots is blended (mode 0) or all texels (mode 1), which, in practical terms, is how sharp/blurry the edges of the individual pixels are:

The next option--texel alpha blending--effectively controls how defined the grid pattern is. Higher values result in round/fat-looking pixels:

While lower values give you a sharp, well-defined grid:

After that, we have 'contrast,' which works just like the slider on the side of the Gameboy. Lower values can simulate the look of low batteries:

'Background smoothing' lessens the effect of the background LUT. Higher values make the background less visible, lower values make it more visible:

'Shadow opacity' controls how dark the drop-shadows from the pixels are. Higher values mean darker shadows:

Finally, 'shadow offset' determines which direction the drop-shadows appear (i.e., for simulating a light source that isn't directly above the display). Setting both the X- and Y- values to 2.0 will offset it more:

While setting them both to 0 puts the shadows directly underneath the pixels:

Just so you know: you can use this shader with other RetroArch cores, as well, and see what your favorite games would look like in an alternate, Gameboy-centric universe:

Harlequin has made some major changes to the way the shader looks and works since he first started working on it. While the current iteration is extremely convincing, I also liked an earlier version that looked more stylized. Here's a couple of shots:

You can download it from my Mediafire.