[Bug] changing `colorRange` prop of HeatmapLayer to a different size array causes it to try to use deleted texture

[xinaesthete]

Description

When changing colorRange prop, it works ok as long as there are the same number of elements in the old and new values. If the number of elements is different (meaning it deletes the old texture and makes a new one), then something goes wrong in setting the internal state of the corresponding colorTexture. This results in it appearing black to the user, and in the console there are WebGL errors.

Stepping through the code etc, I didn't see any obvious problems with the way the buffers were being managed. Not sure if it could be at the luma.gl layer.

I think it worked in the old version, where I guess you resize the texture rather than making a new one.

Flavors

• [x] Script tag
• [X] React
• [ ] Python/Jupyter notebook
• [ ] MapboxOverlay
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] ArcGIS

Expected Behavior

A heatmap with a new color-range.

Steps to Reproduce

Make a HeatmapLayer with some value in colorRange, then later use props with a differently shaped value for the same layer...

https://codepen.io/petertodd/pen/mdNwgWo - press enter to trigger the bug.

~~I just had a look at modifying the HeatmapLayer example codepen but it's not all that convenient for changing props. I have reproduced in a couple of different places (first spotted while using custom TriangleLayer but that is not the cause). I'll try to make a mini React-based test-case shortly.~~

Environment

• Framework version: [email protected]
• Browser: Chrome
• OS: MacOS

Logs

WebGL: INVALID_OPERATION: bindTexture: attempt to use a deleted object

[xinaesthete]

https://codepen.io/petertodd/pen/mdNwgWo

Press "Enter" to trigger the bug. It should change to blue but instead it's black. I don't seem to see the WebGL warnings in either codepen console or devtools there - also I notice that just refers to https://unpkg.com/deck.gl@latest/dist.min.js for deck, so behaviour could change.