OpenGL ES 2.0 Specular light generates black border

Question

I've been working on light mechanics for an app and got the diffuse light (ambient and directional) working just fine, but the specular light creates some weird effects. As if it nullifies the diffuse light in a strip around it.

Here is the specular light calculation.

vec3 directionToEye = normalize(u_eyePos - position);
vec3 reflectDirection = normalize(reflect(direction, normal));

float specularFactor = dot(directionToEye, reflectDirection);
specularFactor = pow(specularFactor, u_specularExponent);

if(specularFactor > 0.0){
    specularColor = vec4(base.color, 1.0) * u_specularIntensity * specularFactor;
}

And then the overall light calculation function returns this.

return diffuseColor + specularColor;

And in the main() function I just multiply them all together.

gl_FragColor = baseColor * textureColor * returnedValueOfTheLightCalcFunction;

They are all vec4 values.

Here's are the screenshots WITHOUT(1.) and WITH(2.) the specular light on:

EDIT: The problem has been fixed by putting the pow function inside the if statement. I essentially forgot I have to be checking whether the dot product is > 0, not the pow function. Here is the updated code.

diffuseColor = vec4(base.color, 1.0) * base.intensity * diffuseFactor;

vec3 directionToEye = normalize(u_eyePos - position);
vec3 reflectDirection = normalize(reflect(direction, normal));

float specularFactor = dot(directionToEye, reflectDirection);

if(specularFactor > 0.0){
    specularColor = vec4(base.color, 1.0) * u_specularIntensity * pow(specularFactor, u_specularExponent);
}

Answer 1

Two things:

1. Are you initializing specularColor to zero anywhere? If you are, you haven't posted it.
2. The first input to the pow function MUST be >= 0, otherwise you will get undefined behaviour. (see https://www.khronos.org/files/opengles_shading_language.pdf section 8.2)