Calculate a normal map from a displaced mesh in Three JS

[hollow pasture]

Hi there! Have you an idea if it's possible to apply a displacement map to a mesh and then, create kind of normal map from this displaced mesh? 🙂

[tropic trout]

Yes, could create a gray -scale height map from displacement map and convert it to a normalmap
http://cpetry.github.io/NormalMap-Online/
this could be useful. no need to a displaced mesh,

[hollow pasture]

Thanks @tropic trout ! Found this really helpfull 🙂

But I wonder if there. are any way to compute a "real" normal mal from a displaced mesh. Cause this normal map "generator" use a sobel operator which is a trick to approximate normals but can be fooled sometimes haha

[kindred siren]

you need to get the derivatives, differences to neighbours of pixels to construct the normal vector, and store it for unsigned int8 doing the normal = normal * 0.5 + 0.5, so you'll get the blueish tinted tangent space normal map

[hollow pasture]

@kindred siren Thanks for your response ! Yeah that’s what I’m doing now with kind of Sobel operator to get partial derivative.

But it’s basically not so accurate for generating normals in some cases, that’s why I was wondering if Three JS was able to do some parallax calculations on a displaced mesh (due to it’s 3D space) to generate 100% accurate normals

[tropic trout]

sure u can, create a displaced mesh and then use the something like "Hight-material": a custom material which color was depends on its height ( should do some trick on the fragement shader ) oh I got it , the MeshNormalMaterialcould do the trick.
steps:
1 create mesh with or withtou displacement map
2. make it a MeshNormalMaterial
3. create the scene and a rendertarget and a camera use for render the normalmap
4. take the framebuffer as a input of normalmap
btw you could delete the sobel operator . only use the Normalmap shader

[lilac portal]

If you have Gimp, it has a tool in the filters > generic menu to do this. Make sure the image is in color mode before you make the normal map, but, yeah, it will do this automatically.