link Posted June 26, 2021 Share Posted June 26, 2021 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 .. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 26, 2021 Share Posted June 26, 2021 (edited) 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 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 26, 2021 Share Posted June 26, 2021 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 Quote Link to comment Share on other sites More sharing options...
link Posted June 26, 2021 Author Share Posted June 26, 2021 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! Quote Link to comment Share on other sites More sharing options...
link Posted June 26, 2021 Author Share Posted June 26, 2021 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 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 27, 2021 Share Posted June 27, 2021 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.