How do you convert a bump map into a normal map with visual shader nodes?

Question

I was surprisingly unable to find an answer to this basic question after an hour of searching online. How do you convert a grayscale bump map into a normal map inside the Visual Shader editor? There are cases when you're working with a height map rather than a normal map image, and of course you won't get proper results if you just plug the bumpmap straight into the Normal Map output without converting it to the blue texture first. In Blender there's a bump node for this purpose, you plug the gray image in and it outputs a working normal texture... what's the equivalent for this in Godot?

I asked about it on Discord and someone suggested the dFdx and dFdy nodes. I don't really understand what they do and how to use them. Are they the proper way or is there a builtin node for this purpose?

Additionally as it's a similar question: How do I set a parallax image in visual shaders? The output node surprisingly doesn't have a Parallax dot I can connect my image input to. Are there special requirements for this feature in shaders?

Ebracteate

Answer 1

I usually do it in GIMP. There is a normal map filter that converts grayscale to a normal map. You can also use Material Maker, which makes this easy as well (and you can generate all sort of other stuff with it). https://rodzilla.itch.io/material-maker

Underbodice

Answer 2

@cybereality said: I usually do it in GIMP. There is a normal map filter that converts grayscale to a normal map. You can also use Material Maker, which makes this easy as well (and you can generate all sort of other stuff with it). https://rodzilla.itch.io/material-maker

Thanks. I take it there's no default shader node other than converting in Gimp or Blender, unless you mean that filter in Godot not Gimp? You suggested material maker which is noteworthy, though like I said in the other thread I was curious to learn how to do some things using just visual script nodes or simple shader definitions from scratch, there seems to be a lack of documentation online on some particular scenarios though the basics are well explained at least.

Ebracteate

Answer 3

Yes, you could do it manually. AFAIK it is not built in, so you would have to write a shader that reads a grayscale and converts that to a normal. The math should not be hard, and it would depend what you are doing.

I think for a traditional game it would be easier to do this in GIMP/Blender/Material Maker, etc. and get better results. But if your game was dynamically generated or procedural, then this wouldn't work.

You can search for "height map to normal map" you might find something. I found this code which appears correct (scroll down for the edit update): https://mcmap.net/q/21935/-normal-map-from-height-map

Shouldn't be too hard to translate that to GLSL in Godot. Then you can read the texture image and save it to a PNG or whatever, or just leave it in memory.

Underbodice

Answer 4

If opting to write your own shader to produce normal data from grayscale input don't forget to consider godot's handedness.

Testis

Answer 5

The Image class has a bump_map_to_normalmap() function, but it runs on the CPU. This means it's not available in visual shader nodes.

Tolliver