# How to blend normal texture and detailNormal texture?

**URL:** <https://discourse.threejs.org/t/how-to-blend-normal-texture-and-detailnormal-texture/26922>\
**Category:** Questions\
**Tags:** textures, materials, shaders\
**Created:** [June 4, 2021, 6:25am UTC](https://discourse.threejs.org/t/how-to-blend-normal-texture-and-detailnormal-texture/26922 "2021-06-04T06:25:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hao\_wu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hao_wu/32/18700_2.png) [@hao\_wu](https://discourse.threejs.org/u/hao_wu)\
**Post date:** [June 4, 2021, 6:25am UTC](https://discourse.threejs.org/t/how-to-blend-normal-texture-and-detailnormal-texture/26922/1 "2021-06-04T06:25:43Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/65458cb1b2c785563a8fa889e987434d171387e2.jpeg)  
 ![normal](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/c/7c2b24162a5f3ec98f3e4fdab3d7cf7151cda893.jpeg)

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

```

---

<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:** [June 4, 2021, 8:58am UTC](https://discourse.threejs.org/t/how-to-blend-normal-texture-and-detailnormal-texture/26922/2 "2021-06-04T08:58:45Z")

</div>

`three.js` only supports a single value for `normalMap`. So you need a custom shader or an enhanced version of `MeshStandardMaterial`(via [onBeforeCompile()](https://threejs.org/docs/index.html?q=mater#api/en/materials/Material.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.

---

<div class="post-metadata">

**Author:** ![hao\_wu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hao_wu/32/18700_2.png) [@hao\_wu](https://discourse.threejs.org/u/hao_wu)\
**Post date:** [June 4, 2021, 10:37am UTC](https://discourse.threejs.org/t/how-to-blend-normal-texture-and-detailnormal-texture/26922/3 "2021-06-04T10:37:19Z")

</div>

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

```javascript
<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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/9/e9fb38bced5e1db5c523343ed2c8e791ec922399.jpeg)

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

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

---

<div class="post-metadata">

**Author:** ![Shane-oo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shane-oo/32/38695_2.png) [@Shane-oo](https://discourse.threejs.org/u/Shane-oo)\
**Post date:** [August 3, 2023, 7:54am UTC](https://discourse.threejs.org/t/how-to-blend-normal-texture-and-detailnormal-texture/26922/4 "2023-08-03T07:54:08Z")

</div>

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