Material: Add alphaToCoverage.

[Mugen87]

Related issue: Fixed #12438.

Description

Added Material.alphaToCoverage. The custom shader in webgl_materials_wireframe was modified similar to @mattdesl wireframe code in order to demonstrate the feature.

[WestLangley]

I always advise to stop the spinning demos so one can actually see what is going on. When I do so, I get this:

before:

another before:

after:

[WestLangley]

Maybe restoring this would help

gl_FragColor = gl_FrontFacing ? vec4( 0.9, 0.9, 1.0, 1.0 ) : vec4( 0.4, 0.4, 0.5, 1.0 );

[Mugen87]

@WestLangley I've added your improvements to the PR.

[WestLangley]

Now larger triangles have thicker lines.

before

after

[Mugen87]

Now larger triangles have thicker lines.

This is part of the wireframe style and also present original demo.

https://mattdesl.github.io/webgl-wireframes/app/

[WestLangley]

Now larger triangles have thicker lines.

This is part of the wireframe style and also present original demo.

It is not present in the current three.js demo, or any three.js wireframe shaders.

I'd hate to lose the current shader as an example.

[WestLangley]

Maybe there is a shader that combines the best features of both the new and the old shader... :-)

[Mugen87]

I've restored the original shader and just added the new option as a third mesh.

[Mugen87]

Pragmatism FTW!

[takahirox]

To clarify. You closed the alphaToCoverage PR #12445 before, and now you came up with a good example so thought it would be good time to go with this new property?

[Mugen87]

Yes. I've written here that an example is important to understand/demonstrate the effect of this new property.

However, this was not the primary reasons I've revisited this topic. While investigating #20522, I've realized that AtC is useful in that context, too.

[mrdoob]

Thanks!

[mrdoob]

@Mugen87 Thinking about this a bit more...

What do you think about hiding this from the user and enabling it automatically like this?

if ( material.transparent === true && gl.getContextAttributes().antialias === true ) {

    enable( gl.SAMPLE_ALPHA_TO_COVERAGE );

} else {

    disable( gl.SAMPLE_ALPHA_TO_COVERAGE );

}

[Mugen87]

The thing is that you can use AtC even without transparent set to true (an example for this is the wireframe demo). I think it's better and more safe to have a material property for this. At least for now.

[mrdoob]

I see... Was trying to avoid having to expose this in the editor and co.

[gkjohnson]

What do you think about hiding this from the user and enabling it automatically like this?

I believe alpha to coverage has to be specifically accommodated when making a shader, texture, or material. I don't think it will "just work" in the general case. If you use it on just a basic transparent material you can see that the opacity seems to jump to bands as you animate it up and down as the alpha is mapped to MSAA blending from coverage. It's best used when trying to smooth something like an alpha clip edge.

[mrdoob]

Okay. Sounds good 👍

[Mugen87]

@gkjohnson Yes, this is also my understanding.

[mrdoob]

@WestLangley What do you think about removing the old shader now?

https://raw.githack.com/mrdoob/three.js/dev/examples/webgl_materials_wireframe.html

[WestLangley]

What do you think about removing the old shader now?

There should be two separate examples for now: webgl_ and webgl2_.

EDIT: Apparently, reverting to GLSL1 is going to be sufficient, so I think removing the old shader is OK.

[mrdoob]

Is Alpha to Coverage WebGL2 only?

It's true that the shader-based wireframes do not render in Safari...

[gkjohnson]

Looking at the MDN constants page it looks like SAMPLE_ALPHA_TO_COVERAGE is supported in WebGL 1.

The shaders in the example won't work in WebGL2 / Safari because they were set to GLSL3 but I don't think it's a requirement?

glslVersion: THREE.GLSL3

[Mugen87]

Is Alpha to Coverage WebGL2 only?

Like @gkjohnson said, it also works with WebGL 1.

The shaders in the example won't work in WebGL2 / Safari because they were set to GLSL3 but I don't think it's a requirement?

No it's not. I've just used the more modern GLSL3 syntax out of pure habit. It is not a big deal to go back to GLSL1.