How to blend normal texture and detailNormal texture?

Questions
, ,
1

There is a OBJ model.It has two normal textures,one is normal texture,and the other is detailNormal texture.
I want to ask if there has any method to blend normal texture and detailNormal texture?

detailNormal
detailNormal1234×1232 1.09 MB

normal
normal1232×1230 393 KB 

const textureLoader = new THREE.TextureLoader();
					//color
					const colorTexture = textureLoader.load("textures/0000001/0000001_D.png");
					colorTexture.encoding = THREE.sRGBEncoding
					// normal
					const normalTexture = textureLoader.load("textures/0000001/0000001_N.png");
					normalTexture.anisotropy = 4;
					// roughness
					const roughnessTexture = textureLoader.load("textures/0000001/0000001_R.png");
					// detailNormal
					const DetailNormalTexture = textureLoader.load("textures/0000001/0000001_DN.png");
					// metalness
					const metalnessTexture = textureLoader.load("textures/0000001/0000001_M.png");

					// material
					const standardMaterial = new THREE.MeshStandardMaterial({
					
						map: colorTexture,
					
						normalMap: normalTexture,

						metalness: 1,
						metalnessMap: metalnessTexture,
						
						roughnessMap: roughnessTexture,
						roughness: 1,

						envMapIntensity: API.envMapIntensity

					});

					mesh = new THREE.Mesh(new THREE.SphereGeometry(30, 60, 60), material);
					mesh.castShadow = true;
					mesh.position.z = -50;
					scene.add(mesh);
2

three.js only supports a single value for normalMap. So you need a custom shader or an enhanced version of MeshStandardMaterial(via onBeforeCompile()) that can handle two normal map inputs. In your shader, you can sample both maps in the fragment shader and mix the respective values before usage.

1 Like
3

（1）I use shaderMaterial blend two normal textures,
this is the code

<script id="vertex_shader" type="x-shader/x-vertex">
		varying vec2 vUv;
		void main(){
			vUv = uv;
			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
			gl_Position = projectionMatrix * mvPosition;
		}
	</script>

	<script id="fragment_shader" type="x-shader/x-fragment">
		uniform sampler2D texture0;
		uniform sampler2D texture1;
		varying vec2 vUv;

		void main(void)
		{
			vec3 n1 = texture2D(texture0,vUv).xyz * 2.0 -1.0;
			vec3 n2 = texture2D(texture1,vUv).xyz *2.0 -1.0;
			vec3 r = normalize(vec3(n1.xy + n2.xy, n1.z));
			gl_FragColor =vec4(r*0.5 + 0.5, 1.0) ;
		}
	</script>

uniforms = {
	texture0: { value: normalTexture },
	texture1: { value: DetailNormalTexture }
};
var material = new THREE.ShaderMaterial({
	uniforms:uniforms
	vertexShader: document.getElementById('vertex_shader').textContent,
	fragmentShader: document.getElementById('fragment_shader').textContent
});

mesh = new THREE.Mesh(new THREE.PlaneGeometry( 60, 60), material);
mesh.castShadow = true;
mesh.position.z = -50;
scene.add(mesh);

The result is

QQ截图20210604181300
QQ截图202106041813001585×1758 1.39 MB

But I do not know how to load map, AOMap,roughnessMap or other map when using shaderMaterial.
And it dose not have light and shadow.

I am trying to use ```
THREE.UniformsUtils.merge

Can you give me some hints?

（2）I found a case，[materials_nodes](https://threejs.org/examples/webgl_materials_nodes.html)，I don’t know if this method can  blend two textures?
4

Hey wondering, if you got anywhere with this? :))