• Note that setting premultiplied alpha on the context affects alpha blending. You will have to multiply the output color by the output alpha yourself. Note also that almost all frameworks get this badly wrong (for instance three.js) which uses mixed multiply code, that sometimes does the multiply in the shader, and sometimes does not. The effect of which is that you might get white haloes or black borders.

  • Note that setting premultiplied alpha on the context affects alpha blending. You will have to multiply the output color by the output alpha yourself. Note also that almost all frameworks get this badly wrong (for instance three.js) which uses mixed multiply code, that sometimes does the multiply in the shader, and sometimes does not. The effect of which is that you might get white haloes or black borders.

  • Mr.doob

    Uhm… do you think that would be a good idea if three.js would default to alpha: false? Is it more performant?

  • It ‘can’ be more preformant because the browser can turn off blending when compositing. Chrome does this. How much it impacts perf I don’t know.

  • Correct. Though just to be clear, premultiplied alpha is the default.

  • If you don’t have layers acceleration, and your browser is smart enough to bypass the compositor, then it will be vastly faster. The software compositers seem to eat all your CPU.

    If you are luck enough to have layers acceleration, it will still be faster as you are not wasting fillrate (which is a scarce resource on an integrated GPU) compositing an opaque surface on top of an other surface.

  • Mark Ivey

    In addition to turning off premultipliedAlpha, I’m finding it helpful to change the blending equation so the buffer’s transparency can’t increase when rendering.

    The standard gl.BlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) results in this blending equation for the alpha channel:
    A = Asrc * Asrc + Adest * (1 – Asrc)

    If you start with an opaque buffer (alpha=1) and render a transparent polygon (alpha=.5), the result is that the buffer is now partly transparent (alpha=.75).

    Using gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA), the blending equation becomes:
    A = Asrc + Adest(1 – Asrc)

    With this, rendering can only make the buffer more opaque. This matches how the 2D API works.

  • Joel

    Ok this is a bit of a reanimation but. As I read, IE11 should support the premultipliedAlpha:false parameter but in my tests I always get RGB values off by 1 or so. Have you managed to get non premultiplied textures in IE11?