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:
http://www.marcogiordanotd.com/webgl/viewport/viewport.html
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:
[ATTACH=CONFIG]1149[/ATTACH]
Here the same code run on mobile (nexus 5 and one +)
[ATTACH=CONFIG]1150[/ATTACH]
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
[ATTACH=CONFIG]1151[/ATTACH]
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:
http://www.marcogiordanotd.com/webgl/viewport/bloom.ogv
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));
}
void
main()
{
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