Search the Community
Showing results for tags 'premultiplied'.
-
Sprite color distortion --- how do I disable Premultiplied?
UltimateWalrus posted a topic in Pixi.js
Hello, I am experiencing what I think is a quirk of WebGL's premultiplied rendering. My *.PNG sprites are getting rendered with slightly different RGB values than in the source file. However, a *.BMP sprite renders with perfect color, which supports my hypothesis that WebGL's premultiplied alpha is to blame. Basically, I just want to know how to disable premultiplied alpha for a texture in PIXI. Here is a screenshot (pull it up in Photoshop and sample the colors if you don't believe me): : Here is my source: var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb}); document.body.appendChild(renderer.view); // create the root of the scene graph var stage = new PIXI.Container(); //Create a BMP sprite so we know what the colors are supposed to look like var bmp_spr = PIXI.Sprite.fromImage( 'test.bmp' ); stage.addChild(bmp_spr); //Create a PNG sprite to demonstrate the distorted colors var png_spr = PIXI.Sprite.fromImage( 'test.png' ); png_spr.position.x = 64; stage.addChild(png_spr); //Try to create a non-premultiplied PNG sprite to fix the problem var base_tex = PIXI.BaseTexture.fromImage( 'test2.png' ); base_tex.premultipliedAlpha = false; var tex = new PIXI.Texture( base_tex ); var nomult_spr = new PIXI.Sprite( tex ); nomult_spr.x = 128; stage.addChild( nomult_spr ); // start animating animate(); function animate() { requestAnimationFrame(animate); // render the container renderer.render(stage); }Test images are attached. Normally I'd be all for the speed boost that comes from premultiplying alpha, but it's ruining a shader I'm trying to write, where the tiny color differences butterfly effect out into huge glitches. I tried to disable premultiplied alpha in the source above but it didn't correct the colors, all it did was disable transparency. Thanks for any help! ---Sebastian test.bmp