Applying other undynamic maps to ShaderMaterial in Three.js

Questions
,
1

I am trying to create visualization of Earth Moon System (Or maybe full solar system in the future) and I found this amazing shader that dynamically applies day and night textures to Earth parts based on lightning.

There is one issue with that solution. I can’t see any way to apply other maps like bump map or specular map.

They were really nice before applying the shader and I really want them back.
When researching the topic I’ve seen that you can create other maps that are dynamically modified.

I am looking for a way to modify these shaders to apply other static maps while keeping dynamic main map

Vertex Shader

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

Fragment Shader

    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 * 5.0, -1.0, 1.0);

      float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;

      vec3 color = mix(nightColor, dayColor, mixAmount);

      gl_FragColor = vec4(color, 1.0);
    }

Material Setup

const earthmaterial = new THREE.ShaderMaterial({
  uniforms: {
    sunDirection: {
      value: new THREE.Vector3(1, 0, 0)
    },
    dayTexture: {
      value: earthtexture
    },
    nightTexture: {
      value: earthnighttexture,
    }
  },
  vertexShader: dayNightShader.vertex,
  fragmentShader: dayNightShader.fragment,
})
2

HI @hopkuba , did you try to use THREE.Extended material ?

3

Hi, I saw your post while looking for something similar. I’ve managed to do this effect with blending:

if(mesh[0] == 'earth') {
	geometry.instanceCount = 3;
	mat.transparent = false;
	mat.blending = THREE.CustomBlending;
	mat.blendSrc = THREE.SrcColorFactor; 
	mat.blendDst = THREE.OneMinusSrcColorFactor;
								
	let matNight = new THREE.MeshStandardMaterial( { map: childTexture['mapNight'] } );
	matNight.lightMap = childTexture['mapNight'];
	matNight.lightMapIntensity = 20;
	matNight.displacementMap = childTexture['bump'];
	matNight.displacementScale = 0.002;
	matNight.needsUpdate = true; 
	materials.unshift(matNight);
	childTexture['mapNight'].dispose();
	matNight.dispose();

	let matClouds = new THREE.MeshStandardMaterial( { map: childTexture['mapClouds']} );
	matClouds.blending = THREE.CustomBlending;
	matClouds.blendEquation = THREE.MaxEquation;
	matClouds.displacementMap = childTexture['mapClouds'];
	matClouds.displacementScale = 0.02;
	matClouds.needsUpdate = true; 


	let cloudsMesh = new THREE.Mesh( geometry, matClouds );
	cloudsMesh.renderOrder = 2;
	cloudsMesh.scale.set(1.0001, 1.0001, 1.0001);
								
	meshBody.add(cloudsMesh);
	matClouds.dispose();
								
}

check it out my project, it’s a bit messy yet.
https://funilariadigital.com.br/planetarium/