Uborder shaders

[Hyllian]

@Cyber

What are the recommended specifications for the background texture in terms of window/viewport size and location so that it easily lines up with the existing default presets?

If you use the reflections preset, for now, you need the frame spot on your background to be frontal and isometric, which means a rectangle (or slightly curved), not rotated.

If you don’t use the reflections, you can use some slightly bended background. Like this one I just got on Internet:

Then, I renamed the BORDER inside the main uborder.slangp preset to point to this one and RA presented this:

In some 5 minutes, using the user params for frame and curvature, I’ve got this:

Obviously, it’s just for fun and to show you how you can bend the screen to fit some space.

If you plan to make something for gaming, you should increase the game frame to use most of the available 4:3 space in your screen. I think you can use the examples by Duimon and Orionsangel as your ideal backgorund organization.

@Cyber

Is there any advantage to the cutout being coloured, a void or alpha-transparency?

I notice that .jpgs are being used instead of .pngs so I guess this means transparency isn’t used at all?

Ok. Both of them are supported. You can put the frame in front of the background so that you can use a tiny jpg or you can put the frame behind the background and use a transparent png. The last is more believable, though harder to make and you need a bigger file. The former is easier, because you don’t need to tweak alpha and you get small files. Though the result is less believable.

[Hyllian]

@Cyber

Although this isn’t being pursued anymore, I just wanted to state for the record that the anomalies that are present in this screenshot may not the result of the Sony Megatron Colour Video Monitor Shader itself and are not the typical moiré patterns seen in most other shaders when curvature is combined with strong scanlines and CRT Mask effects. What I’m seeing here is the result of the curvature effect being applied to the mask itself causing the phosphors to be skewed and warped.

I’m not saying the moiré is caused by the crt shader alone. It’s caused by the whole thing combined. Sony Megatron uses strong masks (it’s compared to other masks at strength = 1.0), which is very strong. Besides that, my screenshot was too small to fit strong masks.

[Cyber]

@Hyllian

It’s caused by the whole thing combined.

I agree. I’ve now realized that I wasn’t seeing what I thought I was seeing. I originally zoomed in an viewed on my phone and the phosphors appeared like a Slot Mask pattern and seemed like they were skewed.

I just downloaded the image and zoomed in on my PC and it’s clearly a Shadow (Dot) Mask being used, therefore the anomalies are not in line with what I originally thought they were.

I’ve deleted the irrelevant post to keep things sanitary.

[Duimon]

Lots to learn about this new beast.

Does the reflection not follow the screen curvature?

[Hyllian]

@Duimon

Does the reflection not follow the screen curvature?

Not yet, I intend to improve it. It was the last feature I got working, so it’s still in its infancy. I recommend using low reflection strength of up to 0.25 to give the illusion of accuracy. (you have to keep in mind that this shader is still kind of a showy potato megabezel. )

For now there’s a small trick to “bend” the reflection bars: as they are transparent to the game frame, you can push the reflection bar to overlap the frame a bit so that the reflection bar appear to curve behind the frame. Then use the ‘reflection X and Y distance’ user params to adjust where the reflection start inside the reflection bars. On well done backgrounds as yours, it’s easy to do that.

I’ve seen other shader solutions is to create their own bezel to better control reflection spots. Looks like I’ve taken the hard path.

[Cyber]

I made a new preset pack based on this awesome piece of work. Feel free to check it out here:

CyberLab Death To Pixels Shader Preset Packs

For a long time I’ve been asked if my new shader presets could be combined with reflective bezels and overlays and I’ve also heard that my CyberLab Mega Bezel Death To Pixels Shader Preset Pack needed beefy hardware in order to run. While Koko-aio definitely answers some of those questions I unfortunately never got the opportunity really to get into it or use it much. Today we have another alternative. CyberLab Uborder miniLED Death To Pixels 4K HDR Ready Shader Preset Pack Click the link be…

[Hyllian]

@Hyllian

Screenshot of “crt-sony-megatron-viewsonic-A90f±sdr.slangp” on my small 1080p monitor (see the moiré):

I just fixed those nasty moiré lines. Looks like I forgot to change something when porting. Now it still has moiré, though much less strong.

In addition, I ported crt-aperture to be compatible with uborder. Content_shaders_pack updated.

[Duimon]

@Hyllian

Not yet, I intend to improve it.

I look forward to seeing it grow. In the meantime I may create a set of no-curvature presets using my overlays.

[Hyllian]

Got some crt shaders workin:

• crt-aperture
• crt-easymode
• crt-lottes
• crt-guest-advanced (this was a bit tricky).

crt-guest-advanced:

Next content version only later today.

[Cyber]

Wow! Seems like you’re on a roll!

@Hyllian

crt-guest-advanced (this was a bit tricky).

Game changing! (no pun intended)

[Hyllian]

Ok, updated content_shaders_pack with all those crt shaders converted.

Load the base_presets if you wanna test one by one using M and N keys.

Redundant controls, like curvature, still work in the original crt shaders (i didn’t cut any code) but you should give preference for geom’s curvature.

[Hari-82]

Hard to keep up with you!

can’t wait to toy around with the new converted shaders!

here some screens with crt nobody with few prepended shaders and overlays by Duimon:

[Hyllian]

@Hari-82

Hard to keep up with you!

Don’t worry, I’ll take a break this weekend. I’m a bit tired and need some rest. So I let you with new toys to play.

[acrophobic]

Hi Hyllian, I just wanna say thanks for this shader. It runs smoothly even on my old Android phone:

I still need to tweak it more, but it’s already way better than the usual black screen

[Hyllian]

@acrophobic

Hi Hyllian, I just wanna say thanks for this shader. It runs smoothly even on my old Android phone

Nice! This feedback is important, because I didn’t test on mobiles. From your shots, you’re applying over gba games. Do you think some handheld shaders would benefit from using these borders?

[acrophobic]

@Hyllian

Do you think some handheld shaders would benefit from using these borders?

Honestly? I’m not really sure anymore. Usually I play GB and GBA using dot shader. This way I could appreciate each pixels properly while still fast enough for my phone:

However after trying them out for a while, I was surprised by how good CRT shaders actually look on handheld games:

While the CRT isn’t as sharp as the LCD, it still looks pretty good nonetheless.

With that said, I don’t mind using the existing CRT shaders for handheld games, but I certainly wouldn’t complain if you decided to port some handheld-specific shaders

By the way, regarding Android’ performance, I did notice my phone get hotter and it’s battery is drained faster while using this bezel. However I guess it’s expected since this bezel is way more complicated than a single shader.

[Hyllian]

@acrophobic

Wait, is this Mega Bezel default border loaded by uborder?

@acrophobic

By the way, regarding Android’ performance, I did notice my phone get hotter and it’s battery is drained faster while using this bezel. However I guess it’s expected since this bezel is way more complicated than a single shader.

Maybe you should try the tip from Kokoko3k to halve your fps so that it spare your battery.

[acrophobic]

@Hyllian

Wait, is this Mega Bezel default border loaded by uborder?

Yes, I used a screenshot of the Mega Bezel default border as the background texture for uborder. Here’s what I did:

1. On my PC, I adjusted the aspect ratio to 20:9 to match my phone’s screen ratio.
2. Still on my PC, I loaded the Mega Bezel shader and took a screenshot.
3. Finally, I transferred the screenshot to my phone and followed your tutorial from the post above.

@Hyllian

Maybe you should try the tip from Kokoko3k to halve your fps so that it spare your battery.

Thanks for the tip, I’ll try it later.

[salaadas]

Hi Hyllian and the libretro community,

As this is my first time posting/replying here, if there is anything that I did wrong, please let me know.

Firstly, thank you Hyllian for sharing the this shader. While I don’t use retroarch, I learned about your work while trying to do some post-processing for my own game. Out of all the crt shader that has bezel reflection (I looked at the Mega Bezel, kokoaio), yours was the easiest to understand and easiest to implement in my OpenGL engine.

For the most part, I was able to apply this in the game; however, there’s one part of the ‘uborder-reflections.slang’ shader that I don’t seem to understand fully. So it would be great if you could explain some of the details here:

The reflection for the horizontal and vertical direction is symmetric, so I will just quote a block from the horizontal bezel reflection:

    if((abs(uv.x-0.5) >= (0.5*c_frame.x) && abs(uv.x-0.5) <= (0.5*c_frame.x+bezel_w)) && abs(uv.y-0.5) <= (0.5*c_frame.y+bezel_h))
    {
        uv.x = (uv.x >= 0.50) ? 1.0 + c_frame.x - uv.x + reflection_scr_distance_x : 1.0 - c_frame.x - uv.x - reflection_scr_distance_x;

        reflex.rgb = mix(texture(BlurPass, uv + vec2(bezel_center_x, bezel_center_y)).rgb, vec3(0.0, 1.0, 0.0), params.AdjustView);

        **reflex.rgb = mix(reflex.rgb, frame.rgb, frame.a);**
        reflex.rgb *= (1.0-smoothstep(0.5*c_frame.y-0.1, 0.5*c_frame.y, abs(uv.y-0.5)));

        border.rgb = clamp(border.rgb + reflection_strength*reflex.rgb, 0.0, 1.0);
    }

The bolded part is what I’m confused over. From the images you showcased (and please correct me if I’m wrong), I suppose that the blurred color that is reflected on the bezel is mirror and curved from the main game framebuffer, right? And it seems like the bolded part is not reflecting the main game framebuffer when I was using it.

TLDR: If possible, could you explain where and how in the shader you reflected the main game image on the bezel? I do know that this line uv.x = (uv.x >= 0.50) ? 1.0 + c_frame.x - uv.x + reflection_scr_distance_x : 1.0 - c_frame.x - uv.x - reflection_scr_distance_x; is x-flipping the uv, but it seems to me that this new uv is only applied for the blurred texture, not the main game framebuffer.

Again, thank you, Hyllian, for open-sourcing your work. Attached is a the ported shader that I did.

I’m sorry if I didn’t get the point across clearly, as English is not my native language.

[Hyllian]

@salaadas

Firstly, thank you Hyllian for sharing the this shader. While I don’t use retroarch, I learned about your work while trying to do some post-processing for my own game. Out of all the crt shader that has bezel reflection (I looked at the Mega Bezel, kokoaio), yours was the easiest to understand and easiest to implement in my OpenGL engine.

Nice, it’s made to be simple, so I’m glad it’s achieving some of its objectives.

Some of my experiments with distinct borders:

@salaadas

The bolded part is what I’m confused over. From the images you showcased (and please correct me if I’m wrong), I suppose that the blurred color that is reflected on the bezel is mirror and curved from the main game framebuffer, right? And it seems like the bolded part is not reflecting the main game framebuffer when I was using it.

The bolded part assures that the reflections only happen outside the game frame. So it put the game above reflections if they overlap. The game alpha channel is used for that task.

About how the reflection is done. I use a mipmapped version of the game framebuffer. I made a simple schematics to explain that:

The reflection part is what need some improvement, as already pointed in this thread. I had to blur the game and then mirror it over the bezel, so I thought about the most easy and fast way to do that by mipmapping the crt output and linearly sampling from that.

But, after some testings, I think the mipmapped framebuffer coordinates aren’t exactly aligned to the crt framebuffer, so the reflections are slightly wrong (you only realizes that if you look carefully to the reflections). I’ll probably rewrite this part using another strategy.

@salaadas

TLDR: If possible, could you explain where and how in the shader you reflected the main game image on the bezel? I do know that this line uv.x = (uv.x >= 0.50) ? 1.0 + c_frame.x - uv.x + reflection_scr_distance_x : 1.0 - c_frame.x - uv.x - reflection_scr_distance_x; is x-flipping the uv, but it seems to me that this new uv is only applied for the blurred texture, not the main game framebuffer.

Actually, there’s no bezel in this implementation. Only game, border (background) and reflections. So, the reflections are added to the border. If the reflection overlap with game coordinates, the game takes preference, as I explained earlier. This line adds the reflection to the border:

border.rgb = clamp(border.rgb + reflection_strength*reflex.rgb, 0.0, 1.0);

And the last shader line composes the game frame with the reflected border.