search

astrosat / windgl

A WebGL wind particle simulation as a Mapbox custom layer
https://astrosat.github.io/windgl/
ISC License
170 stars 45 forks source link

Buggy on iPhone #12

Open gampleman opened 5 years ago

gampleman commented 5 years ago

Testing on an iPhone 6 leads to some weird results.

maeneak commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

Cool stuff. Are you interested in upstreaming those patches?

maeneak commented 5 years ago

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