How can I create a specular with a specular map on a custom shader in three js?

Question

I am creating an earth in WebGL using Three.JS, and so far I have an earth with day and night texture and an atmosphere. Now to finish it off, I want to add a specular to my earth that only shows on the water sections. Now, I already have a specular map for this, but I can't seem to puzzle it all together.

I'm doing everything in a custom shader because of the earth/night/atmosphere-thingy, and I read that I also have to include the specular calculation in this equation, since Three.JS can't stack multiple shaders.

This is my shader, and I'm only stuck at the specular part:

<script id="earthFragmentShader" type="x-shader/x-fragment">
    uniform sampler2D dayTexture;
    uniform sampler2D nightTexture;
    uniform sampler2D specularTexture;
    uniform vec3 sunDirection;
    varying vec3 vNormal;
    varying vec2 vUv;
    void main() {
        // Textures for day and night:
        vec3 dayColor       = texture2D( dayTexture, vUv ).xyz;
        vec3 nightColor     = texture2D( nightTexture, vUv ).xyz;

        // compute cosine sun to normal so -1 is away from sun and +1 is toward sun.
        float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);

        // sharpen the edge beween the transition
        cosineAngleSunToNormal = clamp( cosineAngleSunToNormal * 3.0, -1.0, 1.0);

        // convert to 0 to 1 for mixing
        float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;

        // Atmosphere:
        float intensity = 1.09 - dot( vNormal, vec3( 0.0,0.0, 1.0 ) );
        vec3 atmosphere = vec3( 1,1,1) * pow( intensity, 2.0 );

        // Select day or night texture based on mixAmount.
        vec3 color = mix( nightColor, dayColor + atmosphere, mixAmount );

        // Specular:
        vec3 specularAmount = texture2D( specularTexture, vUv ).xyz;
        vec3 specularColor  = vec3(1,1,1) * specularAmount;

        color = mix(color, specularColor, mixAmount);

        // Set the color
        gl_FragColor = vec4(color, 1.0);
    }
</script>

So far it just adds the specular map as a texture on the earth, but like I mentioned, I want to use this BW image to show some kind of specular. Can anybody point me in the right direction?

EDIT:

Allright, I achieved the whole mapping thing with the following code:

// Specular:
vec3 specularAmount = texture2D( specularTexture, vUv ).xyz;
vec3 specularColor  = vec3(1,1,1);

float c = 0.35;
float p = 3.0;

float mixAmountSpecular = pow(c * dot(normalize(vNormal), sunDirection), p) * specularAmount.z;

// Select day or night texture based on mixAmount.
vec3 color = mix(dayColor, specularColor, mixAmountSpecular);
color = mix( nightColor, color + atmosphere, mixAmount );

The only thing remaining now is how to get the specular spot smaller... Any thoughts on this?

EDIT 2:

Ok, I finally achieved it by tweaking some parameters:

float c = 0.035;
float p = 30.0;
float mixAmountSpecular = pow(c * dot(normalize(vNormal), specularDirection), p) * (specularAmount.z * 0.5);

For reference, my sunDirection is -2, 0.8, 1 and my specularDirection is -15, 10, 22.5.

Answer 1

My 2 edits sum up the final shader to use:

<script id="earthFragmentShader" type="x-shader/x-fragment">
    uniform sampler2D dayTexture;
    uniform sampler2D nightTexture;
    uniform sampler2D specularTexture;
    uniform vec3 sunDirection;
    uniform vec3 specularDirection;
    varying vec3 vNormal;
    varying vec2 vUv;
    void main() {
        // Textures for day and night:
        vec3 dayColor       = texture2D( dayTexture, vUv ).xyz;
        vec3 nightColor     = texture2D( nightTexture, vUv ).xyz;

        // compute cosine sun to normal so -1 is away from sun and +1 is toward sun.
        float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);

        // sharpen the edge beween the transition
        cosineAngleSunToNormal = clamp( cosineAngleSunToNormal * 3.0, -1.0, 1.0);

        // convert to 0 to 1 for mixing
        float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;

        // Atmosphere:
        float intensity = 1.09 - dot( vNormal, vec3( 0.0,0.0, 1.0 ) );
        vec3 atmosphere = vec3( 1,1,1) * pow( intensity, 2.0 );

        // Specular:
        vec3 specularAmount = texture2D( specularTexture, vUv ).xyz;
        vec3 specularColor  = vec3(1,1,1);

        // Play with these parameters to adjust the specular:
        float c = 0.035;    // Size, I guess...
        float p = 30.0;     // Blur
        float mixAmountSpecular = pow(c * dot(normalize(vNormal), specularDirection), p) * (specularAmount.z * 0.5);

        // Select day or night texture based on mixAmount.
        vec3 color = mix(dayColor, specularColor, mixAmountSpecular);
        color = mix( nightColor, color + atmosphere, mixAmount );

        // Set the color
        gl_FragColor = vec4(color, 1.0);
    }
</script>