Include vertex color alpha?

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.

[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.