본문으로 건너뛰기
도구로 돌아가기

Normal Map Generator

Convert heightmaps into tangent-space normal maps

100% 무료브라우저에서 실행가입 불필요

이 도구에 대해

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

사용 사례

Game engine materials and shadersQuick bump-to-normal conversionPreview inputs before sending to aukimi Matter

이 도구 공유

다른 사람들이 발견하도록

HN

무료 계정을 만들어 워터마크를 제거하세요

작업을 저장하고, 전체 크리에이티브 스위트에 접근하고, 워터마크 없이 내보내세요.

Sign Up Free

더 필요하신가요?

aukimi Matter 사용해보기

실시간 3D 미리보기로 PBR 머티리얼을 제작하는 노드 기반 프로시저럴 텍스처 에디터입니다.

자세히 보기무료 계정 만들기

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

    Adjust Strength

    Higher Strength deepens the surface slope — good for subtle inputs, too high for already-contrasty ones.

  3. 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. 4

    Pick OpenGL or DirectX

    Unity/Godot/Blender → OpenGL. Unreal → DirectX.

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