.loseContext() / .restoreContext() breaks the map (WEBGL_lose_context)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: 1.9.1 / latest release (or whatever the examples page uses.)
**browsers**:
- Chrome Version 80.0.3987.163 (Official Build) (64-bit)
- Firefox 75
(On Ubuntu 16.04 / i7-6700k GPU)
### Steps to Trigger Behavior / Link to Demonstration
1. Go to the demo page: https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
2. Open developer tools and ensure that the iframe with the map is active.
3. var ext = document.querySelector('#map canvas').getContext('webgl').getExtension('WEBGL_lose_context')
4. ext.loseContext()
5. ext.restoreContext()
### Expected Behavior
Map view goes blank on .loseContext() and comes back on .restoreContext().
### Actual Behavior
Map view goes blank but does not come back.
Instead many WebGL errors appear on the console:
WebGL: INVALID_OPERATION: bindBuffer: object does not belong to this context value.js:403
WebGL: INVALID_OPERATION: bindBuffer: object does not belong to this context value.js:416
WebGL: INVALID_OPERATION: bindTexture: object does not belong to this context line_atlas.js:200
WebGL: INVALID_OPERATION: bindTexture: object does not belong to this context texture.js:92
### Notes
I discovered the problem while experimenting with a custom layer.
Our stuff came right back after handling the appropriate events ("webglcontextlost" and "webglcontextrestored").
Otherwise, similar bindBuffer errors occur.
After some panning and zooming around it looks like the map (line and symbols layers) works everywhere, but in area/zoom that were active when lose/restore happened.
For the example map only the symbol layers seems to work elsewhere?!
I'm not really sure if this is a real problem, or occurs only with the extension.
However I'm not aware of another possibility to trigger context loss for debugging purposes, so it would be nice if this works :)
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.
Research direction
Start by reproducing the loss and restore sequence on the simple-map example, then trace the reported bindBuffer and bindTexture errors in value.js, line_atlas.js, and texture.js. Check the webglcontextlost and webglcontextrestored handling described in the issue, and verify that the map renders correctly across the previously affected areas after restoration.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100