[Bug] Bitmaplayer flickering on zoom

[Fabioni]

Description

Using

  textureParameters: {
    minFilter: 'nearest',
    magFilter: 'nearest'
  },

in
Bitmaplayer results in flickering on zoom. See this video:

githubdeckgl.mp4

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

Clear shapes without flickering

Steps to Reproduce

/*
* https://deck.gl/docs/api-reference/layers/bitmap-layer
*/
const {DeckGL, BitmapLayer, COORDINATE_SYSTEM} = deck;

const layer = new BitmapLayer({
  id: 'BitmapLayer',
  bounds: [-123, 37, -122, 38],
  image: 'https://dummyimage.com/3200x3100/000/fff',
  textureParameters: {
    minFilter: 'nearest',
    magFilter: 'nearest'
  },

  opacity: 0.5,

});

new DeckGL({
  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
  initialViewState: {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11,
    maxZoom: 20,
    pitch: 30,
    bearing: 0
  },
  controller: true,
  layers: [layer]
});
  

Environment

• Framework version: [email protected]
• Browser: Chrome 131
• OS: Mac

Logs

No response

[Fabioni]

It also happens using this

const layer = new BitmapLayer({
  id: 'BitmapLayer',
  bounds: bounds: [-123, 37, -122, 38],
  image: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png',
  opacity: 0.5,
    textureParameters: {
      minFilter: 'nearest',
      magFilter: 'nearest'
  },
  pickable: true,
});

but not this

const layer = new BitmapLayer({
  id: 'BitmapLayer',
  bounds: [-122.519, 37.7045, -122.355, 37.829],
  image: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-districts.png',
  opacity: 0.5,
    textureParameters: {
      minFilter: 'nearest',
      magFilter: 'nearest'
  },
  pickable: true,
});

So maybe it only happens for larger bounds or has to do with the relationship between bounds and image resolution?

[ibgreen]

Does using 'linear' instead of 'nearest' improve it?

You want to avoid interpolation for some reason?

[Fabioni]

My feeling is that 'linear' just blurs the problem a bit, but it is still there.

My feeling is that 'linear' just blurs the problem a bit, but it is still there. That is why the bug is better demonstrated without interpolation. And yes, I want to avoid interpolation anyway for my usecase.

[Pessimistress]

It probably has to do with the LNGLAT system at zoom>12 does not guarantee that points outside of the viewport are projected accurately. In the case of the BitmapLayer, the projected corners of the bound, although invisible, are still used to interpolate the texture coordinates for each fragment.

To verify this you can try preproject the bound corners:

+ const project = new WebMercatorViewport().projectFlat;

const layer = new BitmapLayer({
  id: 'BitmapLayer',
-  bounds: [-123, 37, -122, 38],
+  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+  bounds: [project([-123, 37]), project([-123, 38]), project([-122, 38]), project([-122, 37])],
  image: 'https://dummyimage.com/3200x3100/000/fff'
});

[Fabioni]

It probably has to do with the LNGLAT system at zoom>12 does not guarantee that points outside of the viewport are projected accurately. In the case of the BitmapLayer, the projected corners of the bound, although invisible, are still used to interpolate the texture coordinates for each fragment.

To verify this you can try preproject the bound corners:

• const project = new WebMercatorViewport().projectFlat;

const layer = new BitmapLayer({
id: 'BitmapLayer',

• bounds: [-123, 37, -122, 38],

• coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
• bounds: [project([-123, 37]), project([-123, 38]), project([-122, 38]), project([-122, 37])],
  image: 'https://dummyimage.com/3200x3100/000/fff'
  });

@Pessimistress Yes, this does solve the problem!

Can we fix that problem inside Bitmaplayer or is your suggestion to always use COORDINATE_SYSTEM.CARTESIAN?