Ensure that every point includes the color.array attribute, which can be directly modified.
var colors = pointsObj.geometry.attributes.color.array;
for (var i = 0; i < colors.length; i += 4) {
if (shouldPointBeInvisible(i)) { //<-- implementation pending
colors[i + 3] = 0; // Setting alpha value to 0 makes the point invisible
}
}
pointsObj.geometry.attributes.color.needsUpdate = true;
-- Potentially with a shader material:
var material = new THREE.ShaderMaterial({
uniforms: {
visibility: { value: 1.0 }
},
vertexShader: `
uniform float visibility;
varying vec3 vColor;
void main() {
vColor = color;
vColor.a *= visibility;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
`
});
pointsObj.material = material;
...
if (shouldPointBeInvisible(i)) {
pointsObj.material.uniforms.visibility.value = 0.0;
} else {
pointsObj.material.uniforms.visibility.value = 1.0;
}
-- Another approach using PointsMaterial:
var material = new THREE.PointsMaterial({
size: 1,
transparent: true,
opacity: 1.0,
uniforms: {
visibility: { value: 1.0 }
},
vertexShader: `
uniform float visibility;
varying vec3 vColor;
void main() {
vColor = color;
vColor.a *= visibility;
gl_PointSize = size;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
, fragmentShader: varying vec3 vColor;
`
});
pointsObj.material = material;
...
if (shouldPointBeInvisible(i)) {
pointsObj.material.uniforms.visibility.value = 0.0;
} else {
pointsObj.material.uniforms.visibility.value = 1.0;
}