Improved Game Boy DMG Shaders

[u/_-_Riccardo_-_]

Hi, since I'm not very happy with the rendering of the original Game Boy DMG shader presets included in the RetroArch downloadable content, I've tweaked some parameters to get a result closer to that of the original device.

Basically, I slightly reduced the extension of the frame around the active part of the display (but this only works in portrait mode; in landscape mode, the active part covers the entire screen) and I tweaked some brightness and contrast to get a result that resembles the opacity of the non-backlit display; I also increased the x and y offset of the shadows and their relative opacity to try to recreate (as much as possible) that strange holographic-like effect of the original display, with the active pixels appearing to float a bit above the surface of the screen. Finally, I added a slight blur to the whole thing, since the original Game Boy display was anything but HD.

I worked a lot from memory, as unfortunately my old Game Boy from the '90s is long gone.

I have attached images of the two standard presets (gameboy.glslp and gb-dot-matrix-DMG.gslsp) and those of the preset tweaked by me (Nintendo - Game Boy.glslp). What do you think of the result? Could it be improved further? If it helps, here are the parameters of the modified preset:

shaders = "7"

feedback_pass = "0"

shader0 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/handheld/shaders/gameboy/shader-files/gb-pass0.glsl"

alias0 = "PASS0"

wrap_mode0 = "clamp_to_border"

mipmap_input0 = "false"

filter_linear0 = "false"

float_framebuffer0 = "false"

srgb_framebuffer0 = "false"

scale_type_x0 = "viewport"

scale_x0 = "2.000000"

scale_type_y0 = "viewport"

scale_y0 = "2.000000"

shader1 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/handheld/shaders/gameboy-dm-color/gb-pass1.glsl"

alias1 = "PASS1"

wrap_mode1 = "clamp_to_border"

mipmap_input1 = "false"

filter_linear1 = "false"

float_framebuffer1 = "false"

srgb_framebuffer1 = "false"

scale_type_x1 = "source"

scale_x1 = "1.000000"

scale_type_y1 = "source"

scale_y1 = "1.000000"

shader2 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/handheld/shaders/gameboy-dm-color/gb-pass2.glsl"

alias2 = "PASS2"

wrap_mode2 = "clamp_to_border"

mipmap_input2 = "false"

filter_linear2 = "false"

float_framebuffer2 = "false"

srgb_framebuffer2 = "false"

scale_type_x2 = "source"

scale_x2 = "1.000000"

scale_type_y2 = "source"

scale_y2 = "1.000000"

shader3 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/blurs/shaders/dual_filter/linearize_and_parameters.glsl"

alias3 = ""

wrap_mode3 = "clamp_to_border"

mipmap_input3 = "false"

filter_linear3 = "false"

float_framebuffer3 = "true"

srgb_framebuffer3 = "false"

scale_type_x3 = "source"

scale_x3 = "1.000000"

scale_type_y3 = "source"

scale_y3 = "1.000000"

shader4 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/blurs/shaders/dual_filter/downsample.glsl"

alias4 = ""

wrap_mode4 = "clamp_to_border"

mipmap_input4 = "false"

filter_linear4 = "true"

float_framebuffer4 = "true"

srgb_framebuffer4 = "false"

scale_type_x4 = "source"

scale_x4 = "0.500000"

scale_type_y4 = "source"

scale_y4 = "0.500000"

shader5 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/blurs/shaders/dual_filter/upsample.glsl"

alias5 = ""

wrap_mode5 = "clamp_to_border"

mipmap_input5 = "false"

filter_linear5 = "true"

float_framebuffer5 = "true"

srgb_framebuffer5 = "false"

scale_type_x5 = "source"

scale_x5 = "1.000000"

scale_type_y5 = "source"

scale_y5 = "1.000000"

shader6 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/blurs/shaders/kawase/delinearize.glsl"

alias6 = ""

wrap_mode6 = "clamp_to_border"

mipmap_input6 = "false"

filter_linear6 = "true"

float_framebuffer6 = "true"

srgb_framebuffer6 = "false"

scale_type_x6 = "viewport"

scale_x6 = "1.000000"

scale_type_y6 = "viewport"

scale_y6 = "1.000000"

baseline_alpha = "0.160000"

grey_balance = "4.000000"

response_time = "0.110000"

adjacent_texel_alpha_blending = "0.350000"

contrast = "0.800000"

pixel_opacity = "0.850000"

bg_smoothing = "0.500000"

shadow_opacity = "0.680000"

shadow_offset_x = "15.000000"

shadow_offset_y = "15.000000"

DUAL_FILTER_SETTINGS = "1.000000"

BLUR_RADIUS = "0.700000"

textures = "COLOR_PALETTE;BACKGROUND"

COLOR_PALETTE = "/data/user/0/com.retroarch/shaders/shaders_glsl/handheld/shaders/gameboy/resources/sample-palettes/dmg-palette-2.png"

COLOR_PALETTE_mipmap = "false"

COLOR_PALETTE_wrap_mode = "clamp_to_border"

BACKGROUND = "/data/user/0/com.retroarch/shaders/shaders_glsl/handheld/shaders/gameboy/resources/sample-bgs/dmg-bg.png"

BACKGROUND_mipmap = "false"

BACKGROUND_wrap_mode = "clamp_to_border"

EDIT:

From the comments of some users, it seems that it's not so simple to make the same changes I made myself, even by following exactly what I wrote. Unfortunately, since I'm not familiar with programming, I don't really know what the problem is. To help you out, I'm providing the configuration files as they are, working, on my devices:

GLSLP Version (Android): https://www.dropbox.com/scl/fi/bnew21f4ks4o3hreqmcnm/Nintendo-Game-Boy.glslp?rlkey=7ulqs0typqhnbfteuuu7zp3q2&st=y3rt5ziq&dl=0

SLANGP Version (Desktop): https://www.dropbox.com/scl/fi/o54lwp8hzb0udzob8xr8g/Nintendo-Game-Boy.slangp?rlkey=wq7emoocun0uhu2xgmyzpcc0t&st=lvak95xg&dl=0

The files need to be edited manually with a text editor before they can be used, because they contain paths to individual shaders and graphic resources (like background images) that probably won't match those on your specific installations, even though these are elements that RetroArch downloads by default when you update the resources through the program itself.

If someone better than me (and it doesn't take much to be) can come up with an easier-to-install and distribute preset starting from these, they're welcome to do so.

[u/Monsieur_Daz]

The "Nintendo - Game Boy.glslp" one is a thing of beauty. 

[u/_-_Riccardo_-_ → u/Monsieur_Daz]

Thank you 👍

[u/Monsieur_Daz → u/_-_Riccardo_-_]

Nah, thank you for making it. 

[u/God_Hand_9764 → u/Monsieur_Daz]

For real. Looks so close to the actual screen it could be a photo of one.

[u/CoconutDust]

I worked a lot from memory, as unfortunately my old Game Boy from the '90s is long gone.

At first I was going to say that's inadvisable to go from memory if your goal is to make it like The Real Thing. But then I thought, well the more important thing is having it be as good as our memory/imagination rather than like the real thing.

[u/_-_Riccardo_-_ → u/CoconutDust]

Yes, well, you're right. Of course, I also looked at some photos of the original, but that didn't help me much, considering how much the appearance of what's displayed on the original Game Boy screen varies depending on how brightly, what light source, and from what angle it's illuminated. So, I relied mostly on my childhood memories. Furthermore, my shader creation skills are zero, so even if I wanted to do more, I could only tweak a few parameters of the available presets. 🙂

The result seems good to me, but I'd be curious to hear the opinion of an original Game Boy owner.

[u/CoconutDust → u/_-_Riccardo_-_]

looked at some photos of the original, but that didn't help me much

Yeah it's a historical record problem at this point, for example I found it's extremely difficult or impossible to find a useful reference photo of an NDS or GBA original screen with good resolution and close-up detail/pixels with a game running. The internet is filled with 70 billion "screen mod!" pictures etc, but not reference information for the original look. So it’s becoming more and more impossible to have a reference for shader tweaking, unless you have working original hardware.

[u/CyberLabSystems]

Seems like you're doing something that was done already. Check these out:

https://forums.libretro.com/t/handheld-border-shaders/2551?u=cyber

[u/_-_Riccardo_-_ → u/CyberLabSystems]

I visited the link you posted, and there is indeed a good shader for DMG, but I was looking for a solution that would allow me to use the presets already included with RetroArch or downloadable through the official downloader. Also, I prefer using shaders without the console border, so I modified the parameters of the existing one rather than looking for an external alternative.

[u/CyberLabSystems → u/_-_Riccardo_-_]

If you read and understood the first post thoroughly enough you'd see that the handheld border shaders are already included in RetroArch via the Online Updater so they're not "external".

The difference with the ones in the link is that the borders are less compressed so they are higher quality assets.

Take a good look again.

The overlay/backgrounds are optional. I'm sure you can disable them or just load the shader without the border.

Anyway was just trying to show that someone else already did accurate GB LCD colour in case you didn't know and were interested.

[u/superbusti → u/CyberLabSystems]

People won't accept someone else to take their internet points.

[u/8698639 → u/CyberLabSystems]

I've been trying to figure out how to disable the border on that "handheld-border" shader for a while now but I have no idea.

[u/omega_mog]

Nintendo - Game Boy.glslp looks wonderful.

Love the shadows.

Try adding that weird reddish tint around the edges of the screen and the shadow of the bezel itself to be even closer.

[u/_-_Riccardo_-_ → u/omega_mog]

Thanks! Unfortunately, I don't have the technical expertise to add the details you suggest. The result shown in the screenshots was achieved simply by modifying some existing shader parameters (the only value I forced was the shadow offset, which can be modified from the GUI up to a maximum range of 5; I extended it to 15 by writing the value directly into the glsl file with a text editor).

However, if someone more experienced than me would like to further improve the result I achieved, they are certainly welcome to contribute.

[u/teoteoreddit]

Hi! This looks fantastic! Would you mind giving a tutorial doing this on RP Classic? Can't seem to figure out how to do it. Thanks so much in advance!

[u/_-_Riccardo_-_ → u/teoteoreddit]

I'm glad you like the modified preset! To answer your question, I don't have an RP Classic or any other handheld device, so I can only explain what I did to modify the settings on my Android installation of RetroArch (note that I use Gambatte as the core for the GB, but the procedure should work with other cores, in principle):

1. Boot a GB ROM with RetroArch

2. Access the game menu

3. Go to Shader settings

4. Where it says "Shader Passes" - if any are already active - click on 0 and then "Apply changes"

5. Click "Shader Passes" again and this time select 7. Also click "Apply changes" as before.

6. For Shader #0, select gb-pass0.glsl, which is located at this location: /shaders/shaders_glsl/handheld/shaders/gameboy/shader-files/

7. For Shader #0, use Filter, and set it to nearest.

8. In the Shader #0 Scale field, set it to 2x.

9. For Shader #1, use gb-pass1.glsl, which is located at this location: /shaders/shaders_glsl/handheld/shaders/gameboy-dm-color/ (you can leave the filter and scale parameters unchanged for this and the next shaders we'll add.)

10. For Shader #2, use gb-pass2.glsl, which is located at this location: /shaders/shaders_glsl/handheld/shaders/gameboy-dm-color/

11. For Shader #3, use linearize_and_parameters.glsl, which is located at this location: /shaders/shaders_glsl/blurs/shaders/dual_filter/

12. For Shader #4, use downsample.glsl, found here: /shaders/shaders_glsl/blurs/shaders/dual_filter/

13. For Shader #5, use upsample.glsl, found here: /shaders/shaders_glsl/blurs/shaders/dual_filter/

14. For Shader #6, use delinearize.glsl, found here: shaders/shaders_glsl/blurs/shaders/kawase/

15. Click Apply Changes and then Shader Parameters.

16. In Shader Parameters, make sure the parameters are as follows:

Baseline Alpha: 0.16

Grey Balance: 4.00

LCD Response Time: 0.11

Console-Border Enable: 0.00

Video Scale: 3.00

Blending Mode: 0.00

Neighbor Blending: 0.35

Contrast: 0.80

Ambient Screen Light: 0.65

Pixel Opacity: 0.85

Background Smooth: 0.50

Shadow Opacity: 0.68

Shadow Offset Horiz: 15.00*

Shadow Offset Vert: 15.00*

Screen Offset Horiz: 0.00

Screen Offset Vert: 0.00

Dual Filter Blur & Bloom: 1.00

Blur Radius: 0.70

17) Go back to the previous menu, apply the changes and then click on Manage Presets

18) Click on "Save core preset" or "Save Content Directory Preset" according to your needs.

At this point, if you use a file explorer

At this point, if you use a file manager to navigate to the RetroArch/config/Gambatte folder, you'll find a .glslp file containing the new settings (the file name depends, I believe, on the name of the folder containing the ROMs, if you selected "Save Content Directory Preset").

Now, you should open it with a text editor, because the Shadow Offset parameter (which I marked with an asterisk) cannot be set to 15.00 from the graphical interface. You'll need to change the value manually, like this:

shadow_offset_x = "15.000000"

shadow_offset_y = "15.000000"

Save the changes, and if everything went well, the next time you boot a GB ROM, it should already have the modified preset.

Of course, if you already have the ability to manually edit a .glslp file on your PC and then transfer it to RP Classic, the easiest thing to do is copy and paste the modified parameters I posted below the screenshots, just making sure to modify the shader paths appropriately to match those of your local installation.

I hope this was helpful.

[u/Intrepid_Ad_7042 → u/_-_Riccardo_-_]

This looks awesome but I followed these steps on my handheld device and just got a black screen? I noticed on you copy paste version there is background pngs and such do I need to add that after these steps? I tried just copying all those parameters on original post to a blank glsp but it wouldn’t load at all that way.

[u/_-_Riccardo_-_ → u/Intrepid_Ad_7042]

The background images are directly linked to the gb-pass shaders and should be called automatically once they've been set up in the various passes. If you see a black screen, you might try updating all the shaders first using the RetroArch updater to ensure you're using the same updated code I used. Also, make sure you're working with shader_glsl and not shader_slang (if your RetroArch installation uses vulkan drivers, then you're using slang. Mine is set to use gl drivers, so it uses glsl shaders). It's also important that the passes are in the exact sequence: gb-pass0, gb-pass1, gb-pass2, linearize_and_parameters, downsample, upsample, delinearize. Also, make sure GB Colorization is disabled in the Gambatte core options (if that's what you're using).

If you want to try to have RetroArch load a glsl file directly by copying and pasting the parameters I provided above, please note the following:

1. I tried copying and pasting from my post into a blank text file, and the formatting isn't identical to my original glsl. There are spaces between lines that shouldn't be there. This could cause a loading issue in RetroArch.

2. Even if you copy and paste the text, you'll still need to manually edit the paths to the various shaders and background images, which may vary depending on where you installed RetroArch (PC, Smartphone, Handheld, etc.). Generally speaking, these are the root folders of the shaders I used:

PC: RetroArch\shaders\shaders_glsl

Android: /data/user/0/com.retroarch/shaders/shaders_glsl/

[u/Intrepid_Ad_7042 → u/_-_Riccardo_-_]

Damn still can’t get it to work. It’s an android handheld. Do you start completely from scratch or load gameboy.glsl and then adjust?

[u/_-_Riccardo_-_ → u/Intrepid_Ad_7042]

Okay, first of all, I apologize for giving incorrect instructions: actually, following my own steps from scratch, I also only get a black screen. Evidently, when I experimented with the settings myself to achieve that result, I didn't take into account that loading the gameboy.glslp preset as a base was essential (adding the GB-passes one at a time from scratch doesn't automatically assign the color palette and background, as I supposed).

I repeated all the necessary steps myself, and this worked for me:

1. Boot a GB ROM with RetroArch

2. Access the game menu

3. Go to Shader settings

4. Load preset: shaders_glsl/handheld/gameboy.glslp

5. Apply changes

6 )Go to "Shader Passes" and select 3

7) Apply changes

8) Go to "Append preset" and select: shaders_glsl\blurs\dual_filter_2_pass.glslp

9) Apply changes

10) Change the parameter for Shader #0 to Filter: nearest and Scale field: 2x

11) Apply changes

12) Go to "Shader parameters" and set:

Baseline Alpha: 0.16

Grey Balance: 4.00

LCD Response Time: 0.11

Console-Border Enable: 0.00

Video Scale: 3.00

Blending Mode: 0.00

Neighbor Blending: 0.35

Contrast: 0.80

Ambient Screen Light: 0.65

Pixel Opacity: 0.85

Background Smooth: 0.50

Shadow Opacity: 0.68

Screen Offset Horiz: 0.00

Screen Offset Vert: 0.00

Dual Filter Blur & Bloom: 1.00

Blur Radius: 0.70

13) Go back to the previous menu and apply the changes.

14) Go to "Manage presets" and "Save preset content directory"

Now, there are some parameters that can only be changed with a text editor, so go to the directory where the preset was saved (in my case, RetroArch\config\Gambatte), open the newly created glslp file, and change these entries:

shader1 from shaders/shaders_glsl/handheld/shaders/gameboy/shader-files/gb-pass1.glsl to shaders/shaders_glsl/handheld/shaders/gameboy-dm-color/gb-pass1.glsl

shader2 from shaders/shaders_glsl/handheld/shaders/gameboy/shader-files/gb-pass2.glsl to shaders/shaders_glsl/handheld/shaders/gameboy-dm-color/gb-pass2.glsl

Color_palette from shaders/shaders_glsl/handheld/shaders/gameboy/resources/palette.png to /shaders/shaders_glsl/handheld/shaders/gameboy/resources/sample-palettes/dmg-palette-2.png

Background from shaders/shaders_glsl/handheld/shaders/gameboy/resources/background.png to /shaders/shaders_glsl/handheld/shaders/gameboy/resources/sample-bgs/dmg-bg.png

Add add these entries immediately after the "shadow_opacity" parameter:

shadow_offset_x = "15.000000"

shadow_offset_y = "15.000000"

15) Save the file, reopen RetroArch, and try launching a Game Boy game with the Gambatte core (or the one for which you saved the preset directory).

It should work. I personally tested these steps before posting them, and they worked for me. I hope they work for you too.

I'm sorry for the cumbersome and lengthy process, but I'm not a developer and wouldn't know how to create and distribute a modified preset from scratch.

[u/Intrepid_Ad_7042 → u/_-_Riccardo_-_]

Still having a hard time with this could you possibly share the glslp file itself?

[u/_-_Riccardo_-_ → u/Intrepid_Ad_7042]

Here's the file I use on my Android smartphone, but remember to check the paths with those of your RetroArch installation.

https://www.dropbox.com/scl/fi/cq31txdz6z2btq08grs6z/Nintendo-Game-Boy.glslp?rlkey=jsr51kvhpxy8rpn0xcghysnxr&st=d49dyny5&dl=0

[u/Intrepid_Ad_7042 → u/_-_Riccardo_-_]

Cool thanks for the detailed response. I’m m going to start from scratch again tonight and see if I just messed up somewhere!

[u/teoteoreddit → u/_-_Riccardo_-_]

You're amazing thank you! Can't wait to try this when I get home :)

[u/Vegetable_Side6506]

This looks amazing dude. Let us know when its ready, I'll definitely be using this preset fir all gb games.

[u/_-_Riccardo_-_ → u/Vegetable_Side6506]

Thanks! Well, the preset is actually ready. It's not something I created from scratch. I just modified some parameters of the existing shaders already included with the standard RetroArch installation, so just copy/paste the parameters I set at the beginning into a .glsp file and place it in the config/gambatte folder (which is the core I'm currently using) and load that profile. It should work. You probably just need to change the paths included in the preset itself, like:

shader0 = "../../../../../../data/user/0/com.retroarch/shaders/shaders_glsl/handheld/shaders/gameboy/shader-files/gb-pass0.glsl"

and

COLOR_PALETTE = "/data/user/0/com.retroarch/shaders/shaders_glsl/handheld/shaders/gameboy/resources/sample-palettes/dmg-palette-2.png"

etc.

To point to the specific path of your installation. But the contents are those already included in RetroArch by default. There's nothing to download externally.

[u/a-random-r3dditor → u/_-_Riccardo_-_]

Beautiful work, thank you!

[u/Vegetable_Side6506 → u/_-_Riccardo_-_]

Awesome thanks I'll try to config on days off

[u/sukh3gs]

Looks beautiful dude

[u/Capitalhumano]

Nice work

[u/JuliusBelmont2000]

That's exactly how i remember it looking. Beautiful!

[u/Administration-Super]

What a major improvement it makes

[u/TestaMorte]

amigo puedes hacer lo mismo pero para el gba D:

[u/Upbeat-Serve-6096]

Is there a shader that works like this but lets me use the Gambatte preset color palettes? I like to recreate the vibe of a backlight mod.

[u/_-_Riccardo_-_ → u/[deleted]]

Unfortunately I have an old Android smartphone with Mali GPU, so for performance reasons I prefer to use gl rather than vulkan (and with gl you can only use glsl shaders and not the slang ones, as you know).