Triplanar normal mapping

I have been successfully mapping and mixing diffuse triplanar mapping textures using the material node system and StandardNodeMaterial. Now I would like to do the same for the normals however I am a bit stuck.

My triplanar mapping function is loosely based on the triplanar-mapping example available on the node material demo page. The naive way would be to use this custom mapping function to generate a diffuse grayscale texture that would be fed as argument into BumpMapNode. However, BumpMapNode requires the input texture to includes uvs which triplanarMapping doesn’t provide.

material.normal = new Nodes.BumpMapNode(triplanarMappingTexture);

Would it be the correct workflow to achieve this triplanar normal mapping?

Another solution that I had in mind was to use a normal map instead and have the triplanarMapping function spitting out directly the normal vectors. I tried to adapt some code found on here but I didn’t manage to get anything working properly either.

material.normal = triplanarMappingTexture;

Thanks for your help

For the normal map you need to get the normal for each axis, and
normal = normalize(( normalX + normalY + normalZ ) / 3.0);

Ok, so I used a normal map texture that I feed trough the triplanarMapping function modified as follow:

// Triplanar mapping
vec2 uvX = position.yz * scale;
vec2 uvY = position.zx * scale;
vec2 uvZ = position.xy * scale;

// Normals
vec3 normalX = (vec3(texture2D(texture, uvX)) * 2.0 - 1.0) * blend.x;
vec3 normalY = (vec3(texture2D(texture, uvY)) * 2.0 - 1.0) * blend.y;
vec3 normalZ = (vec3(texture2D(texture, uvZ)) * 2.0 - 1.0) * blend.z;

return normalize((normalX + normalY + normalZ) / 3.0);

Is it what you meant? Result seems to be plausible when I tested :slight_smile:

I feel like I need to mix it with the geometry normal vector but I am unsure how.

No you need to mix the normals inside the perturbNormal2Arb function of normalmap_pars_fragment before it transforms it.

In perturbNormal2Arb at
vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0

Thanks for putting me on the right track with perturbNormal2Arb. I modified the function available in NormalMapNode.js to make it work properly this time.