Example Shaders

[ScottFromPA]

Limeth, Is there a website that provides shaders that are compatible with the OBS Shader Plus plugin that you created? I'm looking fore more working examples that will work with the plugin. I'd like to build more examples for the OBS community. Your plugin is awesome and it deserves more love.

[Limeth]

Hello, I am glad you find the plugin useful. Currently, I am not aware of there being any other examples than those in the examples directory, which are admittedly very basic. I have tried to write the usage guide in README.md in such a way that people already familiar with writing graphics shaders would be able to figure out a way how to write their own shaders for obs-shaderfilter-plus. If you would be so inclined to create some more examples, I would be delighted to add them to the repository. In case you are looking for more general examples of what fragment shaders look like in practice, shadertoy is a very popular tool for sharing them. The concept is mostly the same, but some of the details are a little different, such as the naming of the entry function or the naming of uniform variables, more on that here. If it is your first time learning about fragment shaders, my personal favorite resource is the book of shaders.

As a side note: The reason why I have not dedicated time to adding more examples, is because I found the plugin API that OBS offers to be too limiting. Essentially, I wanted filters to be able to have several input sources, and I wanted to be able to create a graph-based representation for those effects. That is not to say that the effect filters cannot be helpful, but I may have neglected aspects of this project (such as adding more usage guides or examples) in favor of pursuing a way of satisfying those requirements. I have recently started working on a project completely separate from OBS, because this will allow me to prototype much quicker without having to adhere to the existing structure of OBS. The end goal would be to make OBS capture a single window and just let it stream/record, whereas the video composition would be all handled by this separate program that would handle real time video composition and output to that window OBS is capturing. While it is not an innovative idea, I think I have some worthwhile ideas I would like to explore with the project.

[NetherEran]

Hey, i had some fun writing some shaders for this plugin. I pushed them to https://notabug.org/NetherEran/obs-shaderfilter-plus-shaders

Nothing too complicated so far but already pretty fun to play with.

[MarioMey]

Hey, i had some fun writing some shaders for this plugin. I pushed them to https://notabug.org/NetherEran/obs-shaderfilter-plus-shaders

Nothing too complicated so far but already pretty fun to play with.

Thanks, @NetherEran ! I was wondering if this plugin could deform image... till I found upwards_distorted.glsl. Now, I'm testing all of them. Only blur is not working.... :/

It would be nice if they has a little documentation... also some variables changeable from GUI (and from my scripts).

[MarioMey]

I transported a Blender Game Engine box blur to ShaderFilter-Plus and it works great!

/* Simple Box Blur
 * Higher amount = slower
 * multipler property does not affect performance
 */

#pragma shaderfilter set amount__description Amount
#pragma shaderfilter set amount__default 2
#pragma shaderfilter set amount__min 1
#pragma shaderfilter set amount__max 8

#pragma shaderfilter set multiplier__description Multiplier
#pragma shaderfilter set multiplier__default 1.0
#pragma shaderfilter set multiplier__min 1.0
#pragma shaderfilter set multiplier__max 20.0

uniform int amount;
uniform float multiplier;

vec4 render(vec2 uv) {
    vec2 pix = vec2(1.0 / builtin_uv_size.x, 1.0 / builtin_uv_size.y) * multiplier;
    vec4 sum = vec4(0);

    int i, j;

    for(i = -amount; i <= amount; i++){
        for(j = -amount; j <= amount; j++){
            sum += texture2D(image, uv + vec2(float(i), float(j)) * pix);
        }
    }
    return sum / pow(amount * 2 + 1, 2);
}

As it says in description (thanks to whoever wrote this shader), higher amount consumes more process, but multiply doesn't. I set default amount to 2. For higher blur (raising multiply), amount has to be 3 or 4.

[NetherEran]

Thanks, @NetherEran ! I was wondering if this plugin could deform image... till I found upwards_distorted.glsl. Now, I'm testing all of them. Only blur is not working.... :/

Blur doesn't actually blur anything, it just darkens the corners of the screen. It's not very noticable.

It would be nice if they has a little documentation... also some variables changeable from GUI (and from my scripts).

Documentation can be done if I get time and feel like doing it. I'm not sure making variables changeable from GUI is possible without changing the plugin itself though.

[MarioMey]

I'm not sure making variables changeable from GUI is possible without changing the plugin itself though.

Yes, it's possible. Here is a modified upwards_distorted.glsl with amplitude slider.

/* Don Gilberto Manhattan Ruiz
 */
#pragma shaderfilter set amp__description Amplitude
#pragma shaderfilter set amp__step 0.001
#pragma shaderfilter set amp__default 1.0
#pragma shaderfilter set amp__min 0.0
#pragma shaderfilter set amp__max 1.0
#pragma shaderfilter set amp__slider true

uniform float amp;

float4 render(float2 uv) {
        float2 newuv;
        newuv[0] = uv[0] - 0.5;
        newuv[1] = uv[1];
    float deformation = (uv[1] - 1)* amp + 1;
        newuv[0] = newuv[0] * deformation  + 0.5;

        float4 image_color = image.Sample(builtin_texture_sampler, newuv);
        return image_color;
    }

[mesmerx]

i created a rounded_rect shader like in the shaderfilter (without plus) to the here if you wanna https://github.com/Limeth/obs-shaderfilter-plus/pull/38 its my main reason to use a shader filter in obs :)

[Aditeya]

I created a scanlines shader & lcd_glitch shader. I found them on ShaderToy and converted them. You can find them in this gist. It works pretty well!