Buggy on iPhone

[gampleman]

Testing on an iPhone 6 leads to some weird results.

• Particle motion is choppy - this is probably a float precision issue.
• Arrows sometime disappear...

[maeneak]

Im only testing the particle layer but adding either of the snippets below solved a lot of problems with particles flickering and sparkling on iOS. Feels more like the desktop experience when using Safari iOS, Chrome Mobile and Edge Mobile. I found some good info on Backbuffer alpha here . Someone with some more in depth understanding of OpenGL/WebGL may be able to improve on this but it has helped immensly.

   draw(.....) {
        gl.enable(gl.BLEND);
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE);

or

   initialise(.....) {
        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);     

I was also having problems with Chrome Android displaying a thatched texture which is distorting other vector layers bunching particles together but this seems to have cured that too. I am still seeing unusual behaviour of particles around tile boundaries on mobile devices. Is it possible this is a screen resolution tile scaling issue and tiles are not aligned? Im unsure how to test this but happy to contribute. I seem to be able to replicate this on all mobile platforms.

[maeneak]

Ok so as @gampleman has indicated this is a floating-point issue as mentioned here, due to differences in texture floating-point calculations being conducted on the GPU on mobile devices. The current accepted solutions are:

1. Alter the PNG texture encoding to encode whole floating point values in the entire 32bit RGBA color, and use multiple textures (one for each raster band)
2. Hand off floating point calculations to the CPU.
3. Use rounding and switch color channels to fix precision issues

Either solution comes with trade offs. Solution 3 seems like the most promising.

[maeneak]

Ok I think i may have patched the floating point bug using the GLSL code from the issue at https://github.com/mapbox/webgl-wind/issues/12. I've added the changes in my fork https://github.com/maeneak/windgl/commit/db48aa84e108e247bf6e97c1387999e392a870aa#diff-c67dafd60362fef8b44d68ccd3439f63 I've tested this on android/ios chrome, safari on iphone and edge android and it seems to be fixed.

I think i may have also fixed the particle flickering on iOS. Simply flushing the gl context using gl.flush(); at the end of the render/update call seemed to do the trick https://github.com/maeneak/windgl/commit/bb72700757d4ba43ef10d1c4720008f3d146ee5c#diff-54e415ac70bc31d40ac5db61edd8bd2e.

[gampleman]

Cool stuff. Are you interested in upstreaming those patches?

[maeneak]

Happy to help where i can. Im not familiar with the process if you can pm me the details ill give it crack.