balance

Need blendmode 'screen' on sprite to not react against white background rectangle

Recommended Posts

Hi,

I have a need to put blendmode 'screen' on a sprite that is on top of a white rectangle to work as if the white rectangle and the canvas background was transparent.

1. Example of current situation
https://www.pixiplayground.com/#/edit/MYDi0QdKVWk4MoO~uQ9Pd

Here you can see that the sprite is blended in against the white rectangle to the left, and aginst the canvas background to the right.
I need this to not happen, meaning the canvas background and white rectangle should be treated by the blendmode as transparent.
The reason is that the white rectangle and canvas background is just for the visual purpose of showing a page you can put things on.

2. How I need the sprite to actually look (even though there will be a white background rectangle, and canvas background color)
https://www.pixiplayground.com/#/edit/J~mzZDlvWdnSZs_2pcBZd

What I'm trying to achieve is something that works like in Indesign:
image.png.de23ec9e512d0a3398779a0ec8c62ede.png

In the screenshot from Indesign above you see a page, you put things on the page, but the blendmode acts as if the page is transparent - not white.
You can see that the blendmode works as expected against the white background rectangle, but treats the white of the page as transparent.

TLDR; Is there a way I can have the white background rectangle and the canvas background be treated as transparent like in Indesign, when the foreground sprite has blendmode 'screen'?

Share this post


Link to post
Share on other sites

1. the sprite gets blended to our canvas framebuffer , which contains your white rectangle.

2. all canvas is blended with NORMAL (no way to change that) blendmode to page background by a browser, we cannot control that.

According to https://github.com/pixijs/pixi.js/blob/v4.x/src/core/renderers/webgl/utils/mapWebGLBlendModesToPixi.js#L20 , our screen blendmode has [gl.ONE, gl.ONE_MINUS_SRC_COLORcoefficients for both color and alpha, and all colors are premultiplied. You can try to change that with direct hack, modifying blend talbe that is used by "renderer.state" or through method described in this topic, IT DEPENDS ON PIXI VERSIONM WHETHER ITS V4 OR V5:

Unfortunately, most of those kind of cases are unsolvable if you dont take pen and paper and start writing formulaes for blending.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.