Source Blending Modes

J

jw0z

New Member
Hi All,

I've had an attempt at implementing blending modes for sources, which has been previously requested in these two threads:

Blend modes for sources

I searched around the web and these forums a bit but couldn't find any mentions of this. Seems like something that might've been mentioned or requested before, but I don't see anything. For anyone who uses Photoshop, blend modes will probably be familiar. The wikipedia page for it explains it...
obsproject.com obsproject.com
ideas.obsproject.com

Add blend modes for dynamic sources · OBS Studio Ideas and Suggestions

Adding this option will give a lot of new creative possibilities to OBS users. Although such an option already exists as an Image Mask Filter (it has
ideas.obsproject.com ideas.obsproject.com

I've implemented it in a way that makes use of the existing blending state set up for compositing a source texture onto the scene, so unfortunately it's not a 'plugin', but is effectively 'free' from a performance point of view (for sources that were already being rendered to their own texture). As such, I was somewhat limited to implementing blending modes which are representable by specific combinations of src/dst blend factors & blend ops - the list of implemented blending modes is:
  • Normal
  • Additive
  • Subtractive
  • Screen
  • Multiply
  • Lighten
  • Darken (works incorrectly for transparent images - but a workaround could be to re-export the transparent image with a white background.)
I've skipped some of the more esoteric ones that are possible with the blend factors / blend ops, such as difference/reverse-subtract and divide, but I can add them if they are of use to anyone. Some of the more complex blending modes such as 'soft-light', 'hard-light', and 'overlay', could only be implemented if this feature were to be implemented as a final shader pass on the source (similar to how scale filtering is handled currently?)

Here are some examples (for comparison to the blending modes defined here: https://www.w3.org/TR/compositing/#blendingseparable):
normal_blending.pngadditive_blending.pngsubtractive_blending.pngscreen_blending.pngmultiply_blending.pnglighten_blending.pngdarken_blending.pngdarken_blending_fix.png

So far I've only tested this on macOS, so I've been unable to test the d3d11 changes I've made. If anyone is willing to test, then I've put the changes here:
https://github.com/jw0z96/obs-studio/tree/source-blending-modes

If anyone has any advice for how these changes could be implemented as a plugin, rather than as changes to obs-studio's rendering backend, then I'm open to suggestions :)

Thanks!
 
J

jw0z

New Member
Archon816 said:
Hello! I'm new user, but i really need this functionality :D How can I test it on windows?
Click to expand...

Hello!

Unfortunately, since this is not a plugin, you'll need to recompile obs-studio from source - the instructions for doing so are here: https://github.com/obsproject/obs-studio/wiki/Install-Instructions#windows-build-directions

You'll also need to make sure you compile from the fork & branch I've listed in the original post - you can do this by replacing the `git clone` step with:
git clone --recursive https://github.com/jw0z96/obs-studio.git

...and then checkout the branch with:
git checkout source-blending-modes

Please note that I've not tested these changes on Windows, as I don't have access to a d3d11 capable machine currently.

Good luck!
 
Archon816

Archon816

New Member
jw0z said:
Hello!

Unfortunately, since this is not a plugin, you'll need to recompile obs-studio from source - the instructions for doing so are here: https://github.com/obsproject/obs-studio/wiki/Install-Instructions#windows-build-directions

You'll also need to make sure you compile from the fork & branch I've listed in the original post - you can do this by replacing the `git clone` step with:
git clone --recursive https://github.com/jw0z96/obs-studio.git

...and then checkout the branch with:
git checkout source-blending-modes

Please note that I've not tested these changes on Windows, as I don't have access to a d3d11 capable machine currently.

Good luck!
Click to expand...
Hmm, can someone do it for me?
 
T

tripletopper

Member
Hello. I got brought here because I suggested ideas that would help make Anaglyph 3D easier.

Am I correct to assume that if I use a screen blending mode or additive blending mode that any pixel where red plus Cyan are together in the same physical space in an overlay would result in white? Because if it is, then that's exactly what I want. I got a black and red video as the left eye and a black and cyan video as the right eye.

Is that a setting on obs currently for the current obs?

By the way you said it works on Macintosh versions which I just so happen to have.

May I have instructions on how to "turn on" screen blend mode / additive blend mode on OBS for Mac?

By the way, do you know of a cheap VGA "screen blend curcuit" which takes 2 very slightly out of sync eyes and syncs then live (with a less than 1ms delay, I'm planning on streaming Virtual Boy, and the closest I got is with a passive Y cable of one screen slightly scrolling while the other is stable.

I don't have much money, and my video starts in VGA, which I though would be easiest to blend the red of left with the green and blue of the right. What should I search for on Ebay?
 
J

jw0z

New Member
tripletopper said:
Hello. I got brought here because I suggested ideas that would help make Anaglyph 3D easier.

Am I correct to assume that if I use a screen blending mode or additive blending mode that any pixel where red plus Cyan are together in the same physical space in an overlay would result in white? Because if it is, then that's exactly what I want. I got a black and red video as the left eye and a black and cyan video as the right eye.

Is that a setting on obs currently for the current obs?

By the way you said it works on Macintosh versions which I just so happen to have.

May I have instructions on how to "turn on" screen blend mode / additive blend mode on OBS for Mac?

By the way, do you know of a cheap VGA "screen blend curcuit" which takes 2 very slightly out of sync eyes and syncs then live (with a less than 1ms delay, I'm planning on streaming Virtual Boy, and the closest I got is with a passive Y cable of one screen slightly scrolling while the other is stable.

I don't have much money, and my video starts in VGA, which I though would be easiest to blend the red of left with the green and blue of the right. What should I search for on Ebay?
Click to expand...

Yes - with an additive blending mode, the red and cyan pixels in your scenario would equal white once blended. (Red (1,0,0) + Cyan (0,1,1) = White (1,1,1))

Since this is not a plugin, you'll need to recompile OBS from source in order to test the changes I've implemented - a guide on doing so is here: https://github.com/obsproject/obs-studio/wiki/Install-Instructions#macos-build-directions

...and as above, you'll need to recompile from the branch with my changes:
git clone --recursive https://github.com/jw0z96/obs-studio.git;
git checkout source-blending-modes

If you've not compiled software from source before, this may be more effort than it's worth, but good luck! Perhaps if this feature is deemed useful enough / suitable for integrating into OBS, I could submit a pull request.
 
Mario Mey

Mario Mey

New Member
I will try this branch. But, as I compile OBS, I had to do:

Bash: 
mkdir obs-studio-source-blending-modes
cd obs-studio-source-blending-modes
git clone --recursive https://github.com/jw0z96/obs-studio.git .
git checkout source-blending-modes

The point at the end of "git clone" is important.
 
J

jw0z

New Member
Mario Mey said:
I will try this branch. But, as I compile OBS, I had to do:

Bash: 
mkdir obs-studio-source-blending-modes
cd obs-studio-source-blending-modes
git clone --recursive https://github.com/jw0z96/obs-studio.git .
git checkout source-blending-modes

The point at the end of "git clone" is important.
Click to expand...
Hey - there are prebuilt binaries available on the pull request: https://github.com/obsproject/obs-studio/pull/5448#issuecomment-950413459

(I'll remove the instructions as they're incorrect, and that branch is out of date)
 
Mario Mey

Mario Mey

New Member
Thanks to WizardCM for those builts... but I'm on Linux, as you, @jw0z .
Oh, I had not find this patch as a PR. Now, I'll install it as a PR. I'll tell you later how it was.
 
Mario Mey

Mario Mey

New Member
Yap, done. I installed PR and built. Everything works fine! (for the moment)

I was thinking... as you wrote this PR, then you may know how to make some kind of "Additive transition", as Premiere has. I don't use Premiere, but I remember that there it is and it is nice. You can check it in https://www.youtube.com/watch?v=YuAWStHSR7I. I don't really know how it works, but maybe it is a double transition: the base one (Normal blending) and some kind of curve that rise and goes down of the second video with Add blending. I tried to reproduce it in Blender and I got this:
1635253371700.png


First, fire (B-video) appears with ADD blending and then the A-video starts fading to B-video.

As you can see, "CROSS" is "Normal" blending. Look at the curves. Everything is unaccurate, huh... I didn't make any math. I tried not to go beyond limits (when ADD layer is at its max +-80%, CROSS layer is at +-20%).

[EDIT]: I rendered this transition in Blender:
www.youtube.com

additive blending0001 0444

www.youtube.com www.youtube.com
 
Last edited:
J

jw0z

New Member
Mario Mey said:
Yap, done. I installed PR and built. Everything works fine! (for the moment)

I was thinking... as you wrote this PR, then you may know how to make some kind of "Additive transition", as Premiere has. I don't use Premiere, but I remember that there it is and it is nice. You can check it in https://www.youtube.com/watch?v=YuAWStHSR7I. I don't really know how it works, but maybe it is a double transition: the base one (Normal blending) and some kind of curve that rise and goes down of the second video with Add blending. I tried to reproduce it in Blender and I got this:
View attachment 76491

First, fire (B-video) appears with ADD blending and then the A-video starts fading to B-video.

As you can see, "CROSS" is "Normal" blending. Look at the curves. Everything is unaccurate, huh... I didn't make any math. I tried not to go beyond limits (when ADD layer is at its max +-80%, CROSS layer is at +-20%).

[EDIT]: I rendered this transition in Blender:
www.youtube.com

additive blending0001 0444

www.youtube.com www.youtube.com
Click to expand...

I think it should be relatively simple to add an "additive dissolve" as a transition plugin, but that's outside the scope of my changes. Take a look at obs-studio/plugins/obs-transitions/transition-fade.c for the regular fade - it should be possible to modify it's shader to achieve the effect you want.
 
T

tripletopper

Member
jw0z said:
Yes - with an additive blending mode, the red and cyan pixels in your scenario would equal white once blended. (Red (1,0,0) + Cyan (0,1,1) = White (1,1,1))

Since this is not a plugin, you'll need to recompile OBS from source in order to test the changes I've implemented - a guide on doing so is here: https://github.com/obsproject/obs-studio/wiki/Install-Instructions#macos-build-directions

...and as above, you'll need to recompile from the branch with my changes:
git clone --recursive https://github.com/jw0z96/obs-studio.git;
git checkout source-blending-modes

If you've not compiled software from source before, this may be more effort than it's worth, but good luck! Perhaps if this feature is deemed useful enough / suitable for integrating into OBS, I could submit a pull request.
Click to expand...

I read somewhere that this mode currently does work on the Macintosh version of the latest OBS revision. If so that should be the easiest way to go. I don't know how to use it though. If it's already there may have instructions on how to access it?


Otherwise is there a way I can have two versions of OBS one that's more battle tested for most things and one that's more experimental for my anaglyph project?

By the way I don't know how to do compiling of anything or how to use terminal mode. I know how to get there but I don't do anything without professionals help cuz everyone says you should not touch terminal mode unless you know what you're doing.
 
T

tripletopper

Member
Tho
jw0z said:
Yes - with an additive blending mode, the red and cyan pixels in your scenario would equal white once blended. (Red (1,0,0) + Cyan (0,1,1) = White (1,1,1))

Since this is not a plugin, you'll need to recompile OBS from source in order to test the changes I've implemented - a guide on doing so is here: https://github.com/obsproject/obs-studio/wiki/Install-Instructions#macos-build-directions

...and as above, you'll need to recompile from the branch with my changes:
git clone --recursive https://github.com/jw0z96/obs-studio.git;
git checkout source-blending-modes

If you've not compiled software from source before, this may be more effort than it's worth, but good luck! Perhaps if this feature is deemed useful enough / suitable for integrating into OBS, I could submit a pull request.
Click to expand...
My brother said Dune would be heavy reading. Frankly these instructions make Dune look like Dr Seuss. And yes I understand there's a different mentality in reading fiction vs coding instructions. I feel like Doug Funnie reading "A Critique of 'Pure Reason' ."
 
J

jw0z

New Member
tripletopper said:
I read somewhere that this mode currently does work on the Macintosh version of the latest OBS revision. If so that should be the easiest way to go. I don't know how to use it though. If it's already there may have instructions on how to access it?


Otherwise is there a way I can have two versions of OBS one that's more battle tested for most things and one that's more experimental for my anaglyph project?

By the way I don't know how to do compiling of anything or how to use terminal mode. I know how to get there but I don't do anything without professionals help cuz everyone says you should not touch terminal mode unless you know what you're doing.
Click to expand...

This should work fine on macOS - I've developed these changes on macOS (11.6) based on OBS 27.1(?), and it has been tested by others on both Windows & Linux.

Prebuilt versions of OBS that include this change are now available here:
macOS
Windows x64
Windows x86
Linux (Flatpak)
Linux (deb)
 
Mario Mey

Mario Mey

New Member
jw0z said:
I think it should be relatively simple to add an "additive dissolve" as a transition plugin, but that's outside the scope of my changes. Take a look at obs-studio/plugins/obs-transitions/transition-fade.c for the regular fade - it should be possible to modify it's shader to achieve the effect you want.
Click to expand...

I found out that the file is already in OBS compiled path, here: data/obs-plugins/obs-transitions/fade_transition.effect and if you change it, you modify it, you change the transition effect . Here is the new magic: where it says:
Code: 
float4 PSFade(VertData v_in) : TARGET
{
    float4 a_val = tex_a.Sample(textureSampler, v_in.uv);
    float4 b_val = tex_b.Sample(textureSampler, v_in.uv);
    float4 rgba = lerp(a_val, b_val, fade_val);
    rgba.rgb = srgb_nonlinear_to_linear(rgba.rgb);
    return rgba;
}
Modified:
Code: 
float4 PSFade(VertData v_in) : TARGET
{
    float4 a_val = tex_a.Sample(textureSampler, v_in.uv);
    float4 b_val = tex_b.Sample(textureSampler, v_in.uv);
    // Modified line (cuadratic ecuation)
    float4 rgba = lerp(a_val, b_val, fade_val * fade_val);
    rgba.rgb = srgb_nonlinear_to_linear(rgba.rgb);
   
    // Abreviation and the function
    float f = 2 * fade_val - 1;
    float fade_val_add = - 0.8 * ( f * f - 1 );
    // Creation of a vec4
    float4 b_val_f4 = vec4(b_val.rgb, 1);
    // Transformation to linear
    b_val_f4.rgb = srgb_nonlinear_to_linear(b_val_f4.rgb);
    // The addition
    rgba = vec4(rgba + b_val_f4 * fade_val_add);

    return rgba;
}

With help of a online functions/graphics calculator, I use these 2 functions: red for the mix, blue for the new addition.

1635441916600.png


And here is how it works:

Now, I think there's more to change to have another fade transition. Here, I think I have to change some C code and compile it.
 
T

tripletopper

Member
I just wanted to tell you that the additive option is working great for red and cyan anaglyphs.

Also I got a question about twitch and using a capture direct broadcast app. I have a program called USB Dual Camera Pro App. And it seems like there's a way I could broadcast just my direct camera feed straight to Twitch as a 3D stereo broadcast. They have something called rtmp servers that you can use and I don't know the exact syntax of how to make it work.

I know you need an rtmp server name and a twitch username and a twitch user key which I assume authorizes your use.
 
You must log in or register to reply here.
Top