Add opacity to vertice colors and instanced geometry

[tfoller]

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:

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;

[Mugen87]

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

Feature: Add vertex color alpha channel support.

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

[tfoller]

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.

[Displee]

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…

[tfoller]

@Displee

color per vertex per mesh in an instanced mesh

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

[trusktr]

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:

apply color to each face/vertex with opacity /alpha using Shader material three.js

[tfoller]

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

@tfoller

and for normal geometry:

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

[trusktr]

• it is on StackOverflow
• doesn’t instruct to make a custom shader

[tfoller]

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.

[trusktr]

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

[Mugen87]

@trusktr

I also didn’t see any example that uses the feature (unless I missed it).

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.

[trusktr]

@Mugen87

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

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.

[Mugen87]

Docs: Improve `Material` page.