We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Issues with 3D Scenes in Safari on iOS

Home Forums Bug Reports and Feature Requests Issues with 3D Scenes in Safari on iOS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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

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

    Jeremy Wernick

    #3070

    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.

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #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

    #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

    • This reply was modified 3 years, 6 months ago by jem.

    Jeremy Wernick

    #3097

    Hello Jem,

    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.

    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);

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #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

    #3260

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

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.