Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Bitmaplayer flickering on zoom #9328

Open
7 tasks
Fabioni opened this issue Jan 4, 2025 · 3 comments
Open
7 tasks

[Bug] Bitmaplayer flickering on zoom #9328

Fabioni opened this issue Jan 4, 2025 · 3 comments
Labels

Comments

@Fabioni
Copy link
Contributor

Fabioni commented Jan 4, 2025

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

Logs

No response

@Fabioni Fabioni added the bug label Jan 4, 2025
@Fabioni
Copy link
Contributor Author

Fabioni commented Jan 4, 2025

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
Copy link
Collaborator

ibgreen commented Jan 5, 2025

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

You want to avoid interpolation for some reason?

@Fabioni
Copy link
Contributor Author

Fabioni commented Jan 5, 2025

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

@Fabioni Fabioni changed the title Bitmaplayer flickering on zoom [Bug] Bitmaplayer flickering on zoom Jan 6, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants