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

i creating earth in webgl using three.js, , far have earth day , night texture , atmosphere. finish off, want add specular earth shows on water sections. now, have specular map this, can't seem puzzle together.

i'm doing in custom shader because of earth/night/atmosphere-thingy, , read have include specular calculation in equation, since three.js can't stack multiple shaders.

this shader, , i'm stuck @ 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 day , night:         vec3 daycolor       = texture2d( daytexture, vuv ).xyz;         vec3 nightcolor     = texture2d( nighttexture, vuv ).xyz;          // compute cosine sun normal -1 away sun , +1 toward sun.         float cosineanglesuntonormal = dot(normalize(vnormal), sundirection);          // sharpen edge beween transition         cosineanglesuntonormal = clamp( cosineanglesuntonormal * 3.0, -1.0, 1.0);          // convert 0 1 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 color         gl_fragcolor = vec4(color, 1.0);     } </script> 

so far adds specular map texture on earth, mentioned, want use bw image show kind of specular. can point me in right direction?

edit:

allright, achieved whole mapping thing 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 thing remaining how specular spot smaller... thoughts on this?

edit 2:

ok, achieved tweaking parameters:

float c = 0.035; float p = 30.0; float mixamountspecular = pow(c * dot(normalize(vnormal), speculardirection), p) * (specularamount.z * 0.5); 

for reference, sundirection -2, 0.8, 1 , speculardirection -15, 10, 22.5.

my 2 edits sum final shader 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 day , night:         vec3 daycolor       = texture2d( daytexture, vuv ).xyz;         vec3 nightcolor     = texture2d( nighttexture, vuv ).xyz;          // compute cosine sun normal -1 away sun , +1 toward sun.         float cosineanglesuntonormal = dot(normalize(vnormal), sundirection);          // sharpen edge beween transition         cosineanglesuntonormal = clamp( cosineanglesuntonormal * 3.0, -1.0, 1.0);          // convert 0 1 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 these parameters adjust specular:         float c = 0.035;    // size, 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 color         gl_fragcolor = vec4(color, 1.0);     } </script>