How to apply two normal maps to one material?

Questions
, , ,
1

Hey there!
I’m currently struggling trying to alter the three.js shaders for normal maps so that I can pass in two normal maps and have them calculated for one material.

So far I’ve been able to display the two normal maps using just a fragment shader like so:

uniform sampler2D normalMap1;
uniform sampler2D normalMap2;
varying vec2 vUv;

void main(void)
{
  vec3 n1 = texture2D(normalMap1,vUv).xyz * 2.0 -1.0;
  vec3 n2 = texture2D(normalMap2,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) ;
}

this gives me the result

Screenshot 2023-08-07 093511
Screenshot 2023-08-07 0935111727×1286 114 KB

but this is just altering the frag color to be the two normal maps. What glsl file should I replace and what would the code look like to combine the two normal maps before lighting and stuff is calculated?
Thank you!

1 Like