# Include a bumpMap/specularMap in custom shader

**URL:** <https://discourse.threejs.org/t/include-a-bumpmap-specularmap-in-custom-shader/24351>\
**Category:** Questions\
**Tags:** materials, shaders\
**Created:** [March 13, 2021, 8:37am UTC](https://discourse.threejs.org/t/include-a-bumpmap-specularmap-in-custom-shader/24351 "2021-03-13T08:37:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nightfly](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@nightfly](https://discourse.threejs.org/u/nightfly)\
**Post date:** [March 13, 2021, 8:37am UTC](https://discourse.threejs.org/t/include-a-bumpmap-specularmap-in-custom-shader/24351/1 "2021-03-13T08:37:18Z")

</div>

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](https://stackoverflow.com/questions/56977686/creating-a-day-night-shader-that-follows-a-light-souce) 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 `ShaderChunk`s 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:

```javascript
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:

```javascript
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/](https://jsfiddle.net/Nightfly/9cLvusmt/)

Can you please help?  
Thanks a lot

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 13, 2021, 10:44am UTC](https://discourse.threejs.org/t/include-a-bumpmap-specularmap-in-custom-shader/24351/2 "2021-03-13T10:44:06Z")

</div>

/cc

> <https://stackoverflow.com/questions/66611400/include-a-bumpmap-specularmap-in-custom-shader>

---

<div class="post-metadata">

**Author:** ![nightfly](https://avatars.discourse-cdn.com/v4/letter/n/e79b87/32.png) [@nightfly](https://discourse.threejs.org/u/nightfly)\
**Post date:** [March 14, 2021, 8:25am UTC](https://discourse.threejs.org/t/include-a-bumpmap-specularmap-in-custom-shader/24351/3 "2021-03-14T08:25:29Z")

</div>

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.

```javascript
  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;
  }

```

---

<div class="post-metadata">

**Author:** ![Shange](https://avatars.discourse-cdn.com/v4/letter/s/46a35a/32.png) [@Shange](https://discourse.threejs.org/u/Shange)\
**Post date:** [December 17, 2022, 12:18pm UTC](https://discourse.threejs.org/t/include-a-bumpmap-specularmap-in-custom-shader/24351/4 "2022-12-17T12:18:33Z")

</div>

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)](https://discourse.threejs.org/t/adding-a-bumpmap-to-a-shadermaterial/45774) 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 :･ﾟ✧](https://glitch.com/edit/#!/html-markers-globe-bumpmap-with-shadermaterial)