blendMode only working with ADD, OVERLAY and SCREEN

[chewey]

Hi,

I cannot get blendMode to work with anything but ADD, OVERLAY and SCREEN. Its not down to browser as I have tested working versions that use all the other blend modes in all the browsers Im using outside of PixiJS, so could it be down the the wrong version of Pixi?

I tried this here, http://codepen.io/ianmcgregor/pen/CtjeI which allows you to upload a test image and live set the blendmode, and it definitely does not work for me, other than the three mentioned.

My code is just standard generate a sprite and apply the blend mode to it

myObject.blendMode = PIXI.BLEND_MODES.DIFFERENCE;

Am I right in thinking that Pixi can actually use all the other blend modes? the site examples seems to suggest you can - hence Im thinking my version of Pixi might be dated...

[ivan.popelyshev]

In WebGL its not possible to implement anything except ADD , MULTIPLY and SCREEN. However, I have a workaround: https://github.com/pixijs/pixi-picture .

PictureSprite can work with OVERLAY and HARD_LIGHT, and you can fork the repo and add other blendmodes, I had the link with formulaes somewhere...

Please note that:

1) Its as performant as filters

2) It is better to wrap the stage or at least container that contains all elements with blendModes inside a VoidFilter, otherwise plugin will depend on gl.readPixels method WHICH IS VERY SLOW.

var screenRect = new PIXI.Rectangle(0,0, renderer.width/renderer.resolution, renderer.height/resolution);

stage.filter = new PIXI.VoidFilter();
stage.filterArea = screenRect;

//change screen rect every resize

 

[chewey]

Ok, thats great - Im not as savvy with programming as you though. The code you linked to is a filter? or a plugin? and how does it / do you get it to work within the Pixi framework? or does it get loaded into my working root? is gulp required?

I use Pixi in a local folder in which an HTTP server is active for me to see the working Pixi code.

What is a void filter? Im imagining that its excluding certain stuff from being processed? - I cannot find anything related to it in a search...

 

Many thanks

[ivan.popelyshev]

1) pixi-v4 is required. Our binary files are in a bit of disarray, and if you cant buld from sources, please take the one from my dropbox - https://dl.dropboxusercontent.com/u/46636530/pixijs/bounds/pixi.js

2) add https://github.com/pixijs/pixi-picture/blob/master/bin/pixi-picture.js to your website

3) use PictureSprite instead of Sprite, just try to use it for 10000 images , it will blow up. Specify blendMode for it, OVERLAY and HARD_LIGHT are supported. If you want to more, go figure out how to modify the plugin, i can give you links to formulaes for every blendmode.

4) VoidFilter is ensuring that your stuff is rendered into FrameBuffer and only after that it goes to canvas. Copying the part of framebuffer is fast, while copying part of canvas is extremely slow.

I do not know of other engines or plugins which can do those blendModes in webGL. I am sorry that plugin is not yet integrated in pixi and there are only two blendModes.

[chewey]

Thanks Ivan, I will endeavour to make this happen.