Terrain drape texture size doesn't take device pixel ratio into account
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
Drape texture is used to render proxy tile in in whole integer zoom range, e.g. [14.00..15.0) for the example below.
Current calculation makes sense only for display with browser.devicePixelRation of 1.
https://github.com/mapbox/mapbox-gl-js/blob/2bf06afbd94b290dabaf1af80f50660cfc68ee39/src/terrain/terrain.js#L368-L370
This needs to be increased on displays with high DPI. The issue is accentuated towards the end of range, e.g. 14.98:
e.g.
http://localhost:9966/debug/terrain-debug.html#14.98/37.753/-122.435
**current 1024** vs **2048** vs **3072** in iPhoneX (browser.devicePixelRatio is **3**).

1024 = `const extent = this.proxySourceCache.getSource().tileSize * 2;`
2048 = `const extent = this.proxySourceCache.getSource().tileSize * 2 * 2;`
1024 = `const extent = this.proxySourceCache.getSource().tileSize * 2 * 3; // browser.devicePixelRatio`
A short performance check shows drop in FPS count on tilted view (30 vs 23 vs 13). Render cache there is disabled - forcing that drape textures are re-rendered every frame. It is also noticeable that the visual difference is not that noticeable (due to bearing):
http://localhost:9966/debug/terrain-debug.html#17.98/37.755668/-122.447788/73.4/70
**current 1024** vs **2048** vs **3072** in iPhoneX (browser.devicePixelRatio is **3**).

Using 2 (2048) looks like an acceptable compromise.
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 at src/terrain/terrain.js lines 368-370 and inspect how the drape texture extent is calculated for fractional zoom ranges. Use debug/terrain-debug.html with the issue's example views to compare texture resolution across device pixel ratios. Done means high-DPI displays use an acceptable extent without an unnecessary performance cost.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- computer-graphics, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100