Jump to content

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


Recommended Posts


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

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)

What I'm trying to achieve is something that works like in Indesign:

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'?

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...