Add more improvements

src/drawables/shapes/circle.ts

@@ -13,10 +13,16 @@ export class Circle extends Drawable {
           }[CIRCLE_COUNT] circles;
 
           void circleMinDistance(inout float minDistance, inout float color) {
+              float circleMinDistance = minDistance;
               for (int i = 0; i < CIRCLE_COUNT; i++) {
                   float dist = distance(circles[i].center, position) - circles[i].radius;
-                  minDistance = min(minDistance, dist);
+                  circleMinDistance = min(circleMinDistance, dist);
               }
+              minDistance = min(minDistance, circleMinDistance);
+              color = mix(2.0, color, step(
+                distanceNdcPixelSize + SURFACE_OFFSET, 
+                circleMinDistance
+              ));
           }
         `,
         distanceFunctionName: 'circleMinDistance',
@@ -32,8 +38,8 @@ export class Circle extends Drawable {
     super();
   }
 
-  public distance(position: vec2): number {
-    return vec2.dist(this.center, position) - this.radius;
+  public distance(target: vec2): number {
+    return vec2.dist(this.center, target) - this.radius;
   }
 
   protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {

src/drawables/shapes/tunnel.ts

@@ -0,0 +1,93 @@
+import { mat2d, vec2 } from 'gl-matrix';
+import { clamp01 } from '../../helper/clamp';
+import { mix } from '../../helper/mix';
+import { Drawable } from '../drawable';
+import { DrawableDescriptor } from '../drawable-descriptor';
+
+export class Tunnel extends Drawable {
+  public readonly isInverted = false;
+  public readonly toFromDelta: vec2;
+
+  public static get descriptor(): DrawableDescriptor {
+    return {
+      sdf: {
+        shader: `
+          uniform struct Tunnel {
+              vec2 from;
+              vec2 toFromDelta;
+              float fromRadius;
+              float toRadius;
+              float inverted;
+          }[TUNNEL_COUNT] tunnels;
+      
+          void tunnelMinDistance(inout float minDistance, inout float color) {
+              float tunnelMinDistance = minDistance;
+              for (int i = 0; i < TUNNEL_COUNT; i++) {
+                  Tunnel tunnel = tunnels[i];
+                  vec2 targetFromDelta = position - tunnel.from;
+                  
+                  float h = clamp(
+                        dot(targetFromDelta, tunnel.toFromDelta)
+                      / dot(tunnel.toFromDelta, tunnel.toFromDelta),
+                      0.0, 1.0
+                  );
+      
+                  float lineDistance = -mix(
+                    tunnel.fromRadius, tunnel.toRadius, h
+                  ) + tunnel.inverted * distance(
+                      targetFromDelta, tunnel.toFromDelta * h
+                  );
+      
+                  tunnelMinDistance = min(tunnelMinDistance, lineDistance);
+              }
+      
+              color = mix(2.0, color, step(
+                distanceNdcPixelSize + SURFACE_OFFSET,
+                -tunnelMinDistance
+              ));
+              minDistance = -tunnelMinDistance;
+          }
+        `,
+        distanceFunctionName: 'tunnelMinDistance',
+      },
+      uniformName: 'tunnels',
+      uniformCountMacroName: 'TUNNEL_COUNT',
+      shaderCombinationSteps: [0, 1, 2, 8, 32],
+      empty: new Tunnel(vec2.fromValues(0, 0), vec2.fromValues(0, 0), 0, 0),
+    };
+  }
+
+  constructor(
+    public readonly from: vec2,
+    public readonly to: vec2,
+    public readonly fromRadius: number,
+    public readonly toRadius: number
+  ) {
+    super();
+    this.toFromDelta = vec2.subtract(vec2.create(), to, from);
+  }
+
+  public distance(target: vec2): number {
+    const targetFromDelta = vec2.subtract(vec2.create(), target, this.from);
+
+    const h = clamp01(
+      vec2.dot(targetFromDelta, this.toFromDelta) /
+        vec2.dot(this.toFromDelta, this.toFromDelta)
+    );
+
+    return (
+      vec2.distance(targetFromDelta, vec2.scale(vec2.create(), this.toFromDelta, h)) -
+      mix(this.fromRadius, this.toRadius, h)
+    );
+  }
+
+  protected getObjectToSerialize(transform2d: mat2d, transform1d: number): any {
+    return {
+      from: vec2.transformMat2d(vec2.create(), this.from, transform2d),
+      toFromDelta: vec2.scale(vec2.create(), this.toFromDelta, transform1d),
+      fromRadius: this.fromRadius * transform1d,
+      toRadius: this.toRadius * transform1d,
+      inverted: this.isInverted ? -1 : 1,
+    };
+  }
+}