three.js: Incorrect brightness when gl_FragColor is semi-transparent.

Right now in the ThreeJS GLSL shaders, if there is a bright specular highlight on a transparent material, the highlight is not rendered correctly.

For example let say that at the end of the shader, the gl_FragColor = ( 8, 8, 8, 0.1 ). This should result in a bright highlight of let’s say (0.8,0.8,0.8) being written to the frame buffer. But in fact, the values of gl_FragColor are clamped into the range of [0,1] before the value is passed to the gl.BlendFunc, thus even if you write gl_FragColor = (8,8,8, 0.1), it is actually equivalent to writing gl_FragColor = ( 1.0, 1.0. 1.0, 0.1 ), because the values will be clamped, which will result in a value of (0.1, 0.1, 0.1) being written to the frame buffer, much lower than the correct (0.8,0.8, 0.8) value.

I found a way to get around this artificial clamping of brightness on semi-transparent objects. The trick is to pre-multiply. Thus one would do this:

gl_FragColor = vec4( gl_FragColor.rgb * gl_FragColor.a, gl_FragColor.a )

And then change the blending modes for the material as follows:

    material.blending = THREE.CustomBlending;
    material.blendSrc = THREE.OneFactor;    // output of shader must be premultiplied
    material.blendDst = THREE.OneMinusSrcAlphaFactor;
    material.blendEquation = THREE.AddEquation;

The above settings do the standard blending but assumes a pre-multiplied gl_FragColor as input and it retained the whole range of acceptable intensities.

Here is a comparison of the improved results possible by using pre-multipled alpha in the gl_FragColor for high intensity semi-transparent materials – this change is already live on Clara.io:

I am unsure if there are side effects to using pre-multiplied alpha. I suspect because the gl_FragColor.a is unchanged, there is few side effects.