Bug 276959 – powerPreference "high-performance" causes bad performance

• Status: RESOLVED
• Resolution: FIXED
• Component: WebGL

[Krystof T]

## Description
In a three.js scene containing skinned meshes, having `powerPreference` set to `"high-performance"` leads to 20fps. With `powerPreference` set to `"default"`, the performance is significantly better, capping at 120fps.

## Reproduction Steps
1. On iPhone 12, Safari 17.5.1:
2. Open this live build: https://weak-navy-leptoceratops.glitch.me
3. Observe the FPS counter showing 20fps.
4. Remix the Glitch project: https://glitch.com/edit/#!/remix/weak-navy-leptoceratops?path=main.js%3A1%3A0
5. Comment out `main.js@33` -> won't use antialiasing.
6. Click "Preview" (bottom bar) -> 3 dots -> Copy link -> open on iPhone
7. Observe high framerates (120fps) with `powerPreference` set to `"high-performance"` and antialiasing off.
8. Comment out `main.js@30` -> will use `"default"` power preference.

## Expected Result
- Performance for this scene should not be under 40fps on iPhone 12.
- Disabling antialiasing should not result in a 6x performance gain (likely more, frame rate is capped at 120fps).

## Actual Result
- `powerPreference` set to `"high-performance"` is causing worse performance.
- Antialiasing is surprisingly costly while `powerPreference` is set to `"high-performance"`.

## Reproduced In
- Reproduced on iPhone 12 in Safari (17.5.1) and Chrome (126.0.6478.153).

## Works In
- Not reproduced on Android Samsung S9+ in Chrome (126.0.6478.122) (90-110fps).
- Not reproduced on Windows 10 in Chrome (126.0.6478.182) (288fps), i7-10700KF, RTX 3070.

## Additional context:
Stats from Inspector.js on Windows:
- draw calls: 42
- triangle count: 3 095 064

[Krystof T]

Simplified reproduction steps:
1. Open https://weak-navy-leptoceratops.glitch.me/ on iOS Safari 17.5.1 (iPhone 12)
2. Observe the scene running 20fps
3. Open https://weak-navy-leptoceratops.glitch.me/?disableAntialiasing
4. Observe the scene running at 120fps
5. Open https://weak-navy-leptoceratops.glitch.me/?defaultPerformance
6. Observe the scene running at 120fps

[Radar WebKit Bug Importer]

<rdar://problem/132352797>

[Ahmad Saleem]

@Krystof - by any chance, you have tested with older version of iOS? Just to confirm / understand, if it is recent regression or an issue since quite some time.

[Krystof T]

(In reply to Ahmad Saleem from comment #3)
> @Krystof - by any chance, you have tested with older version of iOS? Just to
> confirm / understand, if it is recent regression or an issue since quite
> some time.

Hello Ahmad, sorry for the late reply, sadly i have only access to a device with the latest stable release of iOS - 17.5.1 (21F90)

[Kimmo Kinnunen]

Thank you for the report. I can confirm the slowdown.

It's likely that threejs selects different rendering algorithm based on the power preference.

On desktop macOS Apple Silicon based devices, you can see that the high-performance case uses anisotropic texture filtering extension. The renderer, default options, uses half float extensions while high-performance does not.

Please consult threejs docs and code to see if this is the case. If this is as expected, please report back and we can close this bug.

[Kimmo Kinnunen]

Initially I cannot see any differences in the high-performance vs default webgl call traces on iOS. Will investigate further.

[Krystof T]

(In reply to Kimmo Kinnunen from comment #5)
> Thank you for the report. I can confirm the slowdown.
> 
> It's likely that threejs selects different rendering algorithm based on the
> power preference.
> 
> On desktop macOS Apple Silicon based devices, you can see that the
> high-performance case uses anisotropic texture filtering extension. The
> renderer, default options, uses half float extensions while high-performance
> does not.
> 
> Please consult threejs docs and code to see if this is the case. If this is
> as expected, please report back and we can close this bug.

Thank you for looking into the issue.

Searching the three.js source code doesn't show any implementation that would react or adjust anything base on the powerPreference property.

https://github.com/search?q=repo%3Amrdoob%2Fthree.js%20powerpreference&type=code

[Kimmo Kinnunen]

Pull request: https://github.com/WebKit/WebKit/pull/31715

[EWS]

Committed 281856@main (53f8d8deb1fb): <https://commits.webkit.org/281856@main>

Reviewed commits have been landed. Closing PR #31715 and removing active labels.