There is a way to make normal maps from 4 pictures in photoshop where the light shines from different directions each time.

Step 1: Basically you take all images and grayscale them. Then you have the grayscaled images that are lighted from above, from the left, from below and lighted from the right.

Step 2: Create an image where the red channel is the light from the left and the green channel the light from above. (We name this image A here)

Step 3: rgb = (1 - rgb) * 0.5; (In the tutorial they use something more complex but this gets very near to those results)

Step 4: Create an image where the red channel is the light from the right and the green channel is the light from below. (We name this image B)

Step 5: rgb = rgb * 0.5 + 0.5 (Same applies here)

Step 6:

if(B.r <= 0.5)
    result.r = (2 * B.r * A.r);
else
    result.r = 1 - ((1 - (2 * (B.r - 0.5))) * (1 - A.r));

Now repeat this for each channel except alpha.

This blending method is called "Overlay" in Photoshop or "Hard light" in Gimp. A is basically the base and B is the mask.

more details here: https://www.dropbox.com/s/ez2xhir23kkg6c9/Pixel%20blend%20mode%20algorithms.pdf?dl=0

(Note that I modified the algorithm to use a range from 0 to 1 instead of 0 to 255 or 256. This also reduces the / 256 to / 1 or basically nothing)

Step 7: Fill the blue channel with some value. A lighter blue will yield a smoother normal map. So let the user decide on this value. Best would be to start with 0.5

Further details can be found here: http://www.zarria.net/nrmphoto/nrmphoto.html

Hello Christian. I was trying to upload an 8192x8192 image to produce map, but I could only get the bottom left corner part. After I resized the original image to 4096x4096, everything works fine. I don't know if it is an known issue/limitation. And thanks for your great work.

Add the option "Z Range" that, when checked, changes the Z (blue) channel's range from the default of 0 to 1, to the range -1 to 1. This is the range used by many applications nowadays, including Unity and on the popular Learn OpenGL site.

Until a license is added all the code in this repository is considered copyrighted. Something like https://choosealicense.com/ can be used to determine which license to use for this project. I would recommend the MIT license.

A zoombar or magnify for the 3d preview. On a 512 x 512 texture with my browser at fullscreen it's hard to see what's going on with something like a brick texture etc.

Ideally DisplacementMap.png, NormalMap.png, etc upon saving, the filename should be the same as the original file with a suffix.

For example if I select a file called Example.png and click download all. It should save it as Example_DisplacementMap.png, Example_NormalMap.png.

This would save from having to rename every single file right away after editing.

Hi there!

I just wanted to know the algorithm you've used in the displacement and specular functions. I want to translate into python, so I don't know much about js.

For both functions you transform to grayscale using this function: v = 0.2126*r + 0.7152*g + 0.0722*b

For the displacement map I see the this.contrastImage function but when I try to use console log inside it, it does not show anything. Can you help me clear how the displacement and the specular function works pixel-wise? Thank you.

batch downloading multiple textures just downloads the same 5 maps from the sample image. please fix

also, add autonaming support. i just want to keep the same name the file already had

Thanks <3 edit: Version 96.0.4664.93 (Official Build) (64-bit)

Would it be possible to add support for Roughness maps? I have frequently used this tool over the past few years, but lately I have been doing more things with PBR workflows, so I was wondering if it would be possible to add an option for generating roughness maps, since the specular maps are not compatible with how roughness works.

Hello, I took NormalMap Online for a test drive and discovered a glitch within Upload Pictures mode, all tiles function except the tile for bottom lit imagery. I tried uploading various images to that tile, it's related to the file, and I tried on different computers, not related to browser or PC. Thanks if someone can troubleshoot, contacted Christian Petry, who is presently a busy guy at home with a second child on the way ;^)