# Line2 with shader material

**URL:** <https://discourse.threejs.org/t/line2-with-shader-material/50031>\
**Category:** Questions\
**Tags:** shaders, geometry\
**Created:** [April 5, 2023, 11:55pm UTC](https://discourse.threejs.org/t/line2-with-shader-material/50031 "2023-04-05T23:55:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![sq2](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sq2/32/35127_2.png) [@sq2](https://discourse.threejs.org/u/sq2)\
**Post date:** [April 5, 2023, 11:55pm UTC](https://discourse.threejs.org/t/line2-with-shader-material/50031/1 "2023-04-05T23:55:18Z")

</div>

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.

```js
  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?