search

obsproject / obs-browser

CEF-based OBS Studio browser plugin
GNU General Public License v2.0
769 stars 217 forks source link

CSS mix blend mode with transparent browser source doesn't blend into layers below #443

Closed jessicah closed 2 months ago

jessicah commented 2 months ago

Operating System Info

Windows 10

Other OS

No response

OBS Studio Version

30.1.2

OBS Studio Version (Other)

No response

OBS Studio Log URL

https://obsproject.com/logs/0wS9xtqmnp1bBDMV

OBS Studio Crash Log URL

No response

Expected Behavior

Expected mix-blend-mode of a transparent browser source to affect layers/sources below the browser source.

How it would look with proper blending (screenshot from Inkscape): image

Current Behavior

The mix-blend-mode acts as if there is no background from other OBS sources, so has no effect on the final image.

How it currently looks, no blending done: image

Steps to Reproduce

Add a background image, and then browser source on top using an SVG with mix-blend-mode.

Included sample image and SVGs, and basic OBS scene.

japan001 map fragment on background map fragment plain

Anything else we should know?

No response

WizardCM commented 2 months ago

The contents of a browser source are isolated. A browser source has no idea what is behind it. It just has a transparent background.

There are no plans to attempt to hack a method for browser sources to know what's behind them.

OBS sources themselves do support some blending modes:

image

And you may be able to achieve the same effect with third party plugins, such as with a shader filter.