Jump to content

blendMode only working with ADD, OVERLAY and SCREEN


Recommended Posts


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


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...

Link to comment
Share on other sites

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


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

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...