Include vertex color alpha?

[kion-dgl]

Description of the problem

I'm working with a set of models that use vertex color alpha. Now that threejs uses buffer geometry almost exclusively, adding in vertex color alpha is pretty simple, and it would be nice to see these changes upstream. The changes mostly involve declaring color as a vec4 instead of vec3.

'#ifdef USE_COLOR',
'   attribute vec4 color;',
'#endif',

var color_fragment = `
#ifdef USE_COLOR
    diffuseColor.rgb *= vColor.xyz;
    diffuseColor.a *= vColor.a;
#endif 
`;

var color_pars_fragment = "#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif\n";
var color_pars_vertex = "#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif";
var color_vertex = "#ifdef USE_COLOR\n\tvColor.xyzw = color.xyzw;\n#endif";

Example Without Vertex Color Alpha

Example With Vertex Color Alpha

Three.js version

• [ x ] Dev
• r104
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

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

Hardware Requirements (graphics card, VR Device, ...)

[looeee]

The changes mostly involve declaring color as a vec4 instead of vec3.

Unfortunately, doing that will break all of the existing models that have RGB vertex colors so it's not that simple.

See previous discussions: #2118 and #6014

It would be nice to revisit this issue and add support for RGBA vertex colors at some point. That would match the glTF spec which supports both RGB and RGBA .

In the meantime, you will need to create a custom shader to achieve this.

[kion-dgl]

Unfortunately, doing that will break all of the existing models that have RGB vertex colors so it's not that simple.

Specifically in geometry, buffer.fromGeometry, and then in importers that parse directly to buffers. I suppose that the library would have to declare a warning to indicate upcoming changes if rgba color is going to be implemented.

See previous discussions: #2118 and #6014

I've read over #6041, though the issue was closed in 2015 for what seem to be technical issues at the time.

It would be nice to revisit this issue and add support for RGBA vertex colors at some point. That would match the glTF spec which supports both RGB and RGBA .

I'm glad you agree. Now that Threejs has started moving towards buffer geometry (almost exclusively), it seems like a good time to take the issue into consideration. Another approach would be to add alpha as a separate vec1 attribute, or declare a separate 'colora' vec4 with alpha.

In the meantime, you will need to create a custom shader to achieve this.

In the meantime I'll continue to clone and add the changes into the existing shaders for the projects I use threejs. It is nice to be able to create a MeshBasicMaterial and have vertex color alpha "just work".

[donmccurdy]

Related: #14008 (comment).

[kion-dgl]

I made a short demo that can be viewed here: https://dashgl.gitlab.io/vertexcolor/

Included are three different patterns. buffer geometry, geometry, and buffer.fromGeometry. BufferGeometry is fine, since you're writing the directly, fromGeometry generally requires adding in a 1.0 for the alpha value, and there are no errors being thrown from the geometry. In terms of source code, the changes required seem minimal on a surface level. So I'm guessing the real question is how much of an effect will these small changes have on developer experience and backwards compatibility?

[chubei]

@donmccurdy guided me here. I’ll leave my implementation for discussion.

In https://github.com/chubei/three.js/tree/opacity, I added an aOpacity attribute, which is controlled by a shader macro USE_OPACITY, which is then controlled by a material property vertexOpacities (all of this mirrored the implementation of vertex colors).

In this way, users only pay for the vertex opacity attribute if they choose to.

[mrdoob]

I like @chubei's solution. Hoping he turns it into a PR 🤞🤓

[chubei]

@mrdoob Thanks. I'll find time for it this week.

[Mugen87]

by a shader macro USE_OPACITY

Maybe USE_VERTEX_OPACITY? Seems more clear to me.

[chubei]

@mrdoob Since we're still discussing in #20846, I think I'll wait until the discussion reaches conclusion.