iOS/iPadOS 16.3 WebGL via Metal Feature issue

[wedoomax]

I can’t load playcanvas projects on my iPhone and iPad. After the project is loaded I just see a black square and everything becomes laggy.

I made some tests with public projects with different level of complexity

A) Dab Motors Configurator (https://dabmotors.com/configurator/)
B) Basecamp Airstream Configurator (Airstream Basecamp 3D Experience - Airstream)
C) Anim State Graph Blending (can’t post another link, but it’s in the tutorial section)

I tested the projects with these devices and browsers

• iPhone XR iOS 16.3.1 - Safari - A: black square, B: black square, C: black square
• iPad Air 3 iPadOS 16.3.1 - Safari - A: black square, B: black square, C: ok
• iPhone 12 iOS 16.0 - Safari - A: ok, B: ok, C: ok

I found that the issue could be the Safari experimental feature “WebGL via Metal” (Settings App → Safari → detail → Experimental Features → “WebGL via Metal”)

Disabling “WebGL via Metal” feature the test results are

• iPhone XR iOS 16.3.1 - Safari - A: page crashes, B: ok, C: ok
• iPad Air 3 iPadOS 16.3.1 - Safari - A: page crashes, B: sometimes page crashes, C: ok
• iPhone 12 iOS 16.0 - Safari - A: ok, B: ok, C: ok

I’d like to know if there’s a possible workaround and if it is something that Playcanvas could fix or I have to wait future Apple OS releases.

Thank you.

[yaustar]

@mvaligursky May have some feedback but as it’s an experimental feature from Apple, it’s more likely to be an issue from Apple side while they work through issues.

[wedoomax]

Thank you for the answer, but the problem is that this feature is enabled by default, so PlayCanvas projects don’t run anymore on some Apple devices.

[yaustar]

@wedoomax

but the problem is that this feature is enabled by default

I’ve not heard of any reports of issues with Apple devices. If it was enabled by default, I would have expected to be flooded with emails and messages.

I’m looking this up now to see what’s up and I will also check with browser stack

[yaustar]

Hmm, seems like it’s enabled by default as you said for WebGL 2.0 support

[yaustar]

16.0 seems fine on browser stack, I see if I can find one that has 16.3.1

[yaustar]

16.3 seems fine too

[mvaligursky]

I wonder if some of these have issues as well?
https://playcanvas.github.io/

Often they only use smaller subset of features, so we could easier isolate the problem areas.

[wedoomax]

I tested almost all the examples on iPhone XR (iOS 16.3.1) and iPad Air 3 (iPadOS 16.3.1) with the “WebGL via Metal” feature enabled and they all works fine.
But I keep on seeing a black square with the projects on the tutorial page (Tutorials | Learn PlayCanvas).
What’s the difference between the two?

[yaustar]

Can you post a screenshot of the ‘black square’ just so that we are sure what we are looking for.

Also, are there any error logs in the devtools console?

The tutorials are iframe embeds if that makes a difference and published on a range of older engines.

[wedoomax]

This is how the projects appear in the tutorial page on iPhone XR (iOS 16.3.1) with the “WebGL via Metal” feature enabled.
After the loading screen it just appears a black square.
Unfortunately I haven’t a MacOS device so I can’t see the debug console.

[yaustar]

I can’t reproduce the issue on my XR 16.3.1 device

Try this published build that has vConsole (see bottom right green button) so you can see logs on device: test 16.3.1 vConsole - PLAYCANVAS

[leooooooo]

The iPad Air3 system is based on iPad OS 16.3.1. When WebGL via Metal is enabled, the link to you appears on a black screen, and the vconsole cannot be clicked

[yaustar]

This is really odd as well can’t reproduce the issue here locally on our devices.

Do you get any errors in the devtools console? If so, what are they?

Can you try the iframeless link of the same build please? https://playcanv.as/e/p/S2r8lFwv/

Can you try closing all other tabs and closing all background apps on the device?

[leooooooo]

I can’t click on vconsole or see devtools on my iPad, but it’s okay to display it on my PC.
I close all other tabs and close all background apps,then I try the iframeless link.It will still be a black screen.

There is another situation:when I test on other projects, there is a chance of a black screen appearing when I refresh multiple times.

[yaustar]

As we can’t reproduce it, we can’t really investigate. Ideally having the console logs on Safari remote devtools would help us a lot

[leooooooo]

Unfortunately, I don’t have a Windows PC debugging tool for the iPad

[yaustar]

I’ve check with some other users on Discord and they can’t reproduce your issue either.

Unless we get some logs, I can’t even think on what could be causing the issue that would also stop you from pressing the vConsole tab. It’s like it’s locked up the page.

[yaustar]

Try this version (new build) https://playcanv.as/p/S2r8lFwv/ where I set the vConsole to show after 250, 500 and 1000 ms from start.

[leooooooo]

When I first opened it, it would display normally, but after multiple refreshes, it would appear as a black screen, and VConsole would not be able to click either.