Blendmode.add behaving strangely

[charlie_says]

I've made this test:

var game = new Phaser.Game(400, 400, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create, update: update });var bmd1, bmd2var img1, img2;function preload(){  	game.stage.backgroundColor = 0x222222;  	game.load.image('monster', 'images/monstah.png');}function create(){	bmd1 = game.make.bitmapData(80, 96);	bmd1.draw(game.cache.getImage('monster'), 0, 0);    	bmd2 = game.make.bitmapData(80, 96);	bmd2.draw(game.cache.getImage('monster'), 0, 0);    	img1 = game.add.sprite(30,30, bmd1);	img2 = game.add.sprite(60,30, bmd2);	img1.blendMode = PIXI.blendModes.NORMAL;	img2.blendMode = PIXI.blendModes.ADD;// }function update(){}

If you change img2.blendModes to NORMAL, you see the grey background, if you have it as ADD the grey fades to white.

 

If you change the rendering from canvas to webGL it appears to be fine...

 

Any ideas as to what is happening? (And, how to fix it.)

 

<edit> I did a quick check - this behaviour is consistent in FF, Chrome & Safari

[charlie_says]

Ok - it seems the above issue is caused by not having a background, so adding a black bitmapdata sprite fixes the issue...

var game = new Phaser.Game(400, 400, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create, update: null });var bmd0, bmd1, bmd2var img0, img1, img2;function preload(){  	game.stage.backgroundColor = 0x123456;  	game.load.image('monster', 'images/monstah.png');}function create(){	bmd0 = game.make.bitmapData(400, 400);	bmd0.fill(0,0,0)	bmd1 = game.make.bitmapData(80, 96);	bmd1.draw(game.cache.getImage('monster'), 0, 0);    	bmd2 = game.make.bitmapData(80, 96);	bmd2.draw(game.cache.getImage('monster'), 0, 0);    	img0 = game.add.sprite(0,0, bmd0);	img1 = game.add.sprite(30,30, bmd1);	img2 = game.add.sprite(60,30, bmd2);	img0.blendMode = PIXI.blendModes.NORMAL;	img1.blendMode = PIXI.blendModes.NORMAL;	img2.blendMode = PIXI.blendModes.ADD;//}function update(){}

BUT

 

this raises another issue - this test doesn't do anything, it simply creates 3 images and adds the top image, and yet the CPU usage for the browser ramps up to 25%...

 

What is causing this?

[lewster32]

Canvas has to manually calculate the blending modes rather than have it done on the GPU - and because canvas has to redraw the frame 60 times per second, it has to calculate it every frame. This makes blend modes in canvas rather more intensive than webGL.

[charlie_says]

Thanks for that - so is it calculating the 'add' every frame, even though it's only effectively needed once?

[lewster32]

Yeah, because the canvas is cleared every frame. This is unfortunately just the way canvas works - it's still very fast for it, but I guess blend modes on certain machines just push it over the edge.