Include a bumpMap/specularMap in custom shader

Questions
,
1

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

2

/cc

1 Like
3

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;
  }
4

The link appears to be missing, was this issue ever solved? because I’m also trying to add a bump map to a shader material with no luck, I’ve posted a question here
Adding a bumpMap to a shadermaterial - Questions - three.js forum (threejs.org) any response would be appreciated.

edit: here’s how I’ve tried to implement the bumpMap to the shadermaterial:

fragmentShader: `
              uniform sampler2D globeTexture;
              uniform sampler2D bumpMap;
              uniform sampler2D bumpScale;
              uniform sampler2D specularMap;
              uniform sampler2D specular;
              uniform sampler2D shininess; 
              varying vec2 vertexUV;
              varying vec3 vertexNormal;
               void main() {
               float intensity = 1.05 - dot(
               vertexNormal, vec3(0, 0, 1.0));
               vec3 atmosphere = (vec3(0.3, 0.6, 1.0))
               * pow(intensity, 1.5);
                  gl_FragColor = vec4(atmosphere +texture2D(globeTexture, vertexUV).xyz, 1.0),
                   vec4(atmosphere +texture2D(bumpMap, vertexUV).xyz, 2.0);                                  
               }
              `,

 uniforms: {


	  
		/*"color": { value: new THREE.Color( 0xffffff ) },
		"diffuse": { value: new THREE.Color( 0xffffff ) },*/
		"specular": { value: new THREE.Color("grey")},
		/*"emissive": { value: new THREE.Color( 0x000000 ) },
		"opacity": { value: 1 },*/
		"shininess": { value: 15 },
                "bumpMap": {
                  value: new THREE.TextureLoader().load("//unpkg.com/three-globe/example/img/earth-topology.png")
                  },
                  
                  "bumpScale": {
                value: 10
                },
                  
              
                "specularMap": {
                  value: new THREE.TextureLoader().load(
  "//unpkg.com/three-globe/example/img/earth-water.png")
  
                  },
                "globeTexture": {
                  value: myTexture[parameters.Theme]
                  }
                  /*bump: {
                    value: new THREE.TextureLoader().load("//unpkg.com/three-globe/example/img/earth-topology.png")
                    }*/
                },
        });

heres a editable link to my code: Glitch :･ﾟ✧