How to convert a height map to a normal map?


#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!


#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.


#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