Add opacity to vertice colors and instanced geometry

Changing these snippets in the library code:

var color_fragment = "#ifdef USE_COLOR\n\tdiffuseColor.rgb *= vColor;\n#endif";

var color_pars_fragment = "#ifdef USE_COLOR\n\tvarying vec3 vColor;\n#endif";

var color_pars_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvarying vec3 vColor;\n#endif";

var color_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvColor = vec3( 1.0 );\n#endif\n#ifdef USE_COLOR\n\tvColor.xyz *= color.xyz;\n#endif\n#ifdef USE_INSTANCING_COLOR\n\tvColor.xyz *= instanceColor.xyz;\n#endif";
....
gl.vertexAttribPointer( programAttribute, 3, type, false, 12, 0 );
....
'	attribute vec3 instanceColor;',
'	attribute vec3 color;',

to

var color_fragment = "#ifdef USE_COLOR\n\tdiffuseColor *= vColor;\n#endif";

var color_pars_fragment = "#ifdef USE_COLOR\n\tvarying vec4 vColor;\n#endif";

var color_pars_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvarying vec4 vColor;\n#endif";

var color_vertex = "#if defined( USE_COLOR ) || defined( USE_INSTANCING_COLOR )\n\tvColor = vec4( 1.0 );\n#endif\n#ifdef USE_COLOR\n\tvColor *= color;\n#endif\n#ifdef USE_INSTANCING_COLOR\n\tvColor *= instanceColor;\n#endif";
....
gl.vertexAttribPointer( programAttribute, 4, type, false, 16, 0 );
....
'	attribute vec4 instanceColor;',
'	attribute vec4 color;',

makes it possible to use per vertex transparency in meshes (where vertexColor is used) and also apply opacity per instance in instanced meshes.

I haven’t checked all materials but there is an example of instanced and simple mesh:

opacity_test

https://jsfiddle.net/tfoller/kyam29g5/12/

With the abovementioned changes made, this is how to provide full color for instanced geometry:

mat.transparent = true;
stars.instanceColor = new THREE.BufferAttribute(new Float32Array(color), 4);

and for normal geometry:

geo2.setAttribute('color', new THREE.Float32BufferAttribute(color2, 4));
mat2.vertexColors = true;

FYI: Vertex colors with alpha channel for non-instanced geometries was added with r127:

However, InstancedMesh does not support instanced color attributes with alpha yet.

1 Like

Oh nice, I’m using 126 and I wasn’t aware of that, even less work left for instances then.

Personally, I’d go with “color” being RGBA and enable/disable the whole shebang, otherwise it’s confusing that vertexAlphas actually enables not just alpha on top of vertexColors but all the channels and there is no need to use both parameters together. Also less variables and logic required.