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.

2 Likes

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.

1 Like

Iā€™ve created a PR for this: Add alphas channel for instanced meshes. Update example. by Displee Ā· Pull Request #25211 Ā· mrdoob/three.js Ā· GitHub

However, Iā€™m also interested in color per vertex per mesh in an instanced mesh. Am currently figuring out how I will model thatā€¦

Good question, I have a feeling you canā€™t use InstancedBufferAttribute and BufferAttribute together, I never tried.

Vertex alphas are not documented yet at time of writing this. I also didnā€™t see any example that uses the feature (unless I missed it).

I looked in the source and realized itemSize 4 allows passing RGB for the vertexColors feature.

Hereā€™s an unofficial documentation I just posted:

@trusktr: And how your documentation is different from what I already posted here?

  • it is on StackOverflow
  • doesnā€™t instruct to make a custom shader

The solution that I just quoted is exactly your ā€œunofficial documentationā€ and doesnā€™t require a custom shader either.

I donā€™t see any point in copy/pasting my solution back to me in the thread that I opened a year ago.

Posting it on SO doesnā€™t make it different and I think itā€™ll be helpful if you linked this thread as the original source there.

My comment was more-so about mentioning that three.js/docs does not include this information (and a reminder for my self or someone to eventually add them).

webgl_buffergeometry generates RGBA vertex colors.

Regarding the documentation: Would you guys be okay when we enhance the description for Material.vertexColors like so:

The engine support RGB and RGBA vertex colors by using a three (RGB) or four component (RGBA) buffer attribute.

3 Likes

Sounds nice!

Hereā€™s an alternative:

The engine supports RGB and RGBA vertex colors depending on whether a three (RGB) or four (RGBA) component buffer attribute is used.

1 Like
2 Likes