@cosmos.gl/graph 2.6.2 → 2.7.0-beta.0

package/src/modules/Points/atlas-utils.ts

@@ -0,0 +1,137 @@
+/**
+ * Creates a texture atlas from an array of ImageData objects.
+ *
+ * A texture atlas is a single large texture that contains multiple smaller images.
+ * This allows efficient rendering by reducing the number of texture bindings needed.
+ *
+ * The atlas uses a grid layout where each image gets a square region sized to
+ * accommodate the largest image dimension. Images are placed left-to-right, top-to-bottom.
+ *
+ * @param imageDataArray - Array of ImageData objects to pack into the atlas
+ * @param webglMaxTextureSize - WebGL maximum texture size limit (default: 16384)
+ * @returns Atlas data object containing:
+ *   - atlasData: RGBA pixel data as Uint8Array
+ *   - atlasSize: Total atlas texture size in pixels
+ *   - atlasCoords: UV coordinates for each image as Float32Array
+ *   - atlasCoordsSize: Grid size (number of rows/columns)
+ *   Returns null if creation fails or no valid images provided
+ */
+export function createAtlasDataFromImageData (
+  imageDataArray: ImageData[],
+  webglMaxTextureSize = 16384
+): {
+  atlasData: Uint8Array;
+  atlasSize: number;
+  atlasCoords: Float32Array;
+  atlasCoordsSize: number;
+} | null {
+  // Step 1: Validate input - ensure we have images to process
+  if (!imageDataArray?.length) {
+    return null
+  }
+
+  // Step 2: Find the maximum dimension across all images
+  // The max dimension determines the size of each grid cell in the atlas
+  let maxDimension = 0
+  for (const imageData of imageDataArray) {
+    const dimension = Math.max(imageData.width, imageData.height)
+    if (dimension > maxDimension) {
+      maxDimension = dimension
+    }
+  }
+
+  // Step 3: Validate that we found valid image dimensions
+  if (maxDimension === 0) {
+    console.warn('Invalid image dimensions: all images have zero width or height')
+    return null
+  }
+
+  const originalMaxDimension = maxDimension
+
+  // Step 4: Calculate optimal atlas grid size
+  const atlasCoordsSize = Math.ceil(Math.sqrt(imageDataArray.length))
+  let atlasSize = atlasCoordsSize * maxDimension
+
+  // Step 5: Apply WebGL size limit scaling if necessary
+  let scalingFactor = 1.0
+
+  if (atlasSize > webglMaxTextureSize) {
+    // Calculate required scale to fit within WebGL limits
+    scalingFactor = webglMaxTextureSize / atlasSize
+
+    // Apply scaling to both the individual image dimensions and atlas size
+    maxDimension = Math.max(1, Math.floor(maxDimension * scalingFactor))
+    atlasSize = Math.max(1, Math.floor(atlasSize * scalingFactor))
+
+    console.warn(
+      '🖼️  Atlas scaling required: Original size ' +
+      `${(originalMaxDimension * atlasCoordsSize).toLocaleString()}px exceeds WebGL limit ` +
+      `${webglMaxTextureSize.toLocaleString()}px. Scaling down to ${atlasSize.toLocaleString()}px ` +
+      `(${Math.round(scalingFactor * 100)}% of original quality)`
+    )
+  }
+
+  // Step 6: Create buffers for atlas data
+  const atlasData = new Uint8Array(atlasSize * atlasSize * 4).fill(0)
+  const atlasCoords = new Float32Array(atlasCoordsSize * atlasCoordsSize * 4).fill(-1)
+
+  // Step 7: Pack each image into the atlas grid
+  for (const [index, imageData] of imageDataArray.entries()) {
+    const originalWidth = imageData.width
+    const originalHeight = imageData.height
+    if (originalWidth === 0 || originalHeight === 0) {
+      // leave coords at -1 for this index and continue
+      continue
+    }
+
+    // Calculate individual scale for this image based on maxDimension
+    // This ensures each image fits optimally within its grid cell
+    const individualScale = Math.min(1.0, maxDimension / Math.max(originalWidth, originalHeight))
+
+    const scaledWidth = Math.floor(originalWidth * individualScale)
+    const scaledHeight = Math.floor(originalHeight * individualScale)
+
+    // Calculate grid position (row, column) for this image
+    const row = Math.floor(index / atlasCoordsSize)
+    const col = index % atlasCoordsSize
+
+    // Calculate pixel position in the atlas texture
+    const atlasX = col * maxDimension
+    const atlasY = row * maxDimension
+
+    // Calculate and store UV coordinates for this image
+    atlasCoords[index * 4] = atlasX / atlasSize // minU
+    atlasCoords[index * 4 + 1] = atlasY / atlasSize // minV
+    atlasCoords[index * 4 + 2] = (atlasX + scaledWidth) / atlasSize // maxU
+    atlasCoords[index * 4 + 3] = (atlasY + scaledHeight) / atlasSize // maxV
+
+    // Copy image pixel data into the atlas texture
+    for (let y = 0; y < scaledHeight; y++) {
+      for (let x = 0; x < scaledWidth; x++) {
+        // Calculate source pixel coordinates (with scaling)
+        const srcX = Math.floor(x * (originalWidth / scaledWidth))
+        const srcY = Math.floor(y * (originalHeight / scaledHeight))
+
+        // Calculate source pixel index in the original image
+        const srcIndex = (srcY * originalWidth + srcX) * 4
+
+        // Calculate target pixel index in the atlas texture
+        const atlasIndex = ((atlasY + y) * atlasSize + (atlasX + x)) * 4
+
+        // Copy RGBA values from source to atlas
+        atlasData[atlasIndex] = imageData.data[srcIndex] ?? 0 // Red channel
+        atlasData[atlasIndex + 1] = imageData.data[srcIndex + 1] ?? 0 // Green channel
+        atlasData[atlasIndex + 2] = imageData.data[srcIndex + 2] ?? 0 // Blue channel
+        atlasData[atlasIndex + 3] = imageData.data[srcIndex + 3] ?? 255 // Alpha channel
+      }
+    }
+  }
+
+  // Return the complete atlas data
+  return {
+    atlasData,
+    atlasSize,
+    atlasCoords,
+    atlasCoordsSize,
+  }
+}

package/src/modules/Points/drag-point.frag

@@ -0,0 +1,34 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform sampler2D positionsTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform dragPointUniforms {
+  vec2 mousePos;
+  float index;
+} dragPoint;
+
+#define mousePos dragPoint.mousePos
+#define index dragPoint.index
+#else
+uniform vec2 mousePos;
+uniform float index;
+#endif
+
+in vec2 textureCoords;
+
+out vec4 fragColor;
+
+void main() {
+  vec4 pointPosition = texture(positionsTexture, textureCoords);
+
+  // Check if a point is being dragged
+  if (index >= 0.0 && index == pointPosition.b) {
+    pointPosition.rg = mousePos.rg;
+  }
+
+  fragColor = pointPosition;
+}

package/src/modules/Points/draw-highlighted.frag

@@ -0,0 +1,44 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform drawHighlightedUniforms {
+  float size;
+  mat4 transformationMatrix;
+  float pointsTextureSize;
+  float sizeScale;
+  float spaceSize;
+  vec2 screenSize;
+  float scalePointsOnZoom;
+  float pointIndex;
+  float maxPointSize;
+  vec4 color;
+  float universalPointOpacity;
+  float greyoutOpacity;
+  float isDarkenGreyout;
+  vec4 backgroundColor;
+  vec4 greyoutColor;
+  float width;
+} drawHighlighted;
+
+#define width drawHighlighted.width
+#else
+uniform float width;
+#endif
+
+in vec2 vertexPosition;
+in float pointOpacity;
+in vec3 rgbColor;
+
+out vec4 fragColor;
+
+const float smoothing = 1.05;
+
+void main () {
+  float r = dot(vertexPosition, vertexPosition);
+  float opacity = smoothstep(r, r * smoothing, 1.0);
+  float stroke = smoothstep(width, width * smoothing, r);
+  fragColor = vec4(rgbColor, opacity * stroke * pointOpacity);
+}

package/src/modules/Points/draw-highlighted.vert

@@ -0,0 +1,145 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+in vec2 vertexCoord;
+
+uniform sampler2D positionsTexture;
+uniform sampler2D pointGreyoutStatusTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform drawHighlightedUniforms {
+  float size;
+  mat4 transformationMatrix;
+  float pointsTextureSize;
+  float sizeScale;
+  float spaceSize;
+  vec2 screenSize;
+  float scalePointsOnZoom;
+  float pointIndex;
+  float maxPointSize;
+  vec4 color;
+  float universalPointOpacity;
+  float greyoutOpacity;
+  float isDarkenGreyout;
+  vec4 backgroundColor;
+  vec4 greyoutColor;
+  float width;
+} drawHighlighted;
+
+#define size drawHighlighted.size
+#define transformationMatrix drawHighlighted.transformationMatrix
+#define pointsTextureSize drawHighlighted.pointsTextureSize
+#define sizeScale drawHighlighted.sizeScale
+#define spaceSize drawHighlighted.spaceSize
+#define screenSize drawHighlighted.screenSize
+#define scalePointsOnZoom drawHighlighted.scalePointsOnZoom
+#define pointIndex drawHighlighted.pointIndex
+#define maxPointSize drawHighlighted.maxPointSize
+#define color drawHighlighted.color
+#define universalPointOpacity drawHighlighted.universalPointOpacity
+#define greyoutOpacity drawHighlighted.greyoutOpacity
+#define isDarkenGreyout drawHighlighted.isDarkenGreyout
+#define backgroundColor drawHighlighted.backgroundColor
+#define greyoutColor drawHighlighted.greyoutColor
+#else
+uniform float size;
+uniform mat3 transformationMatrix;
+uniform float pointsTextureSize;
+uniform float sizeScale;
+uniform float spaceSize;
+uniform vec2 screenSize;
+uniform float scalePointsOnZoom;
+uniform float pointIndex;
+uniform float maxPointSize;
+uniform vec4 color;
+uniform float universalPointOpacity;
+uniform float greyoutOpacity;
+uniform float isDarkenGreyout;
+uniform vec4 backgroundColor;
+uniform vec4 greyoutColor;
+uniform float width;
+#endif
+out vec2 vertexPosition;
+out float pointOpacity;
+out vec3 rgbColor;
+
+float calculatePointSize(float pointSize) {
+  float pSize;
+
+  if (scalePointsOnZoom > 0.0) { 
+    pSize = pointSize * transformationMatrix[0][0];
+  } else {
+    pSize = pointSize * min(5.0, max(1.0, transformationMatrix[0][0] * 0.01));
+  }
+
+  return min(pSize, maxPointSize);
+}
+
+const float relativeRingRadius = 1.3;
+
+void main () {
+  vertexPosition = vertexCoord;
+
+  vec2 textureCoordinates = vec2(mod(pointIndex, pointsTextureSize), floor(pointIndex / pointsTextureSize)) + 0.5;
+  vec4 pointPosition = texture(positionsTexture, textureCoordinates / pointsTextureSize);
+
+  rgbColor = color.rgb;
+  pointOpacity = color.a * universalPointOpacity;
+  vec4 greyoutStatus = texture(pointGreyoutStatusTexture, textureCoordinates / pointsTextureSize);
+  if (greyoutStatus.r > 0.0) {
+    if (greyoutColor[0] != -1.0) {
+      rgbColor = greyoutColor.rgb;
+      pointOpacity = greyoutColor.a;
+    } else {
+      // If greyoutColor is not set, make color lighter or darker based on isDarkenGreyout
+      float blendFactor = 0.65; // Controls how much to modify (0.0 = original, 1.0 = target color)
+      
+      #ifdef USE_UNIFORM_BUFFERS
+      if (isDarkenGreyout > 0.0) {
+        // Darken the color
+        rgbColor = mix(rgbColor, vec3(0.2), blendFactor);
+      } else {
+        // Lighten the color
+        rgbColor = mix(rgbColor, max(backgroundColor.rgb, vec3(0.8)), blendFactor);
+      }
+      #else
+      if (isDarkenGreyout > 0.0) {
+        // Darken the color
+        rgbColor = mix(rgbColor, vec3(0.2), blendFactor);
+      } else {
+        // Lighten the color
+        rgbColor = mix(rgbColor, max(backgroundColor.rgb, vec3(0.8)), blendFactor);
+      }
+      #endif
+    }
+
+    if (greyoutOpacity != -1.0) {
+      pointOpacity *= greyoutOpacity;
+    }
+  }
+
+  // Calculate point radius
+  float pointSize = (calculatePointSize(size * sizeScale) * relativeRingRadius) / transformationMatrix[0][0];
+  float radius = pointSize * 0.5;
+
+  // Calculate point position in screen space
+  vec2 a = pointPosition.xy;
+  vec2 b = pointPosition.xy + vec2(0.0, radius);
+  vec2 xBasis = b - a;
+  vec2 yBasis = normalize(vec2(-xBasis.y, xBasis.x));
+  vec2 pointPositionInScreenSpace = a + xBasis * vertexCoord.x + yBasis * radius * vertexCoord.y;
+
+  // Transform point position to normalized device coordinates
+  vec2 p = 2.0 * pointPositionInScreenSpace / 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
+  
+  gl_Position = vec4(final.rg, 0, 1);
+}

package/src/modules/Points/draw-points.frag

@@ -0,0 +1,259 @@
+#version 300 es
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform sampler2D imageAtlasTexture;
+
+#ifdef USE_UNIFORM_BUFFERS
+layout(std140) uniform drawFragmentUniforms {
+  float greyoutOpacity;
+  float pointOpacity;
+  float isDarkenGreyout;
+  vec4 backgroundColor;
+} drawFragment;
+
+#define greyoutOpacity drawFragment.greyoutOpacity
+#define pointOpacity drawFragment.pointOpacity
+#define isDarkenGreyout drawFragment.isDarkenGreyout
+#define backgroundColor drawFragment.backgroundColor
+#else
+uniform float greyoutOpacity;
+uniform float pointOpacity;
+uniform float isDarkenGreyout;
+uniform vec4 backgroundColor;
+#endif
+
+
+in float pointShape;
+in float isGreyedOut;
+in vec4 shapeColor;
+in vec4 imageAtlasUV;
+in float shapeSize;
+in float imageSizeVarying;
+in float overallSize;
+
+out vec4 fragColor;
+
+// Smoothing controls the smoothness of the point's edge
+const float smoothing = 0.9;
+
+// Shape constants
+const float CIRCLE = 0.0;
+const float SQUARE = 1.0;
+const float TRIANGLE = 2.0;
+const float DIAMOND = 3.0;
+const float PENTAGON = 4.0;
+const float HEXAGON = 5.0;
+const float STAR = 6.0;
+const float CROSS = 7.0;
+const float NONE = 8.0;
+
+// Distance functions for different shapes
+float circleDistance(vec2 p) {
+    return dot(p, p);
+}
+
+// Function to apply greyout logic to image colors
+vec4 applyGreyoutToImage(vec4 imageColor, float isGreyedOutValue) {
+    vec3 finalColor = imageColor.rgb;
+    float finalAlpha = imageColor.a;
+    
+    if (isGreyedOutValue > 0.0) {
+        float blendFactor = 0.65; // Controls how much to modify (0.0 = original, 1.0 = target color)
+        
+        if (isDarkenGreyout > 0.0) {
+            finalColor = mix(finalColor, vec3(0.2), blendFactor);
+        } else {
+            finalColor = mix(finalColor, max(backgroundColor.rgb, vec3(0.8)), blendFactor);
+        }
+    }
+    
+    return vec4(finalColor, finalAlpha);
+}
+
+float squareDistance(vec2 p) {
+    vec2 d = abs(p) - vec2(0.8);
+    return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);
+}
+
+float triangleDistance(vec2 p) {
+    const float k = sqrt(3.0);   // ≈1.732; slope of 60° lines for an equilateral triangle
+    p.x = abs(p.x) - 0.9;        // fold the X axis and shift: brings left and right halves together
+    p.y = p.y + 0.55;             // move the whole shape up slightly so it is centred vertically
+
+    // reflect points that fall outside the main triangle back inside, to reuse the same maths
+    if (p.x + k * p.y > 0.0)
+        p = vec2(p.x - k * p.y,  -k * p.x - p.y) / 2.0;
+
+    p.x -= clamp(p.x, -1.0, 0.0); // clip any remainder on the left side
+
+    // Return signed distance: negative = inside; positive = outside
+    return -length(p) * sign(p.y);
+}
+
+float diamondDistance(vec2 p) {
+    // aspect > 1  →  taller diamond
+    const float aspect = 1.2;
+    return abs(p.x) + abs(p.y) / aspect - 0.8;
+}
+
+float pentagonDistance(vec2 p) {
+    // Regular pentagon signed-distance (Inigo Quilez)
+    const vec3 k = vec3(0.809016994, 0.587785252, 0.726542528);
+    p.x = abs(p.x);
+
+    // Reflect across the two tilted edges ─ only if point is outside
+    p -= 2.0 * min(dot(vec2(-k.x, k.y), p), 0.0) * vec2(-k.x, k.y);
+    p -= 2.0 * min(dot(vec2( k.x, k.y), p), 0.0) * vec2( k.x, k.y);
+
+    // Clip against the top horizontal edge (keeps top point sharp)
+    p -= vec2(clamp(p.x, -k.z * k.x, k.z * k.x), k.z);
+
+    // Return signed distance (negative → inside, positive → outside)
+    return length(p) * sign(p.y);
+}
+
+float hexagonDistance(vec2 p) {
+    const vec3 k = vec3(-0.866025404, 0.5, 0.577350269);
+    p = abs(p);
+    p -= 2.0 * min(dot(k.xy, p), 0.0) * k.xy;
+    p -= vec2(clamp(p.x, -k.z * 0.8, k.z * 0.8), 0.8);
+    return length(p) * sign(p.y);
+}
+
+float starDistance(vec2 p) {
+    // 5-point star signed-distance function (adapted from Inigo Quilez)
+    // r  – outer radius, rf – inner/outer radius ratio
+    const float r  = 0.9;
+    const float rf = 0.45;
+
+    // Pre-computed rotation vectors for the star arms (36° increments)
+    const vec2 k1 = vec2(0.809016994, -0.587785252);
+    const vec2 k2 = vec2(-k1.x, k1.y);
+
+    // Fold the plane into a single arm sector
+    p.x = abs(p.x);
+    p -= 2.0 * max(dot(k1, p), 0.0) * k1;
+    p -= 2.0 * max(dot(k2, p), 0.0) * k2;
+    p.x = abs(p.x);
+
+    // Translate so the top tip of the star lies on the X-axis
+    p.y -= r;
+
+    // Vector describing the edge between an outer tip and its adjacent inner point
+    vec2 ba = rf * vec2(-k1.y, k1.x) - vec2(0.0, 1.0);
+    // Project the point onto that edge and clamp the projection to the segment
+    float h = clamp(dot(p, ba) / dot(ba, ba), 0.0, r);
+
+    // Return signed distance (negative => inside, positive => outside)
+    return length(p - ba * h) * sign(p.y * ba.x - p.x * ba.y);
+}
+
+float crossDistance(vec2 p) {
+    // Signed distance function for a cross (union of two rectangles)
+    // Adapted from Inigo Quilez (https://iquilezles.org/)
+    // Each arm has half-sizes 0.3 (thickness) and 0.8 (length)
+    p = abs(p);
+    if (p.y > p.x) p = p.yx;       // exploit symmetry
+
+    vec2 q = p - vec2(0.8, 0.3);   // subtract half-sizes (length, thickness)
+
+    // Standard rectangle SDF, then take union of the two arms
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0);
+}
+
+float getShapeDistance(vec2 p, float shape) {
+    if (shape == SQUARE) return squareDistance(p);
+    else if (shape == TRIANGLE) return triangleDistance(p);
+    else if (shape == DIAMOND) return diamondDistance(p);
+    else if (shape == PENTAGON) return pentagonDistance(p);
+    else if (shape == HEXAGON) return hexagonDistance(p);
+    else if (shape == STAR) return starDistance(p);
+    else if (shape == CROSS) return crossDistance(p);
+    else return circleDistance(p); // Default to circle
+}
+
+void main() {
+    // Discard the fragment if the point is fully transparent and has no image
+    if (shapeColor.a == 0.0 && imageAtlasUV.x == -1.0) {
+        discard;
+    }
+
+    // Discard the fragment if the point has no shape and no image
+    if (pointShape == NONE && imageAtlasUV.x == -1.0) {
+        discard;
+    }
+
+    // Calculate coordinates within the point
+    vec2 pointCoord = 2.0 * gl_PointCoord - 1.0;
+
+    vec4 finalShapeColor = vec4(0.0);
+    vec4 finalImageColor = vec4(0.0);
+    
+    // Handle shape rendering with centering logic
+    if (pointShape != NONE) {
+        // Calculate shape coordinates with centering
+        vec2 shapeCoord = pointCoord;
+        if (overallSize > shapeSize && shapeSize > 0.0) {
+            // Shape is smaller than overall size, center it
+            float scale = shapeSize / overallSize;
+            shapeCoord = pointCoord / scale;
+        }
+        
+        float opacity;
+        if (pointShape == CIRCLE) {
+            // For circles, use the original distance calculation
+            float pointCenterDistance = dot(shapeCoord, shapeCoord);
+            opacity = 1.0 - smoothstep(smoothing, 1.0, pointCenterDistance);
+        } else {
+            // For other shapes, use the shape distance function
+            float shapeDistance = getShapeDistance(shapeCoord, pointShape);
+            opacity = 1.0 - smoothstep(-0.01, 0.01, shapeDistance);
+        }
+        opacity *= shapeColor.a;
+
+        finalShapeColor = vec4(shapeColor.rgb, opacity);
+    }
+
+    // Handle image rendering with centering logic
+    if (imageAtlasUV.x != -1.0) {
+        // Calculate image coordinates with centering
+        vec2 imageCoord = pointCoord;
+        if (overallSize > imageSizeVarying && imageSizeVarying > 0.0) {
+            // Image is smaller than overall size, center it
+            float scale = imageSizeVarying / overallSize;
+            imageCoord = pointCoord / scale;
+            
+            // Check if we're outside the valid image area
+            if (abs(imageCoord.x) > 1.0 || abs(imageCoord.y) > 1.0) {
+                // We're outside the image bounds, don't render the image
+                finalImageColor = vec4(0.0);
+            } else {
+                // Sample from texture atlas
+                vec2 atlasUV = mix(imageAtlasUV.xy, imageAtlasUV.zw, (imageCoord + 1.0) * 0.5);
+                vec4 imageColor = texture(imageAtlasTexture, atlasUV);
+                finalImageColor = applyGreyoutToImage(imageColor, isGreyedOut);
+            }
+        } else {
+            // Image is same size or larger than overall size, no scaling needed
+            // Sample from texture atlas
+            vec2 atlasUV = mix(imageAtlasUV.xy, imageAtlasUV.zw, (imageCoord + 1.0) * 0.5);
+            vec4 imageColor = texture(imageAtlasTexture, atlasUV);
+            finalImageColor = applyGreyoutToImage(imageColor, isGreyedOut);
+        }
+    }
+
+    float finalPointAlpha = max(finalShapeColor.a, finalImageColor.a);
+    if (isGreyedOut > 0.0 && greyoutOpacity != -1.0) {
+        finalPointAlpha *= greyoutOpacity;
+    } else {
+        finalPointAlpha *= pointOpacity;
+    }
+
+    // Blend image color above point color
+    fragColor = vec4(
+        mix(finalShapeColor.rgb, finalImageColor.rgb, finalImageColor.a),
+        finalPointAlpha
+    );
+}