Sprites from buffer seem weird when use under blendMode

[link]

I had made a codePen demo to show this case(and 2 screen-capture-images below)

https://codepen.io/tomleader/pen/jOmNWJG

There are 3 buttons(click to see the result)

1. use img: The most common way , sprite.from(imgUrl), everything is ok!

2. use buffer: a little tricky.. the process is [new a Image obj and set src=url, draw Image to another canvas, getImageData from canvas, make a texture from imgData buffer, sprite.from(texture)], and the result seems weird!

3. use dataUrl: the process is [new a Image obj and set src=url, draw Image to another canvas, canvas.toDataURL, make a texture from dataURL, sprite.from(texture)], and the result seems ok!

So I think maybe the fromBuffer(imgdata) lost some pixels opacity data? OR I have some mistakes in my code? Any suggestions? Thanks ..

 

[ivan.popelyshev]

Welcome to the web and GL. 

http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/

pixi has special "baseTexture.alphaMode" setting , you can specify whether input is already premultiplied (PMA = 2) or it has to be premultiplied on upload (UNPACK = 1, default option)

maybe fromBuffer() ( aka BufferResource) somehow assumes option that is not 1, but i checked the code - it seems clean.

Special for you, something I found on twitter...

 

Edited June 26, 2021 by ivan.popelyshev

[ivan.popelyshev]

I honestly dont want to dig in which function returns what you not expect, I spent on this problem many hours. Pixi allows you to specify alphaMode, unlike other html5 renderers - try use different values of it

[link]

6 hours ago, ivan.popelyshev said:

I honestly dont want to dig in which function returns what you not expect, I spent on this problem many hours. Pixi allows you to specify alphaMode, unlike other html5 renderers - try use different values of it

? haha~I also spend hours on this weird problem.. I'll try to set the alpha values to see what happen..

Anyway thank you very much!

[link]

updated:

After I learn the article in 2nd floor(hours later?).. I realize that the when I try to blend texture I missed the most important part 'Premultiplied Alpha'

anyone if u meet some problem like mine , I think the solution would be:

 Check the image resource is premultiplied or unpremultiplied, then set the texture options base by https://pixijs.download/dev/docs/PIXI.html#ALPHA_MODES

And...thanks to the Mr.MasterofGL.Ivan?

[ivan.popelyshev]

Thank you!

Sometimes you have to "post-divide" : 

https://github.com/pixijs/pixijs/blob/af3c0c6bb15aeb1049178c972e4a14bb4cabfce4/packages/extract/src/Extract.ts#L149

https://github.com/pixijs/pixijs/blob/af3c0c6bb15aeb1049178c972e4a14bb4cabfce4/packages/extract/src/Extract.ts#L268-L288

sometimes even in shader:

https://github.com/pixijs/pixi-picture/blob/aed834cbf877148ad4f9d485f0d23b16b2708784/src/ShaderParts.ts#L5-L17

Edited June 27, 2021 by ivan.popelyshev