How to convert a height map to a normal map?

Help & Support
1

Hi all

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

Best Regards.
Charles

2

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

3

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

4

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

5

The height map is a canvas object.

6

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.

7

This tool converts heightmaps to normal maps:

http://cpetry.github.io/NormalMap-Online/

It’s open sourced here:

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

8

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

1 Like
9

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
10

Any news about that?
Thanks!

11

Hi,
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:
http://cpetry.github.io/NormalMap-Online/

Thanks to Will

Charles