Creating Screen-Space Consistent Dashed Lines in Three.js

To achieve dashed lines with consistent visual appearance regardless of camera zoom and rotation, you need to modify your shader approach to work in screen space rather than world space. Here's how you can modify your implementation:

Approach: Screen-Space Dashed Lines

The key is to calculate the dash pattern based on screen-space coordinates rather than world-space distances. This will ensure that the dash and gap sizes remain visually consistent regardless of camera position or zoom level.

Modified Vertex Shader

GLSLCopied
attribute float lineDistance;
varying float vLineDistance;
varying vec4 vViewPosition;

void main() {
  vLineDistance = lineDistance;
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
  vViewPosition = mvPosition;
  gl_Position = projectionMatrix * mvPosition;
}

Modified Fragment Shader

GLSLCopied
uniform vec3 diffuse;
uniform float opacity;
uniform float dashSize; // Now in screen space (pixels)
uniform float gapSize;  // Now in screen space (pixels)
uniform float dotSize;  // Now in screen space (pixels)
uniform vec2 resolution; // Screen resolution

varying float vLineDistance;
varying vec4 vViewPosition;

void main() {
  // Convert to NDC space
  vec2 screenPos = gl_FragCoord.xy / resolution.xy;
  
  // Calculate screen-space distance
  float screenDistance = vLineDistance * resolution.y / abs(vViewPosition.z);
  
  // Apply dash pattern in screen space
  float totalSize = dashSize + gapSize;
  float modulo = mod(screenDistance, totalSize);
  float dotDistance = dashSize + (gapSize * 0.5) - (dotSize * 0.5);

  if (modulo > dashSize && mod(modulo, dotDistance) > dotSize) {
    discard;
  }

  gl_FragColor = vec4(diffuse, opacity);
}

Updated JavaScript Code

JAVASCRIPTCopied
// Add resolution uniform to your material
let lineMat = new THREE.ShaderMaterial({
  uniforms: {
    diffuse: { value: new THREE.Color("#8800ff") },
    dashSize: { value: 10.0 }, // Now in pixels
    gapSize: { value: 5.0 },   // Now in pixels
    dotSize: { value: 2.0 },   // Now in pixels
    opacity: { value: 2.0 },
    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
  },
  vertexShader: lineVertShader,
  fragmentShader: lineFragShader,
  transparent: true,
});

// Update resolution on window resize
window.addEventListener("resize", (event) => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
  lineMat.uniforms.resolution.value.set(innerWidth, innerHeight);
});

// Update in render loop if needed
function render() {
  requestAnimationFrame(render);
  controls.update();
  renderer.render(scene, camera);
}

Alternative: Use LineDashedMaterial

If you prefer a simpler approach, Three.js provides a built-in LineDashedMaterial that you can use instead of custom shaders. However, it doesn't provide the same level of control for screen-space consistency:

JAVASCRIPTCopied
let lineMat = new THREE.LineDashedMaterial({
  color: 0xff0000,
  linewidth: 1,
  scale: 1, // This will need to be adjusted based on camera distance
  dashSize: 3,
  gapSize: 1,
});

let line = new THREE.Line(lineGeom, lineMat);
line.computeLineDistances();
scene.add(line);

// In your render loop, update the scale based on camera distance
function render() {
  requestAnimationFrame(render);
  controls.update();
  
  // Adjust scale based on camera distance to maintain visual consistency
  const cameraDistance = camera.position.distanceTo(line.position);
  line.material.scale = cameraDistance * 0.1; // Adjust multiplier as needed
  
  renderer.render(scene, camera);
}

The custom shader approach gives you more precise control over the appearance and behavior of your dashed lines, especially when you need them to maintain consistent visual size regardless of camera position.