Include a bumpMap/specularMap in custom shader

Hi Guys,
I’ve just started working with three.js, and I wanted to create a realistic earth model. I’ve started defining the planet as a MeshPhongMaterial with a bumpMap and a specularMap and I was quite happy with the result…

Then I wanted to improve it by adding the nights lights to the “dark” part of the earth, opposite from the light of the sun.

I followed this approach and it works, but since there’s a custom shader to handle the light/dark texture, the planet is defined with a ShaderMaterial and thus I cannot add a bumpMap and a SpecularMap in the material’s definition.

I tried to play around with the shaders, trying to add the ShaderChunks that I needed, but the model seems to ignore what I have added. Is there a way for me to add a bumpMap and/or a specularMap to the custom shaders that I have?

Currently, the vertex shader is:

varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vSunDir;

uniform vec3 sunDirection;

void main() {
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    vNormal = normalMatrix * normal;
    vSunDir = mat3(viewMatrix) * sunDirection;
    gl_Position = projectionMatrix * mvPosition;
}

and the fragment shader is:

uniform sampler2D dayTexture;
uniform sampler2D nightTexture;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vSunDir;

void main(void) {
    vec3 dayColor = texture2D(dayTexture, vUv).rgb;
    vec3 nightColor = texture2D(nightTexture, vUv).rgb;
    float cosineAngleSunToNormal = dot(normalize(vNormal), normalize(vSunDir));
    cosineAngleSunToNormal = clamp(cosineAngleSunToNormal * 3.0, -1.0, 1.0);
    float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;
    vec3 color = mix(nightColor, dayColor, mixAmount);
    gl_FragColor = vec4(color, 1.0);
}

uniforms are vSunDir which contains the coords of the subsolar point, then we have dayTexture and nightTexture

Heres a JSFiddle with a basic version: https://jsfiddle.net/Nightfly/9cLvusmt/

Can you please help?
Thanks a lot

/cc

1 Like

Yes @Mugen87 , that was me asking in StackOverflow too.

Meanwhile, I have tried declaring the earth as MeshPhongMaterial (with bump and specular maps) and then using .onBeforeComplete on it, still with no luck.

  earthMaterial.onBeforeComplete = function(shader){
      shader.uniforms.sunDirection = {value: new THREE.Vector3(2,0,0)};
      shader.uniforms.dayTexture =  {value: textureLoader.load(...)};
      shader.uniforms.nightTexture =  {value: textureLoader.load(...)};
      shader.vertexShader = customVertexShader;
      shader.fragmentShader = customFragmentShader;
  }