ID:1702392
 
Applies to:Webclient
Status: Open

Issue hasn't been assigned a status value.
Descriptive Problem Summary:
Using atom.blend_mode = BLEND_SUBTRACT or BLEND_MULTIPLY defaults to BLEND_DEFAULT when using the web client.

Though the canvas 2D rendering context spec is missing a globalCompositeOperation of "darker", the effect can still be achieved. Use context.getImageData() to get a chunk of the image in the form of an array. The array is ordered such that the pixel data follows this indexing pattern:
r1,g1,b1,a1,r2,g2,b2,a2, ... rN,gN,bN,aN

You can then subtract the pixel data from the higher layered atom from the pixel data of the lower layered atom:
function subtractImageData(imageDataLow, imageDataHigh){
for(var/I = 0; I < imageDataLow.length; I+=4){
var/highAlpha = imageDataHigh[I+3]
imageDataLow[I ] -= imageDataHigh[I ]*highAlpha
imageDataLow[I+1] -= imageDataHigh[I+1]*highAlpha
imageDataLow[I+2] -= imageDataHigh[I+2]*highAlpha
}
return imageDataLow
};

When you're all done, use context.putImageData(). The same could be done to achieve BLEND_MULTIPLY

...

My current project takes place in a cave underground, and lighting is a huge part of it. I'm using BLEND_SUBTRACT with three overlays (rgb) to remove the light which is /not/ falling on the object. This allows me to give the effect of adding light to an object, instead of adding shadow. Here's how it looks in DS vs the Web Client:
Multiplicative blends are actually supported already, so you could use those. (IE11 can't hack it in Canvas2D mode, but then it also can't handle a lot of maptext properties.) As far as I can tell, the only current major browser that currently doesn't handle blend modes is IE11; even iOS should handle them. WebGL also can handle multiplicative blending.

Proper subtractive blending doesn't appear to have much support. I'm not sure why.

Implementing blend modes at a low level isn't really something we're prepared to do, though, since we do all our rendering through StageXL. While with JIT this might not be a performance killer (at least not with an optimized loop), I don't know if there's anywhere that StageXL would easily let us hook in to handle this ourselves.
I believe StageXL is just forwarding the flags onto the native implementation of this in the browser (as defined by the HTML5 tenatative spec), but there may be custom ways to override. I'll take a look. There are also some other modes that we currently don't pass through, but that would be trivial. I was secretly hoping no one was using BLEND_SUBTRACT.
Don't spend any time working on it unless you're curious or something. This was less a "I need this fixed" and more of "I've exhausted all my possibilities. Make a feature request for sake of closure."

I will look into BLEND_MULTIPLY, though. Thanks for the responses.