WebGL not working on mobile
mtwoodard opened this issue · 11 comments
WebGL is not being initialized in the current version of the program for mobile devices.
I've noticed that prior to the March 30th commit the page would boot into WebGL quickly, I wonder if it may be a timeout error.
I've added debug pages for all March 29th commits to my website. These can be tested at michaelwoodard.net/{insert folder name}. The folder names are in https://github.com/mtwoodard/mtwoodard.github.io
I fixed VREffect in the debugMar30 folder so its now getting the eye translations properly but still had no impact as to how fast the program booted up or if and when it failed. So looking at the other changes there was an additional scene, edge tubes, added to the shader. Could this be making the shader too large or is it another error within the scene?
I commented out the edge tubes scene and noticed a dramatic speed increase to starting webgl. Also any crashes I previously had are now non-existent. I still think that our problem lies in how large the fragment shader has become. I'll try condensing it in the master repository next to see its effects.
I commented out a couple of cases in the hyperbolic scene shader file and now it seems that webgl is able to initialize on mobile. A possible workaround is to load the cases as their own file then re-concatenate the shader file if we need to switch.
I've read that conditionals can be bad for shader performance, and we have a lot of them. For that reason and the problems you're encountering, I bet your workaround may simply be a better approach in the long run (i.e. refactor the shaders so that a separate shader file is generated/compiled for each scene, and possibly a separate shader for other inputs as well, like the geometry of the scene).
I attempted a solution at this but found that three, or possibly webgl, does not handle redefining the fragment shader of a material. I tried removing the object in the scene and then adding it back with the changed shader material to no avail. I'll need to look further into this to see if anything like this has been attempted before.
I think I found what I need; there is a needsUpdate flag that can be set on the material that way the attributes update as they weren't updating before.
The scenes are now loaded on an as-needed basis!
Could it be a good idea to have a mobile version of the project? Essentially another different site that cuts back on some of the more ambitious features in favor of a single hyperbolic scene. I think we've reached a limit on what is possible for mobile devices, however a slightly watered down experience could still be useful.
This turned out to be a mat4 that was not being initialized. While desktop environments didn't care, mobile ones, particularly iOS, did.