Adding a bumpMap to a shadermaterial

Questions
, ,
1

I’ve tried to add a bumpMap to a shader material, I get no errors in the console but the bumpMap doesnt show up on the 3d globe, I also added a specular map and directional lighting but the specular map does not show up either.

Screenshot 2022-12-14 at 07.51.49
Screenshot 2022-12-14 at 07.51.491810×1308 89.1 KB

my code:
const material = new THREE.ShaderMaterial({
vertexShader: varying vec2 vertexUV; varying vec3 vertexNormal; void main() { vertexUV = uv; vertexNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1); } ,
fragmentShader: uniform sampler2D globeTexture; 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); } ,

              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")
                  },
                  
              
                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")
                    }*/
                },
                bumpScale: {
                value: 10
                },
        });
2

For the custom shader, you will have to implement bump map yourself. In your code, you don’t even pass bumpMap to the fragment shader, so it has no effect (and there is no code that uses bump map).

3

like this:?
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(texture2D(bumpMap, vertexUV).xyz, 1.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")
                    }*/
                },
        });
4

It’s not that simple. Bump map (as well as normal map) serves the purpose of perturbing the surface normal that in turn affects the amount of diffused light.

Without implementing light in your shader (and there are different illumination models, like, for example, Lambertian diffusion), you won’t find much use of a bump map.

So it’s a relatively complex task. For example, this is my custom implementation for bump map in fragment shader, just to show you won’t get away with one line of code:

		#if defined BMAP
			vec2 nuvx = vuv + dFdx(vuv);
			vec2 nuvy = vuv + dFdy(vuv);
			vec3 htex = vec3(
				texture2D(bmap, nuvx).g,
				texture2D(bmap, nuvy).g,
				texture2D(bmap, vuv).g
			);
			vec2 hdif = vec2(htex.x - htex.z, htex.y - htex.z);
			if(abs(hdif.x) > 0.002 || abs(hdif.y) > 0.002) {
				vec3 posdx = dFdx(pos);
				vec3 posdy = dFdy(pos);
				vec3 facenorm = normalize(cross(posdx, posdy));
				vec2 hdifsc = bmfact * hdif;
				vec3 slopedx = posdx + facenorm * hdifsc.x;
				vec3 slopedy = posdy + facenorm * hdifsc.y;
				vec3 slope = normalize(cross(slopedx, slopedy));
				vec4 q = quaternFromVects(facenorm, slope); 
				nrm = quaternRotate(nrm, q);
			}
		#endif
5

Sorry I’m really confused, I did add a directional light in my code but didn’t include it in the segment I showed you, is it possible for you to edit my code on Glitch :･ﾟ✧ and show me how to implement the bump map because I don’t fully understand the code that you’ve posted?

6

I don’t see anything at the link you provided, do you have a codepen or jsfiddle of your complete code?

7

Sorry the url got mixed up with the text from my comment, try it again, The link provided should take you to this page:

Screenshot 2022-12-18 at 18.11.08
Screenshot 2022-12-18 at 18.11.081920×1200 156 KB

I’ll post it again incase it wasn’t entered correctly the first time:

8

Hello? Are you still there? Here is a working link: Glitch :･ﾟ✧

9

I don’t see any shader code on that page that implements either directional light or illumination model, so I can’t help here.
You need to write the whole shader program from scratch and for that you need to know GLSL.