Suggestion/Request Add Gameboy Camera Shader

[LichLord91]

Hello!

Would like to request a Gameboy Camera Shader

Looking for emulator/apps out there I found that this one looks best with great option parameters

Contrast Brightness Sharpness? Color Palette

Site: https://maple.pet/webgbcam/ Source: https://github.com/Lana-chan/webgbcam

This site probably has the best clone of it with some additional features that'd be great to emulate here.

I understand this is not a shader so here's some possible examples on shader toy.

https://www.shadertoy.com/view/3tSXRh

https://www.shadertoy.com/view/ttsSzr

https://www.shadertoy.com/view/3tByRd

[exeldro]

something like this? https://github.com/exeldro/obs-shaderfilter/blob/master/data/examples/gb-camera.shader

[LichLord91]

TLDR of my feedback/asks

1. Review and modify the current shader to be more in alignment with the changes and additions the web app code like the bayer matrix , sharpness effect, etc.

2. Add a dropdown with preset color palettes from the app.js (i'll add the values after this post to save some grunt work if you decide to do this).

3. Add the Sharpness effect and set up some predefined value sets for each slider like the web app does (they have 7 each I believe)

I'm laughing hard right now. I was up late looking into all this on a ADHD research binge randomly found the shader you based the code on https://www.shadertoy.com/view/3tSXRh and didn't even realize that its the same author who made https://github.com/Lana-chan/webgbcam. Lana-Chan also goes by maple.

Digging deeper I found its personal website and saw that its made a blog post on how to use the website version as the cam in OBS earlier this year! Pure coincidence, haha. https://maple.pet/blog/usinag-webgbcam-in-obs.

I'm wondering ,if you want, we could tag Lana-Chan/maple here and see if its have any interest in providing guidance/help into converting its Javascript Version.

Now on to the feedback

https://github.com/Lana-chan/webgbcam/blob/main/app.js

I believe maple was further along in its shader experience and research when it wrote the web app. The first commit date is about a year after the post on shadertoy. Its changed its bayer matrix mapping values and looks like it tuned various parts in comparison if you look at the app.js

            0, 48, 12, 60, 3, 51, 15, 63,
        32, 16, 44, 28, 35, 19, 47, 31,
        8, 56, 4, 52, 11, 59, 7, 55,
        40, 24, 36, 20, 43, 27, 39, 23,
        2, 50, 14, 62, 1, 49, 13, 61,
        34, 18, 46, 30, 33, 17, 45, 29,
        10, 58, 6, 54, 9, 57, 5, 53,
        42, 26, 38, 22, 41, 25, 37, 21

Quote from the readme file in the web app git

The concept of Bayer dithering was hard for me to grasp at first, but after a few different projects getting acquainted with it, I've found an easy way to apply it, which can be used in a procedural setting like JS Canvas filters, or shaders.

The default color in the shadertoy is very close to the Royal4 color palette in the web app, I went ahead and updated the shader filter color to match this so i can do a more accurate side by side

https://lospec.com/palette-list/royal4

        //webapps app.js
    // Royal4 - https://lospec.com/palette-list/royal4
    [
        [82, 18, 150],
        [138, 31, 172],
        [212, 134, 74],
        [235, 219, 94]
    ],

// Royal 4 color in vec4 values
uniform float4 color_1 = {0.32, 0.07, 0.59, 1.0};
uniform float4 color_2 = {0.54, 0.12, 0.67, 1.0};
uniform float4 color_3 = {0.83, 0.53, 0.29, 1.0};
uniform float4 color_4 = {0.92, 0.86, 0.37, 1.0};

I launch a gameboy camera emulator, the website, and obs to compare the looks.

One thing I noticed is that the webapp seemed to do a better job at matching the gb camera in terms of pixelations doesn't blend as much, compare the hair in the two below. I tried messing with various values in our obs shader version but couldn't quite match what the web app was doing. (I could just be not doing things right not an expert at all).

I think it may be worth taking a look in the app.js to see what it may do differently than the shadertoy version. One additional layer it add is Sharpness which is that bottom right button you see in the web app. That could be the big difference but unsure.

I'd like a predefined color palette drop down menu item that has the same color palettes as the web app, with the ability to do a custom one if wanted. (I'll pull up the color palette profiles in the app.js and convert them to vec 4 for you like I did above to do some of the grunt work :) or my own personal use if you don't want to do it <3. )

Additionally , if we're able to mirror the values and behaviors of the web app may be nice to also add some preset levels of =contrast, brightness, sharpness etc... with the ability to do custom like we have now. it took some real finessing to get it to a game boy camera look over all.

[exeldro]

I added the alternative bayer dithering that is 180 degrees offset and fixed color of the edges. Not planning on adding presets as obs-shaderfilter has no options for that. Sharpness is something I might look at later.

[LichLord91]

Forgot to say thank you earlier , how rude of me.

Thanks again, this is really cool , I appreciate the work.

Were you referring to the effect presets like dither, brightness, contrast or did you mean the color or both?

Is there a way to just do a color profile (setting all 4 colors) with the select widget type with a name of the profile like this?

No worries if not, just curious for my understanding and maybe being more concise in case my wall of text wasn't as articulate as i hoped. :)

(example is the asciii shader)

[exeldro]

For presets it is for all fields. I can make both the the dropdown and the custom values, but there is no way I can disable or hide the custom options when a preset is chosen which makes it confusing. So I prefer only the custom values in that so that users have more options.

[LichLord91]

Totally understandable, thanks for explanation exeldro, appreciate your time.