텍스처 맵 실험실

밝기·알파 추출·반전과 높이 기울기 기반 노멀 맵을 만드세요.

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

이미지을(를) 여기에 놓으세요여러 개를 한 번에 처리할 수 있습니다

업로드 없음 · 이 기기에서 처리

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

랩은 픽셀마다 높이 값 하나를 읽습니다. 이미지의 밝기(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(강도 × 경사)입니다.

결과 확인

높이 이미지의 평평한 부분은 정확히 (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 변환기	이미 노멀맵이 있고 다른 초록 규약만 필요할 때.

이 방법의 한계

밝기는 형태가 아닙니다. 칠한 그림자는 오목하게, 칠한 하이라이트는 볼록하게 나옵니다.
여기에는 베벨, 2D 조명 미리보기, 엔진 번들이 없으며, 이 맵들은 수치로만 확인했고 엔진에서 렌더하지 않았습니다.
출력은 8비트 PNG이며, 16비트 높이 입력은 상위 바이트만 씁니다.

버전과 출처

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

참고한 공식 문서

예제

이 도구로 만든 예제입니다. ZIP 도구는 미리보기를 표시하며 전체 파일은 내려받은 압축 파일에서 확인하세요.