Link sampling

package.json

@@ -36,7 +36,7 @@
   "homepage": "https://cosmosgl.github.io/graph",
   "author": "cosmos.gl",
   "devDependencies": {
-    "@interacta/css-labels": "^0.1.2",
+    "@interacta/css-labels": "^0.6.0",
     "@jls-digital/storybook-addon-code": "^1.0.4",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^22.0.1",

src/config.ts

@@ -635,6 +635,12 @@ export interface GraphConfigInterface {
    * Default value: `150`
   */
   pointSamplingDistance?: number;
+  /**
+   * Link sampling distance in pixels between neighboring links when calling the `getSampledLinks` method.
+   * This parameter determines how many links will be included in the sample (based on link midpoints in screen space).
+   * Default value: `150`
+   */
+  linkSamplingDistance?: number;
   /**
    * Controls automatic position adjustment of points in the visible space.
    *
@@ -773,6 +779,7 @@ export class GraphConfig implements GraphConfigInterface {
 
   public randomSeed = undefined
   public pointSamplingDistance = defaultConfigValues.pointSamplingDistance
+  public linkSamplingDistance = defaultConfigValues.linkSamplingDistance
   public attribution = defaultConfigValues.attribution
   public rescalePositions = defaultConfigValues.rescalePositions
 

src/index.ts

@@ -1209,6 +1209,28 @@ export class Graph {
     return this.points.getSampledPoints()
   }
 
+  /**
+   * For the links that are currently visible on the screen, get a sample of link indices with their midpoint coordinates and angle.
+   * The resulting number of links will depend on the `linkSamplingDistance` configuration property,
+   * and the sampled links will be evenly distributed (one link per grid cell, based on link midpoint in screen space).
+   * Each value is [x, y, angle]: position in data space; angle in radians for screen-space rotation (0 = right, positive = clockwise, e.g. for CSS rotation).
+   */
+  public getSampledLinkPositionsMap (): Map<number, [number, number, number]> {
+    if (this._isDestroyed || !this.lines) return new Map()
+    return this.lines.getSampledLinkPositionsMap()
+  }
+
+  /**
+   * For the links that are currently visible on the screen, get a sample of link indices, midpoint positions, and angles.
+   * The resulting number of links will depend on the `linkSamplingDistance` configuration property,
+   * and the sampled links will be evenly distributed.
+   * Positions are in data space; angles are in radians for screen-space rotation (0 = right, positive = clockwise, e.g. for CSS rotation).
+   */
+  public getSampledLinks (): { indices: number[]; positions: number[]; angles: number[] } {
+    if (this._isDestroyed || !this.lines) return { indices: [], positions: [], angles: [] }
+    return this.lines.getSampledLinks()
+  }
+
   /**
    * Gets the X-axis of rescaling function.
    *
@@ -1819,6 +1841,7 @@ export class Graph {
       this.canvasD3Selection
         ?.call(this.zoomInstance.behavior.transform, this.zoomInstance.getTransform([centerPosition], k))
       this.points?.updateSampledPointsGrid()
+      this.lines?.updateSampledLinksGrid()
       // Only update link index FBO if link hovering is enabled
       if (this.store.isLinkHoveringEnabled) {
         this.lines?.updateLinkIndexFbo()

src/modules/Lines/conic-curve-module.ts

@@ -0,0 +1,18 @@
+import type { ShaderModule } from '@luma.gl/shadertools'
+
+/**
+ * Shared GLSL for conic parametric curve (rational quadratic Bezier).
+ * Used by draw-curve-line.vert and fill-sampled-links.vert.
+ */
+const conicParametricCurveVS = /* glsl */ `
+vec2 conicParametricCurve(vec2 A, vec2 B, vec2 ControlPoint, float t, float w) {
+  vec2 divident = (1.0 - t) * (1.0 - t) * A + 2.0 * (1.0 - t) * t * w * ControlPoint + t * t * B;
+  float divisor = (1.0 - t) * (1.0 - t) + 2.0 * (1.0 - t) * t * w + t * t;
+  return divident / divisor;
+}
+`
+
+export const conicParametricCurveModule: ShaderModule = {
+  name: 'conicParametricCurve',
+  vs: conicParametricCurveVS,
+}

src/modules/Lines/draw-curve-line.vert

@@ -89,12 +89,6 @@ float map(float value, float min1, float max1, float min2, float max2) {
   return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
 }
 
-vec2 conicParametricCurve(vec2 A, vec2 B, vec2 ControlPoint, float t, float w) {
-  vec2 divident = (1.0 - t) * (1.0 - t) * A + 2.0 * (1.0 - t) * t * w * ControlPoint + t * t * B;
-  float divisor = (1.0 - t) * (1.0 - t) + 2.0 * (1.0 - t) * t * w + t * t;
-  return divident / divisor;
-}
-
 float calculateLinkWidth(float width) {
   float linkWidth;
   if (scaleLinksOnZoom > 0.0) {

src/modules/Lines/fill-sampled-links.frag

@@ -0,0 +1,12 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+in vec4 rgba;
+
+out vec4 fragColor;
+
+void main() {
+  fragColor = rgba;
+}

src/modules/Lines/fill-sampled-links.vert

@@ -0,0 +1,81 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+in vec2 pointA;
+in vec2 pointB;
+in float linkIndices;
+
+uniform sampler2D positionsTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform fillSampledLinksUniforms {
+  float pointsTextureSize;
+  mat4 transformationMatrix;
+  float spaceSize;
+  vec2 screenSize;
+  float curvedWeight;
+  float curvedLinkControlPointDistance;
+  float curvedLinkSegments;
+} fillSampledLinks;
+
+#define pointsTextureSize fillSampledLinks.pointsTextureSize
+#define transformationMatrix fillSampledLinks.transformationMatrix
+#define spaceSize fillSampledLinks.spaceSize
+#define screenSize fillSampledLinks.screenSize
+#define curvedWeight fillSampledLinks.curvedWeight
+#define curvedLinkControlPointDistance fillSampledLinks.curvedLinkControlPointDistance
+#define curvedLinkSegments fillSampledLinks.curvedLinkSegments
+#else
+uniform float pointsTextureSize;
+uniform float spaceSize;
+uniform vec2 screenSize;
+uniform float curvedWeight;
+uniform float curvedLinkControlPointDistance;
+uniform float curvedLinkSegments;
+uniform mat3 transformationMatrix;
+#endif
+
+out vec4 rgba;
+
+void main() {
+  vec4 posA = texture(positionsTexture, (pointA + 0.5) / pointsTextureSize);
+  vec4 posB = texture(positionsTexture, (pointB + 0.5) / pointsTextureSize);
+  vec2 a = posA.rg;
+  vec2 b = posB.rg;
+
+  vec2 tangent = b - a;
+  float angle = -atan(tangent.y, tangent.x);
+
+  vec2 mid;
+  if (curvedLinkSegments <= 1.0) {
+    mid = (a + b) * 0.5;
+  } else if (curvedLinkControlPointDistance != 0.0 && curvedWeight != 0.0) {
+    vec2 xBasis = b - a;
+    vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
+    float linkDist = length(xBasis);
+    float h = curvedLinkControlPointDistance;
+    vec2 controlPoint = (a + b) / 2.0 + yBasis * linkDist * h;
+    mid = conicParametricCurve(a, b, controlPoint, 0.5, curvedWeight);
+  } else {
+    mid = (a + b) * 0.5;
+  }
+
+  vec2 p = 2.0 * mid / spaceSize - 1.0;
+  p *= spaceSize / screenSize;
+  #ifdef USE_UNIFORM_BUFFERS
+  mat3 transformMat3 = mat3(transformationMatrix);
+  vec3 final = transformMat3 * vec3(p, 1);
+  #else
+  vec3 final = transformationMatrix * vec3(p, 1);
+  #endif
+
+  vec2 pointScreenPosition = (final.xy + 1.0) * screenSize / 2.0;
+  rgba = vec4(linkIndices, mid.x, mid.y, angle);
+  float i = (pointScreenPosition.x + 0.5) / screenSize.x;
+  float j = (pointScreenPosition.y + 0.5) / screenSize.y;
+  gl_Position = vec4(2.0 * vec2(i, j) - 1.0, 0.0, 1.0);
+
+  gl_PointSize = 1.0;
+}