custom attributes failing on shaderMaterial - three.js

Question

I am trying to use a custom attribute on a shaderMaterial, but I can't get it to work.
My simplified code is
attributes = {
aColor: { type: "f", value:] },
};
for ( i = 0; i < points.length; i ++ ) {
attributes.aColor.value.push (0.9) ;
}
var uniforms = THREE.UniformsLib['lights'];
sMaterial = new THREE.ShaderMaterial ({
attributes: attributes,
uniforms: uniforms,
vertexShader: vShader,
fragmentShader: fShader,
lights: true,
})
var line2 = new THREE.Line( geometry, sMaterial);
scene.add( line2 );
In my shader I set a debug statement
attribute float aColor;
void main()
if (aColor == 0.0) {
// debugcode
}
and the debugcode is always executed.
Inspecting the WebGlProgram, I can see in the ACTIVE_ATTRIBUTES the aColor, and it looks ok.
What is going wrong here ?
Or, even better, how can I debug a problem like this ?

Answer 1

Just trying, I found out the problem.
I was reusing a geometry that I had already used for another mesh, and somehow that was causing the problem.
Anyway, I am still interested in learning techniques to deal with this kind of problems

Answer 2

Following on from #vals' answer, I've just solved a similar problem, not with shared geometries, but with trying to assign a new shader material with attributes to an existing object. It's because if three.js detects that the geometry and its owning object are already initialised (using the variable geometry.__webglInit), then even if the material has changed, it won't try to update the geometry's buffers, including attributes, in the GPU memory. The initialisation also won't run unless the renderer detects that objects have been added to the scene.
The solution I used:
// Create the new shader
var shader = new THREE.ShaderMaterial({
attributes: {intensity: {type: 'f', value: []}},
vertexShader: vShaderText,
fragmentShader: fShaderText
});
// Populate the intensity attribute
// ...
// Remove the existing scene object
var existingObject = myObjects[0]; // ... retrieve from scene or variable
var geometry = existingObject.geometry;
scene.remove(existingObject);
// Recreate the new scene object (important!: note geometry.clone() below)
var pc = new THREE.PointCloud(geometry.clone(), shader);
scene.add(pc);
// Clean up memory
geometry.dispose();
There is probably a more memory-efficient way to do this by reusing the existing vertex buffers that are already in GPU memory, but this works well enough for our application.