Premultiplied alpha on materials

[bhouston]

Using premultiplied alpha on materials leads to better results for areas where there are specular highlights on transparency when using RGBA8 buffers. This change should be perfectly backwards compatible, but allows for easy usage of premultiplied alpha when desired.

This was discussed here: #5810 Clara.io has been running for more than year with premultiplied alpha to great results. I'd like to get this option into ThreeJS proper, at least as an option that people can use.

[mrdoob]

We need to add parameters.premultipliedAlpha = material.premultipliedAlpha to WebGLPrograms.js too.

[WestLangley]

As an alternative API, consider what I said in #5810 (comment):

In fact, we could add a new blending option: THREE.PremultipyAlphaBlending, making the setting of the blending even easier.

That way, all you have to do in javascript is set:

material.blending = THREE.PremultipyAlphaBlending;

The new property material.premultipliedAlpha is not required, and the user does not have to specify a custom blending mode.

The new THREE.PremultipyAlphaBlending blending option does this:

_gl.blendEquation( _gl.FUNC_ADD );
_gl.blendFunc( _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );

In the shader, you would add this, instead:

#ifdef PREMULTIPLIED_ALPHA_BLENDING

    gl_FragColor.rgb *= gl_FragColor.a;

#endif

[bhouston]

I've fixed a few bugs with the implementation, switch from the boolean material.premultipledAlpha to material.blend = THREE.PremultipledAlphaBlending and then I have added an example:

http://ci.threejs.org/api/pullrequests/8245/examples/webgl_materials_transparency.html

[bhouston]

Here is an example of the different premultiplied alpha has - it is drastic:

[WestLangley]

#ifdef PREMULTIPLIED_ALPHA_BLENDING

gl_FragColor.rgb *= gl_FragColor.a;

#endif

We do not want this to be confused with renderer.premultipliedAlpha.

[bhouston]

@WestLangley thank you for the valuable feedback. :)

You are right that I should make those changes. One issue though is that I have already built another PR (#8250) on top of this one and it included other refactors. Given that this feedback is about internals, and not about public interfaces, could we merge this and possibly the other PR (inline tonemapping) and then I can make these non-interface refactoring changes?

[WestLangley]

@bhouston Sure. Merge and fix later.

[mrdoob]

Thanks guys!

[mrdoob]

One thing though....

Is there a way to make this the default? In the previous approach (material.premultipliedAlpha) I liked that we could just se that to true by default.

With the new material.blending approach (which I like better) seems like the user needs to change the blending by hand, it won't just work by setting transparent: true in the material.

[bhouston]

Well you could set Material.blending = THREE.PremultipliedAlphaBlending in Material.js?

[bhouston]

We could also rename THREE.PremultipliedAlphaBlending to be THREE.PremultipledAlphaNormalBlending, which suggests this is the normal mode. It is a bit long through. We can then have other THREE.PremultipledAlphaAddBlending, etc.

[mrdoob]

Well you could set Material.blending = THREE.PremultipliedAlphaBlending in Material.js?

I think that should do. However, what happens if the user wants premultipliedAlpha but with AdditiveBlending?

[WestLangley]

Discussion continued in #8255