Screen-space projected dashed lines

[capr]

Hi,

Can MeshLine do dashed lines that have constant length at any depth? If not, any idea on how to modify it to achieve that? So basically I want a sizeAttenuation-like parameter that applies to dash lengths.

Thanks!

[makc]

I think your best bet is maybe to discard pixels in the shader based on triangular grid:

Square grid is super-easy to code but may look less uniform maybe?

[makc]

Just tried square grid - it is not uniform at all and super trippy :D

[makc]

Im out of cheap ideas, but what you require can be done exactly using a custom attribute that you will have to calculate and update every frame. This attribute would have to be a line length to given vertex in screen space, and then in shader you again discard pixels based on how far are you in the line

[Jeremboo]

The MeshLines doesn't support this behavior. They are supposed to respect the perspective. Have you think about using a OrthographicCamera ? Otherwise, you will have to try to hack the vertexShader by removing the modelMatrix but I'm not sure about the quality of the render.

[makc]

so I did a test of what I proposed above, and although technically it works

you do not want to use this 😂 becaue as the distance from fixed point increases, these dashes move along the line faster and faster.

[makc]

if you do not mind the uniformity of dash length breaking at random points, you can limit that effect significantly

[capr]

I ended up using the solution from this SO question: https://stackoverflow.com/questions/54516794/three-js-uniform-dashed-line-relative-to-camera

... except it doesn't actually work in the general case because the distance must be computed in the fragment shader not in the vertex shader. I deleted my SO account so I can't fix the solution there, but I'll post it here if anyone's interested. I'm sure this can be adapted to work with MeshLine too, but for my needs (i.e. I didn't need fat lines, just dotted lines) this is enough.

let vshader = `
	flat out vec4 p0;
	out vec4 p;
	void main() {
		vec4 p1 = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
		gl_Position = p1;
		p  = p1;
		p0 = p1;
	}
`

let fshader = `
	precision highp float;
	flat in vec4 p0;
	in vec4 p;
	uniform vec3  color;
	uniform vec2  canvas;
	uniform float dash;
	uniform float gap;
	void main(){
		vec2 dir = ((p.xyz / p.w).xy - (p0.xyz / p0.w).xy) * canvas.xy / 2.0;
		float dist = length(dir);
		if (fract(dist / (dash + gap)) > dash / (dash + gap))
			discard;
		gl_FragColor = vec4(color.rgb, 1.0);
	}
	`

let uniforms = {
		canvas : {type: 'v2', value: {x: canvas.width, y: canvas.height}},
		dash   : {type: 'f' , value: 1},
		gap    : {type: 'f' , value: 3},
		color  : {value: color3(color)},
}

let material = new THREE.ShaderMaterial({
	uniforms       : uniforms,
	vertexShader   : vshader,
	fragmentShader : fshader,
})

Note, you have to set the canvas uniform whenever the canvas size changes:

material.uniforms.canvas.value.x = canvas.width
material.uniforms.canvas.value.y = canvas.height

[makc]

@capr oh great, there is flat qualifier in glsl now - is it webgl2 only?

[makc]

ps I think SO version will only work within a single segment. default box edges are fine, but as soon as you have a subdivision or curves, you will have a problem 🙄

[Jeremboo]

Thanks for your solution @capr! I'm sure that will be helpful for other users. I close this issue then since a solution as been provided.