이 도구에 대해
Convert any heightmap or grayscale image into a tangent-space normal map right in your browser. Uses a Sobel gradient operator on the luminance channel, with adjustable strength, smoothing, and OpenGL/DirectX Y-axis conventions. Ideal for game engines, shader work, and pairs naturally with the aukimi Matter module for procedural material design. aukimi Matter의 일부.
기능
- Sobel-based gradient detection on luminance
- OpenGL (Y+) and DirectX (Y-) conventions
- Adjustable strength and smoothing
- Invert X / Y channels independently
- Side-by-side heightmap and normal preview
- Images never leave your browser
사용 사례
이 도구 공유
다른 사람들이 발견하도록
무료 계정을 만들어 워터마크를 제거하세요
작업을 저장하고, 전체 크리에이티브 스위트에 접근하고, 워터마크 없이 내보내세요.
How to convert a heightmap to a normal map
Turn a grayscale heightmap into a tangent-space normal map using Sobel gradient detection, entirely in your browser.
- 1
Drop your heightmap anywhere on the tool
Drag a PNG/JPG onto the workspace. The image is auto-downscaled to 1024 px max edge for real-time preview.
- 2
Adjust Strength
Higher Strength deepens the surface slope — good for subtle inputs, too high for already-contrasty ones.
- 3
Add Smoothing if needed
A 1–3 px box blur removes single-pixel noise that would otherwise create speckles in the normal map.
- 4
Pick OpenGL or DirectX
Unity/Godot/Blender → OpenGL. Unreal → DirectX.
- 5
Download the PNG
The output is a standard tangent-space normal map that any PBR material slot accepts.
자주 묻는 질문
What is the difference between a heightmap and a normal map?
A heightmap stores elevation at each pixel (single-channel grayscale). A normal map stores a 3D surface direction (X, Y, Z) encoded in the RGB channels. GPUs can compute lighting far more cheaply from a normal map than by re-integrating a heightmap every frame.
Is this OpenGL or DirectX convention?
Both. The Convention selector switches the Y axis: OpenGL (Y+) is the default, used by Unity, Godot, Blender Cycles/Eevee. DirectX (Y-) is used by Unreal Engine and older Direct3D titles. If your lighting looks inverted in Unreal, flip to DirectX.
Does the color of the source matter, or only the luminance?
Only luminance. We compute Rec. 601 luminance (0.299·R + 0.587·G + 0.114·B) then run a Sobel gradient on that single channel. Feeding a color image works, but grayscale heightmaps give the cleanest result.
How does the Sobel operator work here?
Sobel convolves two 3×3 kernels over the luminance to estimate the gradient dx/dy at each pixel. We treat that gradient as the surface slope, build the normal vector (−dx·s, −dy·s, 1), normalize, and pack into RGB as (n·0.5 + 0.5)·255. Strength scales the gradient before normalization.
Can I use this output directly in Blender / Unity / Unreal?
Yes. Drop the PNG into your material's Normal slot. In Unity and Blender keep OpenGL; in Unreal switch to DirectX (or flip Y with the "Flip Green Channel" import option).
Why does the Smoothing slider help?
Real heightmaps often have 1-pixel noise that becomes amplified by Sobel. A mild box blur (1–3 px) removes that noise without losing large-scale detail. Zero is fine for clean procedural inputs.