feat: updates to projected lines (WebGL) (#666)

### Summary
This simplifies the existing `ProjectedLine` renderable and fixes a few
longstanding issues with it. It now supports properly mitered corners,
closed paths, and width defined in screen pixels. All of this leas to
more uniform appearance and consistent, predictable behavior. This also
fixes issues with how lines appeared in viewports, fixing the appearance
of the axes helper in a 4-up view, for example.

While here, I removed support for "tapering" along the path. This was
previously used to convey a sense of temporal movement for cell
tracking, but I was never happy with it. We can bring that back in
better shape if/when required.

Note this only touches the WebGL rendering of these lines. I plan to
also port this to the WebGPU renderer to learn more about WebGPU and the
current implementation of that renderer.

### Related Issue
Closes N/A

### Tests & Checks

#### on `main`
<img width="1389" height="1202" alt="Screenshot 2026-05-14 at 1 00
54 PM"
src="https://github.com/user-attachments/assets/72ad8372-0308-4236-b519-64d057e3d587"
/>

#### with this PR

<img width="1285" height="1075" alt="Screenshot 2026-05-14 at 11 23
02 AM"
src="https://github.com/user-attachments/assets/7ed92592-6af6-4c52-b623-dee9a9a489b7"
/>

Author: aganders3

src/core/geometry.ts

@@ -11,7 +11,6 @@ type GeometryAttributeType =
   | "next_position"
   | "previous_position"
   | "direction"
-  | "path_proportion"
   | "color"
   | "size"
   | "marker";
@@ -23,10 +22,9 @@ export const GeometryAttributeIndex: Record<GeometryAttributeType, number> = {
   next_position: 3,
   previous_position: 4,
   direction: 5,
-  path_proportion: 6,
-  color: 7,
-  size: 8,
-  marker: 9,
+  color: 6,
+  size: 7,
+  marker: 8,
 };
 
 type GeometryAttribute = {

src/objects/geometry/projected_line_geometry.ts

@@ -34,43 +34,41 @@ export class ProjectedLineGeometry extends Geometry {
       itemSize: 1,
       offset: 9 * Float32Array.BYTES_PER_ELEMENT,
     });
-    this.addAttribute({
-      type: "path_proportion",
-      itemSize: 1,
-      offset: 10 * Float32Array.BYTES_PER_ELEMENT,
-    });
   }
 
   private createVertices(path: vec3[]): Float32Array {
-    const vertices = new Float32Array(2 * path.length * (3 + 3 + 3 + 1 + 1));
+    const vertices = new Float32Array(2 * path.length * (3 + 3 + 3 + 1));
+
+    // If the path's first and last points coincide, treat it as a closed
+    // loop: the first vertex's `previous` wraps to path[n-2] and the last
+    // vertex's `next` wraps to path[1]. Both endpoints then take the
+    // middle-vertex branch in the shader and produce a proper miter at the
+    // closing seam.
+    const closed =
+      path.length >= 3 && vec3.equals(path[0], path[path.length - 1]);
 
     let c = 0;
-    let path_proportion = 0.0;
-    const total_distance = path.reduce((acc, curr, i) => {
-      return acc + vec3.distance(curr, path[i + 1] ?? curr);
-    }, 0.0);
     for (const i of [...Array(path.length).keys()]) {
       for (const direction of [-1.0, 1.0]) {
         const current = path[i];
         vertices[c++] = current[0];
         vertices[c++] = current[1];
         vertices[c++] = current[2];
 
-        const previous = path[i - 1] ?? path[i];
+        const previous =
+          i === 0 ? (closed ? path[path.length - 2] : path[i]) : path[i - 1];
         vertices[c++] = previous[0];
         vertices[c++] = previous[1];
         vertices[c++] = previous[2];
 
-        const next = path[i + 1] ?? path[i];
+        const next =
+          i === path.length - 1 ? (closed ? path[1] : path[i]) : path[i + 1];
         vertices[c++] = next[0];
         vertices[c++] = next[1];
         vertices[c++] = next[2];
 
         vertices[c++] = direction;
-        vertices[c++] = path_proportion;
       }
-      path_proportion +=
-        vec3.distance(path[i], path[i + 1] ?? path[i]) / total_distance;
     }
 
     return vertices;

src/objects/renderable/projected_line.ts

@@ -6,29 +6,17 @@ type LineParameters = {
   geometry: ProjectedLineGeometry;
   color: ColorLike;
   width: number;
-  taperOffset?: number;
-  taperPower?: number;
 };
 
 export class ProjectedLine extends RenderableObject {
   private color_: Color;
   private width_: number;
-  private taperOffset_: number = 0.5;
-  private taperPower_: number = 0.0;
 
-  constructor({
-    geometry,
-    color,
-    width,
-    taperOffset,
-    taperPower,
-  }: LineParameters) {
+  constructor({ geometry, color, width }: LineParameters) {
     super();
     this.geometry = geometry;
     this.color_ = Color.from(color);
     this.width_ = width;
-    this.taperOffset_ = taperOffset ?? this.taperOffset_;
-    this.taperPower_ = taperPower ?? this.taperPower_;
     this.programName = "projectedLine";
   }
 
@@ -52,28 +40,10 @@ export class ProjectedLine extends RenderableObject {
     this.width_ = value;
   }
 
-  public get taperOffset() {
-    return this.taperOffset_;
-  }
-
-  public set taperOffset(value: number) {
-    this.taperOffset_ = value;
-  }
-
-  public get taperPower() {
-    return this.taperPower_;
-  }
-
-  public set taperPower(value: number) {
-    this.taperPower_ = value;
-  }
-
   public override getUniforms() {
     return {
       LineColor: this.color.rgb,
       LineWidth: this.width,
-      TaperOffset: this.taperOffset,
-      TaperPower: this.taperPower,
     };
   }
 }

src/renderers/shaders/points_vert.glsl

@@ -3,9 +3,9 @@
 precision mediump float;
 
 layout (location = 0) in vec3 inPosition;
-layout (location = 7) in vec4 inColor;
-layout (location = 8) in float inSize;
-layout (location = 9) in float inMarker;
+layout (location = 6) in vec4 inColor;
+layout (location = 7) in float inSize;
+layout (location = 8) in float inMarker;
 
 uniform mat4 Projection;
 uniform mat4 ModelView;

src/renderers/shaders/projected_line_frag.glsl

@@ -5,7 +5,8 @@ precision mediump float;
 layout (location = 0) out vec4 fragColor;
 
 uniform vec3 LineColor;
+uniform float u_opacity;
 
 void main() {
-    fragColor = vec4(LineColor, 1.0);
+    fragColor = vec4(LineColor, u_opacity);
 }

src/renderers/shaders/projected_line_vert.glsl

@@ -1,19 +1,14 @@
 #version 300 es
 
-const float PI = 3.14159265;
-
 layout (location = 0) in vec3 inPosition;
 layout (location = 3) in vec3 inPrevPosition;
 layout (location = 4) in vec3 inNextPosition;
 layout (location = 5) in float direction;
-layout (location = 6) in float path_proportion;
 
 uniform mat4 Projection;
 uniform mat4 ModelView;
 uniform vec2 Resolution;
 uniform float LineWidth;
-uniform float TaperOffset;
-uniform float TaperPower;
 
 // adapted from https://github.com/mattdesl/webgl-lines
 void main() {
@@ -28,36 +23,35 @@ void main() {
     vec2 currScreen = (currPos.xy / currPos.w) * aspectVec;
     vec2 nextScreen = (nextPos.xy / nextPos.w) * aspectVec;
 
-    vec2 diff;
+    // direction is + or -; which way to project the vertex away from the path
+    float d = sign(direction);
+
+    // `normal` points perpendicular to the path in screen space
+    vec2 normal;
+    // `miterLength` extends the offset along the normal (with a limit)
+    // this make a nicer corner and keeps the line thickness more uniform;
+    float miterLength = 1.0;
     if (prevPos == currPos) {
         // first point on the path
-        diff = nextScreen - currScreen;
+        vec2 dir = normalize(nextScreen - currScreen);
+        normal = vec2(-dir.y, dir.x);
     } else if (nextPos == currPos) {
         // last point on the path
-        diff = currScreen - prevScreen;
+        vec2 dir = normalize(currScreen - prevScreen);
+        normal = vec2(-dir.y, dir.x);
     } else {
-        // middle point on the path
-        // combine the two directions to get a cheap miter
-        // this is not a true miter join, but it also doesn't explode
-        vec2 prevDiff = currScreen - prevScreen;
-        vec2 nextDiff = nextScreen - currScreen;
-        diff = normalize(prevDiff) + normalize(nextDiff);
-    }
-
-    // direction is + or -; which way to project the vertex away from the path
-    // path_proportion is the distance along the path, from 0 to 1
-    float d = sign(direction);
-    float taper = 1.0;
-    if (TaperPower > 0.0) {
-      // glsl `pow(x, y)` is undefined if x < 0 or x = 0 and y <= 0
-      float t = clamp(path_proportion - TaperOffset, -0.5, 0.5);
-      float angle = PI * t;
-      taper = pow(cos(angle), TaperPower);
+        // middle point on the path: add miter along the bisector
+        vec2 prevDir = normalize(currScreen - prevScreen);
+        vec2 nextDir = normalize(nextScreen - currScreen);
+        vec2 tangent = normalize(prevDir + nextDir);
+        normal = vec2(-tangent.y, tangent.x);
+        vec2 perpPrev = vec2(-prevDir.y, prevDir.x);
+        miterLength = 1.0 / max(dot(normal, perpPrev), 0.1);
     }
-    vec2 normal = normalize(vec2(-diff.y, diff.x));
 
+    // `normal * LineWidth / Resolution` means LineWidth is in pixels
     vec4 offset = vec4(
-        normal * d * taper * LineWidth / 2.0 / aspectVec,
+        (normal * LineWidth / Resolution) * miterLength * d,
         0.0,
         0.0
     );

src/renderers/webgl_renderer.ts

@@ -34,6 +34,7 @@ export class WebGLRenderer extends Renderer {
   private readonly textures_: WebGLTextures;
   private readonly state_: WebGLState;
   private renderedObjectsPerFrame_ = 0;
+  private currentViewportSize_: [number, number] = [0, 0];
 
   constructor(canvas: HTMLCanvasElement) {
     super(canvas);
@@ -96,6 +97,9 @@ export class WebGLRenderer extends Renderer {
     this.state_.setViewport(viewportBox);
     this.clear();
 
+    const viewportRect = viewportBox.toRect();
+    this.currentViewportSize_ = [viewportRect.width, viewportRect.height];
+
     const frustum = viewport.camera.frustum;
 
     this.state_.setDepthMask(true);
@@ -192,7 +196,10 @@ export class WebGLRenderer extends Renderer {
       axisDirection,
       camera.projectionMatrix
     );
-    const resolution = [this.canvas.width, this.canvas.height];
+
+    // per-viewport size in pixels — shaders that compute screen-space offsets
+    // need the actual rendered region, not the full-canvas dimensions
+    const resolution = this.currentViewportSize_;
 
     const objectUniforms = object.getUniforms();
     const layerUniforms = layer.getUniforms();