Same GLSL code different result webGL and Opengl ES

Hi folks, I am here because I have a problem is driving me nuts.
I developed a webgl viewport which is basically a ripoff/conversion of one I made in c++. Everything works fine on pc, both chrome and firefox, when I move to chrome mobile I get a weird shading artifact.
Let me show you.
First of all here is the viewport:
and here the code:

So the shader is a uber simple ADS model, that I used for ages on the c++ viewport and all good.
Here a screen of the desktop version:
Here the same code run on mobile (nexus 5 and one +)

As you can see the specular is all over the place. So my test and experimentation led me to first trying to remove the specular all togheter and here is the result

On the left the mobile and right the pc ( I am using remote debugging on my nexus5.
As you can see already the diffuse + ambient results in a much brighter image on the mobile version.
Next step was to try to move the camera on mobile so I implemented the needed gestures and a funny thing showed up, moving the camera closer to the target on mobile made the artifact disappear, now this is super odd since all the computation is done on normalized vectors so the camera distance should not influence the specular amount (and it works fine on the pc of course).
Here is a video:

I am running out of idea since the shader is uberly simple:

precision mediump float;
uniform vec4 color;
uniform vec3 K;
uniform vec3 lightPosition;
uniform float shiness;
varying vec3 Normal;
varying vec3 Position;
vec3 ads()
    vec3 n = normalize(Normal);
    vec3 s = normalize(lightPosition - Position);
    vec3 v = normalize(-Position);
    vec3 r = reflect(-s,n);
    vec3 lightIntenisty = vec3(0.6);
    vec3 Ka = vec3 (0.2); // ambient reflection coefficient
    vec3 Kd = vec3 (0.7); //diffuse  reflection coefficient
    vec3 Ks = vec3 (0.7); //specular reflection coefficient
    return lightIntenisty * (Ka + Kd *max(dot(s,n),0.0) + Ks * pow(max(dot(r,v),0.0),shiness));
    gl_FragColor =  vec4(ads(),1.0) ;

To move the viewport on pc : left drag -> rotate, middle drag -> pan, right drag ->zoom
on mobile : one finger -> rotate , 3 finger -> pan , 2 fingers rotate -> zoom

Thanks a lot for your time guys, any help much appreciated

I solved the mastery, I had an intuition that some rounding was happening there, so I went investigating what was the resolution for floating point numbers in opengl ES and look like you have 3 resolution.
low 8 bit
mid 10 bit
high 16 bit
So in the edn the fact that my model was several unit big, forced me to have my camera backwards quite a bit, that meant “big” numbers (for an 8-10 bit number at least) on my camera. that left no space at all on the mantissa of the floating point. that led to losing precision and my colors clamping to white, changing the resolution of the floating point to high in the shader fixed the thing. That lead me to think that on the desktop those floating points are way higher, they might be matching the IEEE standards.

For “desktop” OpenGL, floats are IEEE single-precision (32 bits, 23-bit mantissa). OpenGL 4 also supports IEEE double-precision.

Desktop GLSL allows precision qualifiers for compatibility with OpenGL ES, but ignores them; “float” values always use the full precision.

4.5 Precision and Precision Qualifiers

Precision qualifiers are added for code portability with OpenGL ES, not for functionality. They have the same syntax as in OpenGL ES, as described below, but they have no semantic meaning, which includes no effect on the precision used to store or operate on variables.

Bear in mind that OpenGL ES doesn’t require highp to be supported in the fragment shader, only the vertex shader.

This topic was automatically closed 183 days after the last reply. New replies are no longer allowed.