Alpha to Coverage Support

[mattdesl]

Feature: Support Alpha To Coverage

It would be nice to support a flag for Alpha to Coverage. This feature has existed in WebGL contexts for a while, however, it seems hardly used in practice.

It can be used to create really crisp alpha cutouts with MSAA-enabled contexts.

When enabled, you no longer need to specify alphaTest or perform a discard in the fragment shader, you simply output the frag alpha and the GL context will handle cutouts. You can read more about it here, including some tricks to make things even smoother.

// enable alpha to coverage with current ThreeJS renderer
const gl = renderer.getContext();
gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);

This feature assumes MSAA is enabled and supported (i.e. may not work in external monitors).

Here is an example wireframe shader using alpha to coverage:
https://mattdesl.github.io/webgl-wireframes/app/

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

[haroldiedema]

I've tried implementing this in my game engine but had to revert it back once I found out that it completely breaks with any material that has an opacity < 1.0.

Take this for example:

let renderer = new THREE.WebGLRenderer();
let mesh     = new THREE.Mesh(
    new THREE.BoxBufferGeometry(1, 1, 1),
    new THREE.MeshPhongMaterial({ color: 0xff0000, opacity: 0.75, transparent: true })
);

// Enable AtoC
const gl = renderer.getContext();
gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);

You would expect a red box with 75% opacity, but with AtoC enabled, the box disappears entirely.

Though I am unsure if this is just a matter of configuring some extra parameters on the WebGL context or not. It looks like it needs some more work in order for this to function properly within Three.

The reason why I would really like to have this enabled is that of the vast amount of foliage I'd like to have in my scenes. This does make it look really nice. However, breaking any semi-transparent material is too much of an issue. Even things like particles that fade out slowly are just not rendering at all.