Jump to content

Sprite color distortion --- how do I disable Premultiplied?


Recommended Posts



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!




Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...