I am playing with the following shader Edit fiddle - JSFiddle - Code Playground which works fine in desktop browsers - at least in Chrome, Firefox and Safary on my macbook, as well as on iPhone, but not on Android - both mobile Firefox and Chrome on Android phones I tried so far suffer from the same issue - colors are showing up significantly darker and it seems like a floating point precision issue.
Before I came across a recommendation to use the following for maximum portability:
#ifdef GL_ES
precision mediump float;
#endif
But clearly it doesn’t work at least for a couple Android browsers I tried - in both Chrome and Firefox on Honor View and Pixel 8.
If I change mediump precision to highp in fragment shader in the example I shared above, the shader starts looking fine in Android browsers.
I’m relatively new to ThreeJS so I’m sorry if it came up before - but my cursory search didn’t find anything relevant - how should I go about setting floading point precision for ThreeJS shaders?
Would it be OK just to always pick highp and ditch conditionals for GL_ES? My only concern with this approach is possibly taking less optimal route on non-Android systems if shaders there could use mediump precision.