Particle Drift on Mobile

[aferriss]

It seems like the particles drift left and upwards on mobile devices (both android and ios). I'm wondering if this is caused by the browser scaling the gl viewport to compensate for high dpi screens? You can see the effect by viewing the demo on any mobile device. I tried on a Samsung Galaxy S6 and iPhone 6S.

Any other ideas as to why this might be happening? Could there be a loss of precision or some kind of rounding error going on?

I checked and both devices have 16 slots for textures in the vertex shader with:

var vertexUnits = gl.getParameter(gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS);

FWIW window.devicePixelRatio is 4 on my Android and 3 on my iPhone.

Thanks!

[aferriss]

After messing with this a bit more, I'm almost 100% certain that this is caused by a lack of precision on mobile, even with highp in all the shaders. I removed the updatePosition and updateVelocity functions from the shaders, so it was just a loop of decoding -> encoding and to my surprise the particles still drift (but only on mobile)! I also tried adding a bias to the encoding thinking that things were getting weird when the value equals 1, but I was never able to narrow in on a value that seemed to stop the drift completely.

Not sure what to do about this. I think if you wanted to continue avoiding float textures you could do the encoding across all four channels instead of just two, but that would require some extra passes.

There is a bit of chatter from almost a decade ago scattered about the web...
http://aras-p.info/blog/2009/07/30/encoding-floats-to-rgba-the-final/
http://aras-p.info/blog/2008/06/20/encoding-floats-to-rgba-again/#comment-16380

[skeeto]

My personal mobile devices don't support texture access in the vertex shader, so I've never tried it outside of a regular laptop/desktop before. But I did borrow access to a device that does (Galaxy S4) and saw this too, except biased left and down. I doubt it's caused by browser scaling since it shouldn't be scaling the background render of the framebuffer with the attached texture. I bet it's a lack of precision in the shader, and rounding is causing a bias. It might be worth experimenting with "highp" precision instead if "mediump."

[skeeto]

Looks like our responses arrived at the same time. It's definitely a precision issue, since setting it to highp fixed it for me: sed -i s/mediump/highp/g glsl/* I'm considering committing this change, but I don't remember why I chose mediump in the first place.

[aferriss]

I think some devices may not support highp, leading to unexpected behavior. Since mediump causes the problem though, I'd say it's a change worth making :)

highp doesn't seem to be fixing things for me, so maybe my problem is actually else where...

[skeeto]

Since ab255f2 doesn't fix yours, I'll reopen this.

[aferriss]

Just a note that highp does fix things on the iPhone, but it's still whacked out on the Galaxy S6.

[Farkal]

Same issue here -> mapbox/webgl-wind#12 with a project inspired by your code.
I am trying to find another way to encode / decode particles (webgl 2 not yet supported on mobile/tablet and same for float textures) if you already find something I am interested.

[aferriss]

Sorry, my solution was just to implement the physics of my particle sim on the cpu. Not ideal, but it works!