Dash pattern on disconnected fat lines

Questions
,
1

Hello everyone! What I’m trying to do is render multiple dashed disconnected lines from a dataset. The dataset its basically a list of line objects that have different number of x,y,z points, different width and different dashSize and gapSize. To handle different width on the lines I followed the change that was suggested here How to change line width in Shader, to modify the shader and create a buffer attribute that will have the width value. For the dashSize and gapSize i was thinking of doing something similar, but before that i cant figure out how to make the dashing pattern from one segment of a line to not influence the other segment.

I created this sandbox as an example Dash pattern

As we can see, the end of the first segment continues as the start of the first segment, making the dashing pattern different between those lines.
image
What i want to achieve is, giving similar points, and same dash size, the dash pattern should look the same between these lines.
I also need a draw a big number of lines, so I want to avoid having to create a geometry and a material for each line, to reduce the number of draw calls.

2

Hi!
If I got you correctly, you need to re-compute line distances.
Do something like this:

let line = new Line2(geometry, matLine);
line.computeLineDistances();
// re-compute line distances
let dStart = line.geometry.attributes.instanceDistanceStart;
let dEnd = line.geometry.attributes.instanceDistanceEnd;
for(let i = 0; i < dStart.count; i++){
  let start = dStart.getX(i);
  let end = dEnd.getX(i);
  let d = end - start;
  dStart.setX(i, 0);
  dEnd.setX(i, d);
}
///////////////////////////
line.scale.set(1, 1, 1);
scene.add(line);
1 Like
3

Thanks! Indeed this creates the desired output! Maybe one more question, but is there any way to make those lines not follow the camera movement? If i move the camera around the lines also kinda rotate, but i want them to remain flat of the ground. Its that possible?