Screen-Space Dashed Line

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // --- Shader Code --- const lineVertShader = `#version 300 es precision highp float; // Attributes from Three.js in vec3 position; in float lineDistance; // Custom attribute: cumulative distance along the line // Uniforms from Three.js uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; // Varyings to Fragment Shader out float vLineDistance; out float vFragDepth; // Pass view-space Z void main() { vLineDistance = lineDistance; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); vFragDepth = -mvPosition.z; // View space depth (positive distance) gl_Position = projectionMatrix * mvPosition; }`; const lineFragShader = `#version 300 es precision highp float; // Uniforms uniform vec3 diffuse; // Line color uniform float opacity; // Line opacity uniform float time; // Animation time uniform float uViewportHeight; // Viewport height in pixels uniform mat4 projectionMatrix; // Camera projection matrix // Screen-space pattern parameters (in pixels) uniform float dashSize; // Dash size in pixels uniform float gapSize; // Gap size in pixels uniform float dotSize; // Dot size in pixels (within the gap) // Varyings from Vertex Shader in float vLineDistance; // World/model space distance along the line in float vFragDepth; // View space depth (positive distance) out vec4 fragColor; void main() { // Calculate the scaling factor: world units per screen pixel at this fragment's depth // projectionMatrix[1][1] = 2 * near / (top - bottom) = near / half_height_in_view_space // worldPerPixel = view_space_height_of_pixel / near = (pixel_ndc_height * view_z) / near // pixel_ndc_height = 2.0 / uViewportHeight // worldPerPixel = (2.0 / uViewportHeight) * vFragDepth / near // Alternatively, using projectionMatrix[1][1]: // worldPerPixel = vFragDepth / (projectionMatrix[1][1] * uViewportHeight * 0.5) // This factor converts a size in pixels to the equivalent size in world units at the fragment's depth. float worldPerPixel = vFragDepth / (projectionMatrix[1][1] * uViewportHeight * 0.5); // --- Orthographic Correction --- // For orthographic projection, vFragDepth is not meaningful for scaling in the same way. // projectionMatrix[3][3] is 1 for ortho, perspective depends. A simpler check is projectionMatrix[2][3] bool isPerspective = projectionMatrix[2][3] == -1.0; if (!isPerspective) { // For orthographic, the world size per pixel is constant // orthoScale = half_vertical_size_in_world_units // projectionMatrix[1][1] = 1.0 / orthoScale // worldPerPixel = orthoScale * 2.0 / uViewportHeight = (1.0 / projectionMatrix[1][1]) * 2.0 / uViewportHeight worldPerPixel = 2.0 / (projectionMatrix[1][1] * uViewportHeight); } // Scale pattern elements from pixels to world units float worldDashSize = dashSize * worldPerPixel; float worldGapSize = gapSize * worldPerPixel; float worldDotSize = dotSize * worldPerPixel; float totalSize = worldDashSize + worldGapSize; // Basic check to avoid division by zero or negative sizes if (totalSize <= 0.0 || dashSize <= 0.0) { fragColor = vec4(diffuse, opacity); // Solid line if pattern is invalid return; } // Calculate position within the pattern cycle // Add time scaled by worldPerPixel to make animation speed consistent across zoom levels float currentDistance = vLineDistance + time * worldPerPixel * 50.0; // Adjust 50.0 to control speed float moduloDash = mod(currentDistance, totalSize); // Calculate position within the gap for dot check // Center the dot within the gap float dotStartInGap = (worldGapSize - worldDotSize) * 0.5; float dotEndInGap = dotStartInGap + worldDotSize; // Check if we are in the gap part bool inGap = moduloDash > worldDashSize; // Check if we are NOT in the dot part (if a dot exists and we are in the gap) bool inDotZone = false; if (worldDotSize > 0.0 && worldGapSize > 0.0 && inGap) { float distanceIntoGap = moduloDash - worldDashSize; inDotZone = distanceIntoGap >= dotStartInGap && distanceIntoGap < dotEndInGap; } // Discard logic: // 1. If in the gap AND dotSize is zero (pure dash-gap) -> discard // 2. If in the gap AND dotSize > 0 AND NOT in the dot zone -> discard if (inGap && (worldDotSize <= 0.0 || !inDotZone)) { discard; } // Add a small fade at the edges to reduce aliasing (optional) // float edgeFuzzPixels = 1.0; // Fuzziness in pixels // float worldEdgeFuzz = edgeFuzzPixels * worldPerPixel; // float dashEndFade = smoothstep(worldDashSize - worldEdgeFuzz, worldDashSize, moduloDash); // float gapStartFade = smoothstep(0.0, worldEdgeFuzz, moduloDash); // float alpha = mix(opacity, 0.0, dashEndFade); // Fade out at end of dash // alpha = mix(alpha, opacity, gapStartFade); // Fade in at start of dash (or dot) // if (inGap && worldDotSize > 0.0) { // float distanceIntoGap = moduloDash - worldDashSize; // float dotStartFade = smoothstep(dotStartInGap - worldEdgeFuzz, dotStartInGap, distanceIntoGap); // float dotEndFade = smoothstep(dotEndInGap - worldEdgeFuzz, dotEndInGap, distanceIntoGap); // alpha = mix(0.0, opacity, dotStartFade); // Fade in dot start // alpha = mix(alpha, 0.0, dotEndFade); // Fade out dot end // } // if (alpha < 0.01) discard; // Discard fully faded fragments fragColor = vec4(diffuse, opacity); // Use base opacity for now, uncomment alpha logic for anti-aliasing }`; // --- Three.js Setup --- let scene, camera, renderer, material, line, controls; let clock = new THREE.Clock(); function init() { // Scene scene = new THREE.Scene(); // Camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // Renderer const canvas = document.getElementById('glCanvas'); renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); // Controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Geometry with lineDistance attribute const points = []; const divisions = 50; const radius = 2; let currentDistance = 0; const distances = []; for (let i = 0; i <= divisions; i++) { const angle = (i / divisions) * Math.PI * 2; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; const z = 0; const point = new THREE.Vector3(x, y, z); points.push(point); if (i > 0) { currentDistance += points[i].distanceTo(points[i - 1]); } distances.push(currentDistance); } const geometry = new THREE.BufferGeometry().setFromPoints(points); geometry.setAttribute('lineDistance', new THREE.Float32BufferAttribute(distances, 1)); // Material material = new THREE.ShaderMaterial({ uniforms: { diffuse: { value: new THREE.Color(0x00ffff) }, // Cyan color opacity: { value: 1.0 }, time: { value: 0.0 }, dashSize: { value: 10.0 }, // Pixels gapSize: { value: 5.0 }, // Pixels dotSize: { value: 3.0 }, // Pixels (set to 0 for dash-gap only) uViewportHeight: { value: window.innerHeight * window.devicePixelRatio }, projectionMatrix: { value: camera.projectionMatrix } // Pass projection matrix }, vertexShader: lineVertShader, fragmentShader: lineFragShader, transparent: true, // Needed for opacity and discard potentially // side: THREE.DoubleSide // Useful for debugging geometry }); // Line line = new THREE.Line(geometry, material); scene.add(line); // Handle window resize window.addEventListener('resize', onWindowResize, false); // Start animation loop animate(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); // Update viewport height uniform, considering device pixel ratio if (material) { material.uniforms.uViewportHeight.value = window.innerHeight * window.devicePixelRatio; material.uniforms.projectionMatrix.value = camera.projectionMatrix; // Update matrix on resize/change } } function animate() { requestAnimationFrame(animate); const elapsedTime = clock.getElapsedTime(); // Update uniforms material.uniforms.time.value = elapsedTime; // Projection matrix might change if camera properties change (like FOV) // It's updated automatically by Three.js before render if camera changes, // but explicitly setting it ensures the shader has the latest version. material.uniforms.projectionMatrix.value = camera.projectionMatrix; // Viewport height might change if DPR changes or window resizes material.uniforms.uViewportHeight.value = window.innerHeight * window.devicePixelRatio; controls.update(); // Only required if controls.enableDamping = true renderer.render(scene, camera); } // --- Start --- init();