Part of the Khronos Group

The Industry's Foundation for High Performance Graphics

from games to virtual reality, mobile phones to supercomputers

Results 1 to 3 of 3

Thread: same GLSL code different result webGL and Opengl ES

  1. #1
    Junior Member Newbie
    Join Date
    Jun 2014

    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:
    Click image for larger version. 

Name:	pc.jpg 
Views:	298 
Size:	25.0 KB 
ID:	1928
    Here the same code run on mobile (nexus 5 and one +)
    Click image for larger version. 

Name:	mobile.jpg 
Views:	195 
Size:	5.5 KB 
ID:	1929

    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
    Click image for larger version. 

Name:	lamb.jpg 
Views:	224 
Size:	11.3 KB 
ID:	1930

    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:
    Code :
    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

  2. #2
    Junior Member Newbie
    Join Date
    Jun 2014
    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.

  3. #3
    Senior Member OpenGL Guru
    Join Date
    Jun 2013
    Quote Originally Posted by giordi View Post
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts