feat(layers): add getPixelOffset prop to ScatterplotLayer

Add a getPixelOffset accessor to ScatterplotLayer that allows shifting
the rendered circle by a fixed number of screen pixels, independently
of zoom level. This is useful for preventing overlap between circles
and other layers (e.g. icons, text) without modifying the underlying
data positions.

The implementation follows the same pattern used by IconLayer and
TextLayer:
- New instance attribute `instancePixelOffset` (vec2, transition-enabled)
- In billboard mode, the pixel offset is added to the screen-space
  offset before clip-space projection
- In non-billboard mode, the pixel offset is converted to common space
  via project_pixel_size and added to the common-space offset
- Both GLSL and WGSL shader variants are updated
- Default value is [0, 0] for backward compatibility

Signed-off-by: Asish Kumar <officialasishkumar@gmail.com>

Author: officialasishkumar

modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.ts

@@ -15,6 +15,7 @@ in float instanceLineWidths;
 in vec4 instanceFillColors;
 in vec4 instanceLineColors;
 in vec3 instancePickingColors;
+in vec2 instancePixelOffset;
 
 out vec4 vFillColor;
 out vec4 vLineColor;
@@ -54,10 +55,12 @@ void main(void) {
     gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, vec3(0.0), geometry.position);
     DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
     vec3 offset = edgePadding * positions * outerRadiusPixels;
+    offset.xy += instancePixelOffset;
     DECKGL_FILTER_SIZE(offset, geometry);
     gl_Position.xy += project_pixel_size_to_clipspace(offset.xy);
   } else {
     vec3 offset = edgePadding * positions * project_pixel_size(outerRadiusPixels);
+    offset.xy += project_pixel_size(instancePixelOffset);
     DECKGL_FILTER_SIZE(offset, geometry);
     gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset, geometry.position);
     DECKGL_FILTER_GL_POSITION(gl_Position, geometry);

modules/layers/src/scatterplot-layer/scatterplot-layer.ts

@@ -116,6 +116,11 @@ type _ScatterplotLayerProps<DataT> = {
    * @default 1
    */
   getLineWidth?: Accessor<DataT, number>;
+  /**
+   * Pixel offset accessor, [x, y] in pixels.
+   * @default [0, 0]
+   */
+  getPixelOffset?: Accessor<DataT, Readonly<[number, number]>>;
   /**
    * @deprecated Use `getLineWidth` instead
    */
@@ -151,6 +156,7 @@ const defaultProps: DefaultProps<ScatterplotLayerProps> = {
   getFillColor: {type: 'accessor', value: DEFAULT_COLOR},
   getLineColor: {type: 'accessor', value: DEFAULT_COLOR},
   getLineWidth: {type: 'accessor', value: 1},
+  getPixelOffset: {type: 'accessor', value: [0, 0]},
 
   // deprecated
   strokeWidth: {deprecatedFor: 'getLineWidth'},
@@ -212,6 +218,11 @@ export default class ScatterplotLayer<DataT = any, ExtraPropsT extends {} = {}>
         transition: true,
         accessor: 'getLineWidth',
         defaultValue: 1
+      },
+      instancePixelOffset: {
+        size: 2,
+        transition: true,
+        accessor: 'getPixelOffset'
       }
     });
   }

modules/layers/src/scatterplot-layer/scatterplot-layer.wgsl.ts

@@ -28,14 +28,16 @@ struct ConstantAttributeUniforms {
  instanceFillColors: vec4<f32>,
  instanceLineColors: vec4<f32>,
  instancePickingColors: vec3<f32>,
+ instancePixelOffset: vec2<f32>,
 
  instancePositionsConstant: i32,
  instancePositions64LowConstant: i32,
  instanceRadiusConstant: i32,
  instanceLineWidthsConstant: i32,
  instanceFillColorsConstant: i32,
  instanceLineColorsConstant: i32,
- instancePickingColorsConstant: i32
+ instancePickingColorsConstant: i32,
+ instancePixelOffsetConstant: i32
 };
 
 @group(0) @binding(0) var<uniform> scatterplot: ScatterplotUniforms;
@@ -47,7 +49,8 @@ struct ConstantAttributes {
   instanceLineWidths: f32,
   instanceFillColors: vec4<f32>,
   instanceLineColors: vec4<f32>,
-  instancePickingColors: vec3<f32>
+  instancePickingColors: vec3<f32>,
+  instancePixelOffset: vec2<f32>
 };
 
 const constants = ConstantAttributes(
@@ -57,7 +60,8 @@ const constants = ConstantAttributes(
   0.0,
   vec4<f32>(0.0, 0.0, 0.0, 1.0),
   vec4<f32>(0.0, 0.0, 0.0, 1.0),
-  vec3<f32>(0.0)
+  vec3<f32>(0.0),
+  vec2<f32>(0.0)
 );
 
 struct Attributes {
@@ -70,7 +74,8 @@ struct Attributes {
   @location(4) instanceLineWidths: f32,
   @location(5) instanceFillColors: vec4<f32>,
   @location(6) instanceLineColors: vec4<f32>,
-  @location(7) instancePickingColors: vec3<f32>
+  @location(7) instancePickingColors: vec3<f32>,
+  @location(8) instancePixelOffset: vec2<f32>
 };
 
 struct Varyings {
@@ -127,13 +132,14 @@ fn vertexMain(attributes: Attributes) -> Varyings {
   if (scatterplot.billboard != 0) {
     varyings.position = project_position_to_clipspace(attributes.instancePositions, attributes.instancePositions64Low, vec3<f32>(0.0)); // TODO , geometry.position);
     // DECKGL_FILTER_GL_POSITION(varyings.position, geometry);
-    let offset = attributes.positions; // * edgePadding * varyings.outerRadiusPixels;
+    var offset = edgePadding * attributes.positions * varyings.outerRadiusPixels;
+    offset = vec3<f32>(offset.xy + attributes.instancePixelOffset, offset.z);
     // DECKGL_FILTER_SIZE(offset, geometry);
     let clipPixels = project_pixel_size_to_clipspace(offset.xy);
-    varyings.position.x = clipPixels.x;
-    varyings.position.y = clipPixels.y;
+    varyings.position = vec4<f32>(varyings.position.x + clipPixels.x, varyings.position.y + clipPixels.y, varyings.position.z, varyings.position.w);
   } else {
-    let offset = edgePadding * attributes.positions * project_pixel_size_float(varyings.outerRadiusPixels);
+    var offset = edgePadding * attributes.positions * project_pixel_size_float(varyings.outerRadiusPixels);
+    offset = vec3<f32>(offset.xy + project_pixel_size_vec2(attributes.instancePixelOffset), offset.z);
     // DECKGL_FILTER_SIZE(offset, geometry);
     varyings.position = project_position_to_clipspace(attributes.instancePositions, attributes.instancePositions64Low, offset); // TODO , geometry.position);
     // DECKGL_FILTER_GL_POSITION(varyings.position, geometry);