'Three.js Rendering Issue on iOS Mobile Devices

I've had an issue with a three.js application I'm developing. I can't really describe the issue but this photo does a good job of displaying it. I've tested this on iPhone 6s in both safari and chrome with the same result. On android devices of similar specs I have not had an issue. Is this something I can fix? Or is it just due to the performance requirements of the project.



Solution 1:[1]

From this Github discussion, your best option is to see if you are using FloatType and change that to HalfFloatType. If this doesn't answer your question, update it with examples of where you think it has gone wrong.

Solution 2:[2]

I know it's an old thread, but in case someone else has a similar problem (like I've had), try adding this snippet at the top of the shader file:

#ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
#else
    precision mediump float;
#endif

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Brendon Shaw
Solution 2 badde-media