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 :・゚✧