Hi,
I’m using the vertex color to hold the color of a silhouette and using the alpha to mark the inverted hull. I loaded from a gltf created from blender without problems using a regular mesh.
But once I recreate the same with an instanced mesh is not displayed 
. This is my custom shader:
// An Uebershader for the game objects.
const GvUberObjMaterialVS =
"#include <common>\n" +
"#include <morphtarget_pars_vertex>\n" +
"#include <color_pars_vertex>\n" +
"attribute vec2 uvOffset;\n" +
"attribute vec2 uvScale;\n" +
"attribute vec4 rgbColor;\n" +
"varying vec4 vRgbColor;\n" +
"varying vec2 vUv;\n" +
"void main() {\n" +
" vUv = uv * uvScale + uvOffset;\n" +
" vRgbColor = rgbColor;\n" +
"#include <color_vertex>\n" +
"#include <beginnormal_vertex>\n" +
"#include <morphnormal_vertex>\n" +
"#include <begin_vertex>\n" +
"#include <morphtarget_vertex>\n" +
"#ifdef USE_INSTANCING\n" +
" gl_Position = projectionMatrix * viewMatrix * instanceMatrix * vec4(transformed, 1.0);\n" +
"#else\n" + // modelMatrix removed to avoid parent matrix
" gl_Position = projectionMatrix * modelViewMatrix * vec4(transformed, 1.0);\n" +
"#endif\n" +
"}";
const GvUberObjMaterialFS =
"uniform sampler2D map;\n" +
"varying vec4 vRgbColor;\n" +
"varying vec4 vColor;\n" +
"varying vec2 vUv;\n" +
GLSLFunctions.rgba2yuva +
GLSLFunctions.yuva2rgba +
GLSLFunctions.chromaKey +
"void main() {\n" +
" vec4 tcolor = texture2D( map, vUv );\n" +
"#if (KEY_CHROMA_ENABLED==1)\n" +
" float chromaMask = chromaKey(tcolor,KEY_COLOR,KEY_SIMILARITY,KEY_SMOOTHNESS);\n" +
" vec4 textYuva = rgba2yuva(tcolor), colorYuva = rgba2yuva(vRgbColor);\n" +
" vec2 colorUvMix = mix(colorYuva.gb,textYuva.gb,max(chromaMask,1.0-vRgbColor.a));\n" +
" tcolor = yuva2rgba(vec4(textYuva.r,colorUvMix,textYuva.a));\n" +
"#endif\n" +
"#if (VERTEX_COLOR_ENABLED==1)\n" +
" tcolor = mix(tcolor.rgba,vec4(vColor.rgb,1.0),vColor.a);\n" +
"#endif\n" +
"#if (ALPHA_DEPTH_ENABLED==1)\n" +
" float alphaDepth = smoothstep(ALPHA_DEPTH_MIN,ALPHA_DEPTH_MAX,tcolor.a);\n" +
" gl_FragDepth = mix( 1.0, gl_FragCoord.z, alphaDepth );\n" +
"#endif\n" +
" gl_FragColor = tcolor;\n" +
"}";
export class GvUberObjMaterial extends THREE.ShaderMaterial
{
constructor( map, transparent = false )
{
super( {
uniforms: {
'map': { value: map }
},
defines: {
'KEY_COLOR': 'vec3(0.0,1.0,0.0)',
'KEY_CHROMA_ENABLED': 0,
'KEY_SIMILARITY': 0.4,
'KEY_SMOOTHNESS': 0.2,
'ALPHA_DEPTH_ENABLED': 1,
'ALPHA_DEPTH_MIN': 0.5,
'ALPHA_DEPTH_MAX': '1.0',
'VERTEX_COLOR_ENABLED': 0
},
vertexShader: GvUberObjMaterialVS,
fragmentShader: GvUberObjMaterialFS,
transparent: transparent
} );
}
}
And this is how I recreate the geometry to be displayed, I hust use the regular copy, could the copy have a bug or do I have to copy it manually?
const shared = this.get_geometry_materials();
var igeometry = new THREE.InstancedBufferGeometry();
igeometry.copy( shared.geometry );
var attribute1 = new THREE.InstancedBufferAttribute( new Float32Array( uvOffsets ), 2 );
igeometry.setAttribute( 'uvOffset', attribute1 );
var attribute2 = new THREE.InstancedBufferAttribute( new Float32Array( uvScales ), 2 );
igeometry.setAttribute( 'uvScale', attribute2 );
var attribute3 = new THREE.InstancedBufferAttribute( new Float32Array( rgbColor ), 4 );
igeometry.setAttribute( 'rgbColor', attribute3 );
...
this.instanced_mesh = new THREE.InstancedMesh( igeometry, material, max_count );
The material has the vertexColor set to true obviously.
Did you experience this? Could you help me? Right now I’m using the not instanced option but it is not optimal as I was going to have a lot of instanced objectes using vertex colors to mark a silhoutte.
Kind regards,
pirratas.com