mapbox / mapbox/mapbox-gl-js

Make "devicePixelRatio" user-configurable

Open
#1,953 15 comments 14 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature :green_apple: good first issue performance :zap:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Hey,

Summary:

On (mobile) devices with very high ppi, render at a lower resolution than the device's native ppi and upscale it.

Long story:

Mapbox-gl-js fares very well on iOS devices performance wise (with #1606).

The story is a bit different on Android devices.

The most interesting findings we've had so far is that a Samsung Galaxy S3 (Released March 2013) is roughly 10% slower FPS wise than a Samsung Galaxy S6 (Released Q2 2015) under similar circumstances.

The GL draw calls take roughly equal time on the S3 and S6, despite a much faster CPU and GPU on the S6. The reason for the S6's lack of performance over the S3 seems to be the newer device's PPI. The S6 has a PPI of 577 vs 306 for the S3, and as a ref, 326 for iPhone 6.

This pattern repeats itself for almost all new Android devices, [and the race is still going to 800 ppi and beyond](http://www.sonymobile.com/global-en/products/phones/xperia-z5-premium/). Android screen resolution is often 'unnecessary' high, which in turn leads to poor web-gl performance.

It is possible to downscale the rendering of mapbox-gl-js in html/css without touching the internal js code, but it also requires highjacking the touch / mouse handlers and scale down symbols and text in the style to make it work properly. We're following this approach, and do downscaling to an effective 326 ppi on any device with a higher native ppi. In the case of the S6, we're seeing an effective 3.5x increase in performance without any notices from users.

This workaround is probably outside the scope of your average mapbox-gl-js user. For gl-js not to be a performance hog on mobile (android) devices by default, device PPI should probably be handled.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue does not name files, tests, or an entry point. Start by locating how mapbox-gl-js currently derives devicePixelRatio and reviewing the mobile rendering path. Define the configuration surface and verify that lower-resolution rendering preserves touch, mouse, symbol, and text behavior while improving performance on high-PPI Android devices.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, mobile-dev, performance
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.