2D 노멀맵 생성기 · 높이나 스프라이트 밝기로

높이나 회색 이미지를 탄젠트 공간 노멀맵으로 바꾸세요. 같은 강도는 모든 커널에서 같은 기울기이고, 평평한 입력은 정확히 (128, 128, 255)가 되며, 규약은 화면에 표시됩니다.

노멀맵 생성기는 높이 이미지나 회색 이미지를 탄젠트 공간 노멀맵으로 바꿉니다. 픽셀마다 높이가 좌우·상하로 얼마나 가파르게 오르는지 재서 그 기울기를 RGB로 쓰며, 평평한 곳은 정확히 (128, 128, 255)가 됩니다. 이 페이지는 텍스처 랩을 엽니다. 높이 맵·회색 텍스처·스프라이트를 넣고, 높이로 쓸 밝기나 알파, Sobel·Scharr·Sobel 5×5 커널, 강도, OpenGL(Godot·Unity)이나 DirectX 초록을 고른 뒤 PNG를 받으면 됩니다. 브라우저에서 처리하며 업로드하지 않습니다.

텍스처 맵을 끌어다 놓으세요(PNG는 채널 바이트를 그대로 유지)

텍스처 랩 열기

브라우저에서 처리하며 파일은 업로드되지 않습니다.

텍스처 랩: CC0 텍스처로 만든 노멀맵과 OpenGL/DirectX 규약 표시 — CC0 에셋(ambientCG)을 연 실제 텍스처 랩 화면입니다.

출력

Channel PNGs측정 확인· numpy
Normal map측정 확인· numpy
Packed mask / ORM측정 확인· Pillow
Engine import미검증

높이에서 노멀로: 기울기, 커널, 강도

랩은 픽셀마다 높이 값 하나를 읽습니다. 이미지의 밝기(Rec. 709 휘도, 0.2126 R + 0.7152 G + 0.0722 B)나 알파 채널을 0~255로 읽어 0~1로 씁니다. 흰색이 높고 검은색이 낮습니다.

미분 커널이 이웃 픽셀로 x·y 방향 기울기를 추정합니다. 기본은 Sobel 3×3이고, Scharr 3×3은 가운데 줄에 무게를 더 둬서 대각선 기울기가 더 고르게 나오며, Sobel 5×5는 더 넓게 평균을 내 잡음은 줄지만 잔디테일도 사라집니다. 모든 커널은 1픽셀에 높이 한 단위가 오르는 경사를 기울기 1로 읽도록 정규화되어 있어, 어떤 커널을 골라도 같은 강도면 같은 기울기가 나옵니다.

노멀은 (−강도·∂h/∂x, 강도·∂h/∂y, 1)을 길이 1로 정규화해 (n + 1) × 127.5로 기록합니다. DirectX 출력은 초록만 부호가 반대이며, 두 파일의 차이는 그것뿐입니다. Wrap을 켜면 커널이 반대쪽 가장자리를 이어서 읽는데, 반복 텍스처에는 이것이 필요합니다. 끄면 가장자리 픽셀을 늘려 쓰기 때문에 이어 붙였을 때 이음새가 보입니다.

높이 맵: 흰색이 높고 검은색이 낮은 회색 이미지.
커널: 이웃 픽셀로 기울기를 추정하는 작은 가중치 격자.
강도: 기울기에 곱하는 값. 슬라이더 0~10, 기본 2.
Wrap: 반대쪽 가장자리를 이어서 읽어 반복 맵에 이음새가 없게 하는 방식.

예시: 픽셀마다 32단계씩 밝아지는 경사

오른쪽으로 갈수록 픽셀당 32단계 밝아지는 회색 이미지, Sobel 3×3, OpenGL:

기울기 = 32 / 255 = 픽셀당 0.1255
강도 1:  n ∝ (−0.1255, 0, 1) → (−0.124, 0, 0.992) → RGB (112, 128, 254)   기울기  7.2°
강도 2:  n ∝ (−0.2510, 0, 1) → (−0.243, 0, 0.970) → RGB ( 96, 128, 251)   기울기 14.1°
평평한 곳: n = (0, 0, 1)                           → RGB (128, 128, 255)

오른쪽으로 오르는 면은 왼쪽을 향하므로 빨강이 128보다 작아집니다. 벡터를 다시 정규화하기 때문에 강도를 두 배로 해도 기울기가 두 배가 되지는 않습니다. 기울기 = atan(강도 × 경사)입니다.

이렇게 작동합니다

밝기나 알파 채널에서 높이를 얻고, 정규화된 Sobel 3×3·Scharr·Sobel 5×5 커널을 씁니다.
OpenGL(+Y, 기본)과 DirectX(−Y), X·Y 반전.
반복 텍스처용 wrap 샘플링: 가장자리 텍셀이 실제 2배 반복 속 같은 텍셀과 같습니다.
디테일 노멀을 Reoriented Normal Mapping으로 합성(평평해지는 RGB 혼합 없음).

사용 방법

높이 맵이나 스프라이트를 끌어다 놓습니다.
소스(밝기·알파), 커널, 강도를 고릅니다.
엔진이 기대하는 규약을 고릅니다.
노멀맵을 받습니다.

결과 확인

높이 이미지의 평평한 부분은 정확히 (128, 128, 255)가 나와야 합니다. 랩은 세 커널과 두 규약 모두에서 이를 시험합니다.
결과 아래의 검증 값을 보세요. 벡터 평균 길이가 1.000에 가깝고, 노멀은 표면 안쪽을 향할 수 없으니 파랑이 128 아래로 내려가지 않아야 합니다.
반복 텍스처라면 Wrap을 켠 상태에서 이음새를 확인하세요. 예를 들어 반복 노멀맵 이음새 점검으로.
쓰기 전에 조명으로 비춰 보세요. 엔진에서, 또는 근사치(조명 1개, GGX)라고 표시된 랩의 재질 미리보기에서.

문제 해결

증상	유력한 원인	확인 방법	해결
볼록한 곳이 오목하게 보임	이 그림은 어두운 곳이 솟은 부분인데 랩은 어두운 곳을 낮게 읽음	확실한 볼록부의 밝은 면이 조명 반대쪽을 향함	X 반전 (빨강)과 Y 반전 (초록)을 둘 다 켜기(높이 반전과 같음). 위아래만 틀리면 규약만 바꾸기
반복되는 자리에 선이 생김	Wrap이 꺼져 있어 가장자리 픽셀을 늘려 씀	결과를 2 × 2로 이어 붙여 경계 확인	Wrap을 켜고 다시 내보내기
입체가 자글자글하고 잡음이 많음	JPEG 압축 흔적이나 칠의 질감을 높이로 읽음	매끈해야 할 곳을 확대	PNG 원본, Sobel 5×5, 또는 낮은 강도 사용
스프라이트 외곽은 납작하고 안쪽만 울퉁불퉁함	밝기에는 베벨이 없어, 알파를 소스로 할 때만 실루엣이 높이가 됨	소스를 알파로 바꿔 비교	알파를 높이로 쓰거나 스프라이트 노멀맵 생성기의 베벨 사용

다른 방법

방법	이럴 때 더 낫습니다
Studio 텍스처 작업 공간(스프라이트 노멀맵)	스프라이트라면 실루엣 베벨, Godot와 같은 계산의 조명, 프레임별 시트, 검증된 Godot 4·Unity 6 내보내기.
3D 프로그램에서 하이폴리 모델로 굽기	표면이 실제로 3D로 있다면 밝기에서 추측하는 대신 진짜 노멀을 얻습니다.
OpenGL ↔ DirectX 변환기	이미 노멀맵이 있고 다른 초록 규약만 필요할 때.

출력 파일과 검증 방법

"측정 확인"은 내려받은 파일을 페이지 밖에서(Pillow·numpy·별도 파서) 다시 열어 그 속성을 측정했다는 뜻입니다. 게임 엔진에서 불러오는 것은 시험하지 않았습니다.

대상	파일	검증
Channel PNGs	`<name>-r/g/b/a.png (8-bit grey)`	측정 확인 numpy채널마다 바이트가 같고 완전히 투명한 텍셀 아래의 RGB도 유지됩니다.
Normal map	`PNG · OpenGL (+Y) or DirectX (−Y)`	측정 확인 numpy디코딩한 벡터가 단위 길이(최대 오차 0.0002)이고, OpenGL과 DirectX는 초록 채널만 다릅니다.
Packed mask / ORM	`Unity HDRP mask · URP metallic · ORM (glTF, Godot)`	측정 확인 Pillow패킹된 바이트 확인: ORM 프리셋, AO 10 / 러프니스 80 / 메탈릭 220 → (10, 80, 220, 255).
Engine import	`Unity · Unreal · Godot`	미검증어떤 엔진에서도 불러오지 않았습니다.

검증 근거

채널 분리가 네 채널 모두 바이트 동일(최대 차이 0), 투명 텍셀 2048개가 RGB 유지. 가장자리 번짐은 알파 0인 텍셀 448개만 바꾸고 알파 바이트는 하나도 건드리지 않음. OpenGL ↔ DirectX는 초록(255 − g)만 다름. 변환한 노멀은 단위 벡터.

한계

밝기는 형태가 아닙니다. 칠한 그림자는 오목하게, 칠한 하이라이트는 볼록하게 나옵니다.
여기에는 베벨, 2D 조명 미리보기, 엔진 번들이 없으며, 이 맵들은 수치로만 확인했고 엔진에서 렌더하지 않았습니다.
출력은 8비트 PNG이며, 16비트 높이 입력은 상위 바이트만 씁니다.
정확한 채널 바이트는 PNG에서만 보장됩니다. JPEG·WebP는 브라우저가 디코딩하며 "바이트 동일 아님"으로 표시합니다.
인터레이스 PNG와 16비트 출력은 지원하지 않습니다. 정확 경로는 3,355만 픽셀까지입니다.
노멀맵의 규약은 픽셀로 알아낼 수 없고 변환만 할 수 있습니다.
Unity·Unreal·Godot에서 불러오지 않았습니다. 채널 순서는 각 문서와 엔진 소스에 근거합니다.

버전과 출처

텍스처 랩, 내려받은 파일로 측정: 생성·변환한 맵은 단위 벡터로 디코딩되고(평균 길이 1.0001, 최대 오차 0.0002), 평평한 높이는 세 커널과 두 규약 모두에서 (128, 128, 255, 255)이며, Wrap 가장자리는 실제로 2배 반복한 이미지 속 같은 픽셀과 같고, OpenGL과 DirectX 출력은 초록(255 − g)만 다릅니다. Unity와 Godot의 Y+ 규약은 각 문서를 따릅니다.

참고한 공식 문서

자주 묻는 질문

Laigter나 SpriteIlluminator와 같은가요?

아닙니다. 높이나 밝기의 기울기를 계산하며 모양을 칠하거나 경사를 만들지 않습니다. 도트에서는 높이가 여러분의 회색 값에서 옵니다.

어떤 규약을 써야 하나요?

Unity·Godot·Blender는 OpenGL(+Y), Unreal은 DirectX(−Y)를 기대합니다. Unreal 쪽은 Epic의 glTF 내보내기 문서로 추정한 것으로 랩에 표시합니다.

무료인가요? 계정이 필요한가요?

이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.

스프라이트가 업로드되나요?

아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.

Aseprite나 엔진 플러그인을 설치해야 하나요?

아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).