Improve picking with multiple layers (snappy picking)

[rubenthoms]

Problem

When working with overlapping layers that have very different visual densities (e.g. thin foreground geometry over a dense background), the current picking behavior makes it difficult to achieve intuitive (“snappy”) interaction, even with pickingRadius enabled.

Example scenario

Foreground layer: thin PathLayer polylines (interaction target) (e.g. WellsLayer)
Background layer: map (BitmapLayer or MapLayer)

Desired behavior:

Larger effective picking radius for the thin foreground layer
Smaller (or default) picking radius for the background layer

Actual behavior:

Picking radius is applied globally (screen-space)
When hovering near but not directly over the polyline:
The background layer is picked instead
Even if a larger radius is desired for the foreground layer

Strategy

1. Look at deck.gl examples and see if they have the same issue anywhere.
2. Create a GitHub issue in their repo that potentially references the problems in their examples.
3. Await their answer and suggestion - either continue with that or start our own investigation of possibilities, for instance:

• onHover override with multi-picking and prioritization
• LayerExtension? - probably fragile
• Invisible hit layer with picking and disabled picking for main/visible layer

[w1nklr]

We had a similar issue also.

Our fix was in our onMouseEvent callback to sort the event.infos according to the distance to the eye:

event.infos.sort((a: TPickingInfo, b: TPickingInfo) => {
        return (
          distance(a.coordinates, a.viewport) -
          distance(b.coordinates, b.viewport)
        );
      })
}

with

function distance(
  coordinates: [number, number] | [number, number, number] | undefined,
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  viewport: any
): number {
  if (viewport === undefined || coordinates?.[2] === undefined) {
    return 1;
  }

  const origin = viewport.cameraPosition as [number, number, number];
  return Math.sqrt(
    Math.pow(coordinates[0] - origin[0], 2) +
      Math.pow(coordinates[1] - origin[1], 2) +
      Math.pow(coordinates[2] - origin[2], 2)
  );
}

Then, event.infos[0] is the closest to the eye, and probably the well if it is in front of a surface.