Issues with 3D Scenes in Safari on iOS

Tagged: HTML elements resizeing issues

This topic has 8 replies, 3 voices, and was last updated 2 years, 3 months ago by anghel2001.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
2018-03-23 at 9:33 pm #3068

jem
Customer

Hi,
I have seen several issues when trying to view 3D scenes on an iOS device. I would like to know if anyone else has seen experienced these issues and if there are any fixes or workarounds.

1. Some node based materials disappear. When I apply specific materials from the Verge3D library to a mesh, Safari omits the mesh. The object becomes invisible. Here is a link to a simple scene that should demonstrate this. Suzanne is hovering above a plane. The scene is lit with spot lamps from above. Suzanne should be casting shadows on to the plane below. The plane has the mahogany material from the library applied. This scene renders properly on every platform I have tried on a PC (Edge, Chrome, Firefox). This scene renders on Chrome OS on a six-year-old ARM-based machine. This scene renders correctly on Ubuntu (Chromium). This scene will not render properly on Safari on iOS (iOS v11.2.6, iPad 2017 wifi). On iOS, the shadow plane disappears.
https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:027349a7ae/applications/ios_render_test/ios_render_test.html

2. Lamps can crash the whole scene on iOS. If I have more than one lamp in a scene, the scene may not initialize on iOS. This seems to depend on other factors in the scene such as environmental lighting and materials. X-Code will show messages such as “Trying to use 8 texture units while this GPU supports only 8”

I am not claiming these are bugs in Verge3D. IMHO, iOS seems to have a very bad implementation of WebGL.

Are there are best practices or workarounds for these issues if we want our scenes to be used on iOS?

Many thanks,
Jem

Jeremy Wernick

2018-03-24 at 9:44 am #3070

Yuri Kovelenov
Staff

Hi Jem,

Both issues you described are related to steep texture limits of iOS: this platform can handle up to 8 textures per shader (the parameter is called MAX_TEXTURE_IMAGE_UNITS). The mahogany material uses 7 textures (of which 3 are immediately visible in the material editor and 4 are hidden under mahogany_wood_material node group), while 2 shadow-casting lamps add extra 2 shadow maps to a total of 9. As a consequence, this shader fails to compile and the object is not rendered.
Possible workarounds can be using simpler materials and/or less shadow casters. The above-mentioned mahogany material, for example, can be simplified at the expense of some realism by removing some auxiliary texture nodes.

Chief 3D Verger | LinkedIn | Twitter

2018-03-24 at 8:12 pm #3082

jem
Customer

Hello Yuri,
Thank you for the response and explanation. I have now looked at the WebGL reports for the various platforms and I can see what you are describing. iOS and Safari really do have the weakest WebGL 1.0 implementation of any platform that I must support. So, if I want my scenes to render properly on iOS, I will need to keep the scenes simple. I will need to minimize shadow casters and use simpler materials than I would on other platforms.

I have two more questions:
1. Is there a way of examining a scene and observe or predict how many texture units will be required? For example is there something similar to Chrome’s developer tools that would report on WebGL resources in real time? This information may be helpful to developers building scenes. If such a tool is not available, is it best to manually review the scene in Blender using the procedure that you explained?

2. Let us assume that my goal is to show the best possible quality scene on all supported platforms (rather than show an iOS quality scene to all users) and I produce two versions of my gltf/bin files. One version for iOS and another version for everything else. What is your opinion of adding some custom user agent logic to the application to load the appropriate version? I am not asking for Soft8soft to do this. This code is easy enough to write myself, but I value your opinion and you may have a better strategy.

Thanks,
Jem

Jeremy Wernick

2018-03-25 at 3:38 am #3083
jem
Customer
It seems that my main problems with supporting iOS are lamps that cast shadows (as Yuri did point out). I would rather lose the shadows than lose the amazing looking materials. If I disable dynamic shadows, my tests work on iOS.

To test this idea, I exported the GLTF with and without shadow casting and modified the application logic to load the appropriate GLTF. Here is my code:
```
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
    var URL = '__URL__ios_render_test_ios.gltf';
} else {
        var URL = '__URL__ios_render_test.gltf';
}
```
I did not need two different bin files because the meshes are the same. Here is a link to the new version of the scene on the CDN.
https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:027349a7ae/applications/ios_render_test_mk2/ios_render_test.html

A solution like this is acceptable. I think that it would be better if I would probe the WebGL MAX_TEXTURE_IMAGE_UNITS support rather than inferring it from the agent string, but it will do for now.
Thank you,
Jem

Jeremy Wernick
2018-03-26 at 9:59 am #3097
Yuri Kovelenov
Staff
Hello Jem,

jem wrote:

Is there a way of examining a scene and observe or predict how many texture units will be required? For example is there something similar to Chrome’s developer tools that would report on WebGL resources in real time?

Currently we don’t offer any tools to inspect WebGL resources in real time, so the most robust way to ensure iOS compatibility is to test your scenes using an actual device. In B4W we had the so called minimum compatibility mode in the scene viewer which basically painted all unsupported render batches with pink color. I guess in the future we can implement something like this for Verge3D.

jem wrote:

One version for iOS and another version for everything else. What is your opinion of adding some custom user agent logic to the application to load the appropriate version?

The solution you proposed should work well. The alternative variant you suggested may look as follows:
```
var gl = app.renderer.getContext();
var textureLimit = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
```
Chief 3D Verger | LinkedIn | Twitter
2018-03-29 at 2:27 am #3249

jem
Customer

Hello Yuri,
I did implement your gl.MAX_TEXTURE_IMAGE_UNITS code in my projects and it works very well. I removed my user agent testing code. I did have to re-order some of the tasks in the standard app initialization function to make it work, but it was not difficult. I had to create the player object before I set the GLTF/BIN urls, because I need information from the context to determine which GLTF url to select.

Now the scene looks amazing on an iPad and all other platforms.
Thanks again,
Jem

Jeremy Wernick

2018-03-29 at 9:06 am #3260

Yuri Kovelenov
Staff

You’re welcome, glad it worked for you so nicely.

Chief 3D Verger | LinkedIn | Twitter

2022-09-06 at 10:23 am #55603

anghel2001
Customer

Hi
I’m having the same issue, but I don’t have any texture.
In my case, the objects with light materials disappear.

Can you tell me where to use this code? In what file?

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS) {
var URL = ‘__URL__ios_render_test_ios.gltf’;
} else {
var URL = ‘__URL__ios_render_test.gltf’;
}

Thanks you!

2022-09-06 at 11:20 am #55605

anghel2001
Customer

Hi!
When opening the link on a Safari browser (desktop Mac), the HTML elements (header) don’t stretch all the way, for an edge-to-edge case.
Opening on Chrome, on the same laptop, works well.

I attached the 2 cases, for Safari and Chrome.

Is there known issue and a fix for this?

Thanks!

Attachments:
You must be logged in to view attached files.
Author

Posts