Bug 232357 - Huge textures are not rendered correctly
Summary: Huge textures are not rendered correctly
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad Other
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on: 231471 232371
Blocks:
  Show dependency treegraph
 
Reported: 2021-10-26 18:54 PDT by Takahiro Aoyagi
Modified: 2022-06-09 11:28 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Takahiro Aoyagi 2021-10-26 18:54:35 PDT
From: https://github.com/mozilla/hubs/issues/4771

A glb (glTF binary version) is rendered black on my iPhoneX iOS 15.1 Safari/Chrome.
I found that the glb file contains three 4096x4096 textures (and other smaller textures).
I speculate those huge textured are not rendered correctly.

I made a simple test which loads and renders the glb file with Three.js,
and which can reproduce the problem.

https://takahirox.github.io/ios-render-test/room.html

The problem seems to be reproducible other iOS devices.
And a person who uses iOS 14.7.1 couldn't reproduce the problem.
So I speculate the issue may be an iOS regression issue.

My environment.
Device: iPhoneX
OS: iOS 15.1
Browser: Safari, Chrome
Comment 1 Vincent Fretin 2021-10-27 00:56:19 PDT
I confirm I see a black texture in your example with iPad 2018 6th gen iPadOS 15.0.2 on Chrome or Safari.
Comment 2 Kimmo Kinnunen 2021-10-27 02:51:45 PDT
Thank you for the report.
This has likely the same root cause as bug 231471.

Most likely this has to do with ImageBitmaps being resident in the Web process and GPUP or Web process running out of memory. 
Symptoms are typically:
 - black texture 
 - GPUP crash via Jetsam.
 - GPUP crash via resource limit hit during memmove inside CG, probably when overcommitted allocation requests pages and fails

This can be reproed on macOS by loading the test case first thing after starting the browser.

This is alleviated by the bug 187964 which makes unrooted ImageBitmaps collected.
However, the browser should handle running out of memory more gracefully.
Comment 3 Radar WebKit Bug Importer 2021-11-02 18:55:17 PDT
<rdar://problem/84957196>
Comment 4 florent.masson 2022-01-28 02:01:45 PST
I can confirm this bug on iPad Air 2 MNV22NF/A with ios 15.3

As listed in this report, disabling ImageBitmap in safari experimental settings makes it work correctly:
https://bugs.webkit.org/show_bug.cgi?id=229825
Comment 5 florent.masson 2022-02-12 03:17:25 PST
Hi,
the issue is still present in 15.3.1
Comment 6 Takahiro Aoyagi 2022-05-31 14:35:17 PDT
Black texture rendering problem seems to have been resolved. No longer it can be reproducible on my iPhoneX iOS 15.5 Safari.

But if too huge textures like 8192x8192 textures or too many textures are used in a page, the page can be unexpectedly refreshed or even fails to open the page. This problem doesn't happen on other platforms. Probably it is an iOS or Safari specific issue.
Comment 7 Takahiro Aoyagi 2022-06-09 11:28:36 PDT
This black texture problem seems to have been resolved. So let me close this issue. Thanks, all.

But huge (or many) textures seem to crash iOS Safari. I filed another issue for it. https://bugs.webkit.org/show_bug.cgi?id=241478