노멀맵 생성기 (Sobel)
이미지의 밝기를 높이로 삼아 Sobel 연산으로 탄젠트 공간 노멀맵을 만드는 도구입니다. 강도·프리블러·높이 반전·OpenGL↔DirectX Y 반전·타일 이음새(wrap) 경계를 조절할 수 있고 파일은 기기 밖으로 나가지 않습니다.
2D 스프라이트나 텍스처에 입체감 있는 조명을 넣으려면 노멀맵이 필요합니다. 이 도구는 별도 3D 프로그램 없이 아무 이미지의 밝기를 높이로 해석해 브라우저 안에서 즉시 노멀맵을 만들어 줍니다.
Sobel 연산자로 가로·세로 기울기를 구해 탄젠트 공간 노멀 벡터로 인코딩합니다. 강도로 요철의 세기를, 프리블러로 노이즈를, 높이 반전으로 오목·볼록을 조정하고, 엔진 규격에 맞춰 OpenGL·DirectX Y 채널을 전환하며, 타일 텍스처는 이음새가 생기지 않도록 wrap 경계를 켤 수 있습니다. 무거운 연산은 백그라운드 스레드로 넘겨 처리되어 화면이 멈추지 않습니다.
업로드한 이미지의 알파(투명도)는 그대로 보존되어 투명 배경 스프라이트도 자연스러운 결과를 얻습니다. 생성된 노멀맵은 원본 파일명에 -normal이 붙은 PNG로 내려받습니다. 한 변이 4096px를 넘는 이미지는 원본 크기 그대로는 처리하지 않고, 축소 옵션을 켜면 2048px로 줄인 뒤 생성합니다.
받는 형식은 PNG·JPEG·WebP 셋입니다. 파일 선택 창은 이 셋만 보여 주지만 끌어다 놓기는 그 필터를 지나치므로, 올라온 파일의 형식을 한 번 더 확인해 셋이 아니면 디코드하지 않고 그 자리에서 알려 줍니다. 크기 검사도 디코드보다 먼저 돕니다 — 파일 앞부분만 읽어 PNG의 IHDR, JPEG의 프레임 시작 마커, WebP의 VP8 계열 청크에서 가로·세로를 직접 꺼내므로, 용량은 작은데 화소만 거대한 이미지도 메모리를 잡기 전에 걸러집니다.
한계를 넘은 이미지에는 축소 버튼이 따로 나타납니다. 이 버튼은 이름과 달리 축소까지만 합니다 — 긴 변을 2048px 이하로 줄인 축소본을 새 원본으로 등록하고 줄어든 실제 가로×세로를 알려 줄 뿐이며, 노멀맵 자체는 생성 버튼을 한 번 더 눌러야 만들어집니다(2026-09-15 실행 검증에서 확인한 동작입니다).
화소 수가 1,048,576개, 그러니까 1024×1024 이상이면 계산을 백그라운드 스레드로 넘기고 그보다 작으면 화면 스레드에서 바로 끝냅니다. 백그라운드로 넘어간 경우에만 진행률이 퍼센트로 표시되므로, 작은 이미지에서 퍼센트가 보이지 않는 것은 정상입니다. 어느 경로로 가든 픽셀은 이 기기 밖으로 나가지 않습니다.
조절할 수 있는 값은 넷입니다. 강도는 0에서 10까지 0.1 단위로 움직이고 기본값은 2이며, 프리블러 반경은 0에서 8까지 정수로 올립니다. 높이 반전은 밝은 곳을 낮게 보도록 기울기 부호를 뒤집고, 경계 처리는 가장자리 이웃을 복제하는 기본 방식과 반대쪽 끝에서 값을 가져오는 wrap 중에서 고릅니다. 이어 붙여 쓰는 반복 타일 텍스처는 wrap을 켜야 이음매가 드러나지 않습니다.
OpenGL과 DirectX 중 무엇을 고르느냐는 초록 채널의 방향만 바꿉니다. 같은 입력으로 두 규격을 각각 뽑아 같은 좌표를 비교하면 두 초록 값의 합이 255가 됩니다 — 2026-09-15 실행 검증에서 표본 세 지점이 131과 124, 135와 120, 131과 124로 정확히 맞아떨어졌습니다. 엔진에서 요철이 반대로 보인다면 다른 값을 만지기 전에 이 토글부터 뒤집어 보는 편이 빠릅니다.
알파는 계산에 섞이지 않고 그대로 옮겨집니다. 임계값(8) 아래인 픽셀은 0이든 아니든 똑같이 평탄 노멀(128, 128, 255) 색상과 원래 알파 수치가 내려받은 파일에 그대로 찍히는데, PNG를 저장하는 단계가 화면 표시용 캔버스를 거치지 않고 노멀맵 계산 결과 바이트를 곧장 파일로 옮겨 담기 때문입니다. 그래서 알파는 안 보고 RGB만 읽어 들이는 프로그램에 불러와도 이 자리는 새까맣게 뭉개지지 않고 요철 없는 평범한 노멀 색으로 나타납니다.
결과물은 원본 이름 뒤에 -normal이 붙은 PNG 한 장뿐입니다. 앰비언트 오클루전이나 러프니스 같은 다른 맵은 함께 만들지 않고, 여러 장을 한꺼번에 돌리는 일괄 모드도 없습니다. 무엇보다 이 화면은 3D 메시를 전혀 보지 않습니다 — 높이는 밝기에서 추정한 값이라 색이 밝은 곳과 실제로 높은 곳이 어긋난 그림에서는 결과가 어색해지고, 바로 그럴 때 쓰라고 높이 반전과 프리블러가 붙어 있습니다.
주요 기능
- 임의 이미지 → 탄젠트 공간 노멀맵(Sobel)
- 강도·프리블러·높이 반전 컨트롤
- OpenGL↔DirectX Y 채널 반전 + 타일 wrap 경계
- 투명 알파 보존, 대형 이미지 Web Worker 처리 — 완전 브라우저
- 디코드 전 헤더 검사 — PNG·JPEG·WebP 크기를 파일 앞부분에서 직접 확인
- 강도 0~10(기본 2) · 프리블러 반경 0~8 정수 단계
- 1024×1024 화소 이상은 백그라운드 스레드 처리 + 진행률 표시
- 원본 이름 + -normal.png 무손실 PNG 한 장 출력
사용 전 확인
이미지의 밝기를 높이로 해석해 Sobel 기울기로 탄젠트 공간 노멀맵을 생성합니다.
요철이 드러나는 이미지(텍스처·패턴)일수록 결과가 좋습니다. 한 변이 4096px를 넘으면 원본 크기 그대로는 처리하지 않고 축소 옵션을 켰을 때만 2048px로 줄여 생성하니 미리 크기를 확인하고, 엔진의 Y 채널 규격(OpenGL/DirectX)도 맞춰 두세요.
사용 순서
- 노멀맵으로 바꿀 이미지를 드래그하거나 선택해 업로드합니다.
- 강도와 프리블러 반경, 높이 반전 여부를 조정합니다.
- 엔진 규격에 맞춰 OpenGL 또는 DirectX(Y 반전)를 고르고, 타일이면 이음새 방지(wrap)를 켭니다.
- 노멀맵을 생성하고 PNG로 내려받습니다.
주의사항
- 휘도 기반이라 색이 밝다고 반드시 높은 곳은 아닙니다 — 필요하면 높이 반전을 쓰세요.
- 강도는 픽셀 단위 기울기 배수라 같은 그림도 리사이즈하면 요철 세기가 달라집니다.
- 투명 배경 스프라이트는 투명 픽셀을 평탄 노멀로 처리하고 원본 알파를 그대로 보존합니다.
자주 묻는 질문
Q. 강도나 옵션을 바꿨더니 방금 만든 결과의 다운로드 버튼이 사라졌습니다
의도된 동작입니다. 강도·프리블러·높이 반전·wrap 경계·Y 채널 규격 중 하나라도 바꾸면 화면에 남아있던 결과가 새 설정과 어긋나므로 다운로드 버튼이 사라집니다. "노멀맵 생성"을 다시 눌러야 바뀐 설정으로 만든 결과를 받을 수 있습니다.
Q. 노멀맵을 만드는 중에 다른 이미지를 올렸는데 반응이 없습니다
의도된 동작입니다. 생성 중(특히 큰 이미지가 백그라운드에서 처리되는 동안)에는 새 이미지 업로드 자체를 무시해, 진행 중인 결과가 다른 소스로 덮어써지는 것을 막습니다. 처리가 끝난 뒤 다시 업로드하세요.
Q. PNG·JPEG·WebP가 아닌 이미지를 끌어다 놓았더니 아무 일도 안 일어난 것 같아요
무시된 게 아니라 지원하지 않는 형식이라는 오류 문구가 뜹니다. 파일 선택 창은 PNG·JPEG·WebP만 고를 수 있게 걸러져 있지만 드래그 앤 드롭은 이 필터를 그대로 지나치므로, 업로드 직후 형식을 따로 검사해 걸러냅니다.
Q. "2048로 축소 후 생성" 버튼을 누르면 정확히 뭐가 바뀌나요
긴 변이 2048px 이하가 되도록 원본 비율을 유지해 축소한 뒤, 그 축소본을 새 원본으로 등록합니다. 축소가 끝나면 실제로 줄어든 가로×세로 값이 안내 문구로 뜨고, 이후 미리보기·생성·다운로드는 전부 이 축소본을 기준으로 진행됩니다.
이 도구는 설치 없이 브라우저에서 바로 실행됩니다. 화면이 이 안내에 머물러 있다면 JavaScript를 활성화한 브라우저로 접속해 주세요.