@cosmos.gl/graph 2.3.1-beta.1 → 2.4.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/draw-highlighted.vert

@@ -16,7 +16,7 @@ uniform float maxPointSize;
 uniform vec4 color;
 uniform float universalPointOpacity;
 uniform float greyoutOpacity;
-uniform bool darkenGreyout;
+uniform bool isDarkenGreyout;
 uniform vec4 backgroundColor;
 uniform vec4 greyoutColor;
 varying vec2 vertexPosition;
@@ -49,10 +49,10 @@ void main () {
       rgbColor = greyoutColor.rgb;
       pointOpacity = greyoutColor.a;
     } else {
-      // If greyoutColor is not set, make color lighter or darker based on darkenGreyout
+      // 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)
       
-      if (darkenGreyout) {
+      if (isDarkenGreyout) {
         // Darken the color
         rgbColor = mix(rgbColor, vec3(0.2), blendFactor);
       } else {

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

@@ -4,10 +4,20 @@
 precision highp float;
 #endif
 
-// The color and alpha values from the vertex shader
-varying vec3 rgbColor;
-varying float alpha;
+uniform float greyoutOpacity;
+uniform float pointOpacity;
+uniform sampler2D imageAtlasTexture;
+uniform bool isDarkenGreyout;
+uniform vec4 backgroundColor;
+
+
 varying float pointShape;
+varying float isGreyedOut;
+varying vec4 shapeColor;
+varying vec4 imageAtlasUV;
+varying float shapeSize;
+varying float imageSizeVarying;
+varying float overallSize;
 
 // Smoothing controls the smoothness of the point's edge
 const float smoothing = 0.9;
@@ -21,12 +31,31 @@ 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) {
+    vec3 finalColor = imageColor.rgb;
+    float finalAlpha = imageColor.a;
+    
+    if (isGreyedOut > 0.0) {
+        float blendFactor = 0.65; // Controls how much to modify (0.0 = original, 1.0 = target color)
+        
+        if (isDarkenGreyout) {
+            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);
@@ -130,22 +159,85 @@ float getShapeDistance(vec2 p, float shape) {
 }
 
 void main() {
-    // Discard the fragment if the point is fully transparent
-    if (alpha == 0.0) { discard; }
+    // 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);
     
-    float opacity;
-    if (pointShape == CIRCLE) {
-        // For circles, use the original distance calculation
-        float pointCenterDistance = dot(pointCoord, pointCoord);
-        opacity = alpha * (1.0 - smoothstep(smoothing, 1.0, pointCenterDistance));
+    // 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 = texture2D(imageAtlasTexture, atlasUV);
+                finalImageColor = applyGreyoutToImage(imageColor);
+            }
+        } 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 = texture2D(imageAtlasTexture, atlasUV);
+            finalImageColor = applyGreyoutToImage(imageColor);
+        }
+    }
+
+    float finalPointAlpha = max(finalShapeColor.a, finalImageColor.a);
+    if (isGreyedOut > 0.0 && greyoutOpacity != -1.0) {
+        finalPointAlpha *= greyoutOpacity;
     } else {
-        // For other shapes, use the shape distance function
-        float shapeDistance = getShapeDistance(pointCoord, pointShape);
-        opacity = alpha * (1.0 - smoothstep(-0.01, 0.01, shapeDistance));
+        finalPointAlpha *= pointOpacity;
     }
 
-    gl_FragColor = vec4(rgbColor, opacity);
+    // Blend image color above point color
+    gl_FragColor = vec4(
+        mix(finalShapeColor.rgb, finalImageColor.rgb, finalImageColor.a),
+        finalPointAlpha
+    );
 }

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

@@ -6,29 +6,37 @@ attribute vec2 pointIndices;
 attribute float size;
 attribute vec4 color;
 attribute float shape;
+attribute float imageIndex;
+attribute float imageSize;
 
 uniform sampler2D positionsTexture;
 uniform sampler2D pointGreyoutStatus;
+uniform sampler2D imageAtlasCoords;
 uniform float ratio;
 uniform mat3 transformationMatrix;
 uniform float pointsTextureSize;
 uniform float sizeScale;
 uniform float spaceSize;
 uniform vec2 screenSize;
-uniform float greyoutOpacity;
-uniform float pointOpacity;
+
 uniform vec4 greyoutColor;
 uniform vec4 backgroundColor;
 uniform bool scalePointsOnZoom;
 uniform float maxPointSize;
-uniform bool darkenGreyout;
+uniform bool isDarkenGreyout;
 uniform bool skipSelected;
 uniform bool skipUnselected;
+uniform bool hasImages;
+uniform float imageCount;
+uniform float imageAtlasCoordsTextureSize;
 
-varying vec2 textureCoords;
-varying vec3 rgbColor;
-varying float alpha;
 varying float pointShape;
+varying float isGreyedOut;
+varying vec4 shapeColor;
+varying vec4 imageAtlasUV;
+varying float shapeSize;
+varying float imageSizeVarying;
+varying float overallSize;
 
 float calculatePointSize(float size) {
   float pSize;
@@ -41,11 +49,10 @@ float calculatePointSize(float size) {
   return min(pSize, maxPointSize * ratio);
 }
 
-void main() {  
-  textureCoords = pointIndices;
-  
+void main() {    
   // Check greyout status for selective rendering
-  vec4 greyoutStatus = texture2D(pointGreyoutStatus, (textureCoords + 0.5) / pointsTextureSize);
+  vec4 greyoutStatus = texture2D(pointGreyoutStatus, (pointIndices + 0.5) / pointsTextureSize);
+  isGreyedOut = greyoutStatus.r;
   bool isSelected = greyoutStatus.r == 0.0;
   
   // Discard point based on rendering mode
@@ -61,7 +68,7 @@ void main() {
   }
   
   // Position
-  vec4 pointPosition = texture2D(positionsTexture, (textureCoords + 0.5) / pointsTextureSize);
+  vec4 pointPosition = texture2D(positionsTexture, (pointIndices + 0.5) / pointsTextureSize);
   vec2 point = pointPosition.rg;
 
   // Transform point position to normalized device coordinates
@@ -70,32 +77,51 @@ void main() {
   vec3 finalPosition = transformationMatrix * vec3(normalizedPosition, 1);
   gl_Position = vec4(finalPosition.rg, 0, 1);
 
-  gl_PointSize = calculatePointSize(size * sizeScale);
+  // Calculate sizes for shape and image
+  float shapeSizeValue = calculatePointSize(size * sizeScale);
+  float imageSizeValue = calculatePointSize(imageSize * sizeScale);
+  
+  // Use the larger of the two sizes for the overall point size
+  float overallSizeValue = max(shapeSizeValue, imageSizeValue);
+  gl_PointSize = overallSizeValue;
+
+  // Pass size information to fragment shader
+  shapeSize = shapeSizeValue;
+  imageSizeVarying = imageSizeValue;
+  overallSize = overallSizeValue;
 
-  rgbColor = color.rgb;
-  alpha = color.a * pointOpacity;
+  shapeColor = color;
   pointShape = shape;
 
   // Adjust alpha of selected points
-  if (greyoutStatus.r > 0.0) {
+  if (isGreyedOut > 0.0) {
     if (greyoutColor[0] != -1.0) {
-      rgbColor = greyoutColor.rgb;
-      alpha = greyoutColor.a;
+      shapeColor = greyoutColor;
     } else {
-      // If greyoutColor is not set, make color lighter or darker based on darkenGreyout
+      // 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)
       
-      if (darkenGreyout) {
+      if (isDarkenGreyout) {
         // Darken the color
-        rgbColor = mix(rgbColor, vec3(0.2), blendFactor);
+        shapeColor.rgb = mix(shapeColor.rgb, vec3(0.2), blendFactor);
       } else {
         // Lighten the color
-        rgbColor = mix(rgbColor, max(backgroundColor.rgb, vec3(0.8)), blendFactor);
+        shapeColor.rgb = mix(shapeColor.rgb, max(backgroundColor.rgb, vec3(0.8)), blendFactor);
       }
     }
+  }
 
-    if (greyoutOpacity != -1.0) {
-      alpha *= greyoutOpacity;
-    }
+  if (!hasImages || imageIndex < 0.0 || imageIndex >= imageCount) {
+    imageAtlasUV = vec4(-1.0);
+    return;
   }
-}
+  // Calculate image atlas UV coordinates based on imageIndex
+  float atlasCoordIndex = imageIndex;
+  // Calculate the position in the texture grid
+  float texX = mod(atlasCoordIndex, imageAtlasCoordsTextureSize);
+  float texY = floor(atlasCoordIndex / imageAtlasCoordsTextureSize);
+  // Convert to texture coordinates (0.0 to 1.0)
+  vec2 atlasCoordTexCoord = (vec2(texX, texY) + 0.5) / imageAtlasCoordsTextureSize;
+  vec4 atlasCoords = texture2D(imageAtlasCoords, atlasCoordTexCoord);
+  imageAtlasUV = atlasCoords;
+} 

package/src/modules/Points/find-points-on-area-selection.frag

@@ -9,7 +9,8 @@ uniform float spaceSize;
 uniform vec2 screenSize;
 uniform float ratio;
 uniform mat3 transformationMatrix;
-uniform vec2 selection[2];
+uniform vec2 selection0;
+uniform vec2 selection1;
 uniform bool scalePointsOnZoom;
 uniform float maxPointSize;
 
@@ -34,10 +35,10 @@ void main() {
   vec4 pSize = texture2D(pointSize, textureCoords);
   float size = pSize.r * sizeScale;
 
-  float left = 2.0 * (selection[0].x - 0.5 * pointSizeF(size)) / screenSize.x - 1.0;
-  float right = 2.0 * (selection[1].x + 0.5 * pointSizeF(size)) / screenSize.x - 1.0;
-  float top =  2.0 * (selection[0].y - 0.5 * pointSizeF(size)) / screenSize.y - 1.0;
-  float bottom =  2.0 * (selection[1].y + 0.5 * pointSizeF(size)) / screenSize.y - 1.0;
+  float left = 2.0 * (selection0.x - 0.5 * pointSizeF(size)) / screenSize.x - 1.0;
+  float right = 2.0 * (selection1.x + 0.5 * pointSizeF(size)) / screenSize.x - 1.0;
+  float top =  2.0 * (selection0.y - 0.5 * pointSizeF(size)) / screenSize.y - 1.0;
+  float bottom =  2.0 * (selection1.y + 0.5 * pointSizeF(size)) / screenSize.y - 1.0;
 
   gl_FragColor = vec4(0.0, 0.0, pointPosition.rg);
   if (final.x >= left && final.x <= right && final.y >= top && final.y <= bottom) {