[Bug] changing `colorRange` prop of HeatmapLayer to a different size array causes it to try to use deleted texture
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- computer-graphics, data-visualization, frontend
Research direction
Start by reproducing the issue in the linked CodePen with HeatmapLayer and a colorRange whose array length changes. Trace the colorTexture lifecycle and the update path that runs after the old texture is deleted. Done means the heatmap renders with the new color range and Chrome reports no deleted-texture WebGL errors.
Written by the indexing model from the issue text.
Description
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
- Script tag
- 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: deck.gl@9.0.33
- Browser: Chrome
- OS: MacOS
Logs
WebGL: INVALID_OPERATION: bindTexture: attempt to use a deleted object
- Dominant language
- TypeScript
- Stars
- 14.6k
- Forks
- 2.3k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 42
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from visgl/deck.gl
-
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 90/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
Difficulty 1/5 Under an hour Newbie friendliness 86/100
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·