cpetry / normalmap-online Goto Github PK
View Code? Open in Web Editor NEWNormalMap Generator Online
License: MIT License
NormalMap Generator Online
License: MIT License
Am I missing something? No part of the app works except loading in textures
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)
what file handles downloads for batch mode, im trying to make it automatically generate minecraft normals for me, but i want thh files to be named with the format filename_n.png, filename_s.png, for normal and specular maps.
Edit: i want to modify this so i can do this for all future releases of the game, if you are wondering i am making the default textures have maps for 3d-ness, that is all.
Would it be possible to add support for loading TGA image files? A lot of my texture files are in TGA format, and I need to convert them first if I want to use them with Normal Map Online
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
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.
It would be nice to have a button for loading just the texture containing color data to have a better preview
Left to do:
They don't seem to preview when I open the index site. When I download them and open them, they are just empty pngs at 300x150. I have restarted just to make sure it's not on me. I have also tried it on another computer as well with the same results.
A user stated that if you click on invert height, it downloads a blank file.
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.
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 ;^)
A user requested if naming could be changed:
"could you abbreviate to NRM.png
ambient Occlusion - becomes AO
Specular becomes Spec or SM etc."
Perhaps a checkbox to abbreviate the names of the textures could be a solution.
The default naming should still be used like it is (I think)
Would you be able to add a "reset settings to default" button for each setting? I think this would make it more user friendly and amazing.
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.
Minecraft shaders use transparency for the visual depth. I noticed this generator does not generate any transparency unless you use the opacity setting, which affects the entire image. I would like an option to generate transparency, where the transparency is how deep it is, and an option for the depth.
An image format choice such as png, tga
Full 16 bit range of normal maps saved as a png image.
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.
Numbers or input fields for the sliders (for more precise control and for matching multiple textures/settings.)
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.
Spec,AO, Disp... -maps
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.