Trying to use shaders to colourise some Line2 geometry. Using a basic material works, but applying a shader so I can update the colours based on position is not working.
const vertexShader = `
void main() {
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
}
`;
const fragmentShader = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
}
`;
const colors = [];
const color = new THREE.Color();
const positions = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 100, 0), new THREE.Vector3(100, 0, 0)];
for (let i = 0, il = positions.length; i < il; i++) {
const t = i / il;
color.setHSL(t, 1.0, 0.5);
colors.push(color.r, color.g, color.b);
}
const lineGeometry = new LineGeometry();
lineGeometry.setPositions(positions);
lineGeometry.setColors(colors);
const lineMaterial = new THREE.ShaderMaterial({
uniforms: {},
vertexShader: vertexShader,
fragmentShader: fragmentShader,
linewidth: 5,
});
const line = new Line2(lineGeometry, lineMaterial);
scene.add(line);
Nothing is rendering to screen. Any thoughts?