How to convert a height map to a normal map?

Hi all

I have a height map which generate dynamically, can I covert it to a normal map?

Best Regards.

As long as it is in the same formats/colours that a normal map should be, I don’t see why not?

Thanks for your reply, I mean convert it by JS code in run time, is there any API or lib we can use?

Is the height map an image already? Or just data?

The height map is a canvas object.

If you can convert it to an image, then yes it definitely could be used as a normal map (aka. Just assign it to a material).

As raw data, I’m not 100% sure. I feel like it can but can’t think of a way off the top of my head without diving into the engine code.

This tool converts heightmaps to normal maps:

It’s open sourced here:

The code to do the conversion is probably in there somewhere.

Derp. I forgot height maps are 1 dimensional :sweat: Now I see why you are asking. Sorry!

1 Like

Thank you, I have read this code, the way he used is generate normal map by ThREE.Shader and a lot of THREE.JS consept. So I wonder is it could be used in PlayCanvas.

1 Like

Any news about that?

I had solved this issue, sorry for can’t share the source code, you know, I’m not boss.
A hint: the key point is to understand the shader code in the project below:

Thanks to Will