노멀맵 생성기 (Sobel)
이미지의 밝기를 높이로 삼아 Sobel 연산으로 탄젠트 공간 노멀맵을 만드는 도구입니다. 강도·프리블러·높이 반전·OpenGL↔DirectX Y 반전·타일 이음새(wrap) 경계를 조절할 수 있고 파일은 기기 밖으로 나가지 않습니다.
2D 스프라이트나 텍스처에 입체감 있는 조명을 넣으려면 노멀맵이 필요합니다. 이 도구는 별도 3D 프로그램 없이 아무 이미지의 밝기를 높이로 해석해 브라우저 안에서 즉시 노멀맵을 만들어 줍니다.
Sobel 연산자로 가로·세로 기울기를 구해 탄젠트 공간 노멀 벡터로 인코딩합니다. 강도로 요철의 세기를, 프리블러로 노이즈를, 높이 반전으로 오목·볼록을 조정하고, 엔진 규격에 맞춰 OpenGL·DirectX Y 채널을 전환하며, 타일 텍스처는 이음새가 생기지 않도록 wrap 경계를 켤 수 있습니다. 무거운 연산은 백그라운드 스레드로 넘겨 처리되어 화면이 멈추지 않습니다.
업로드한 이미지의 알파(투명도)는 그대로 보존되어 투명 배경 스프라이트도 자연스러운 결과를 얻습니다. 생성된 노멀맵은 원본 파일명에 -normal이 붙은 PNG로 내려받고, 한 변이 4096px를 넘는 이미지는 2048로 축소한 뒤 생성할 수 있습니다.
주요 기능
- 임의 이미지 → 탄젠트 공간 노멀맵(Sobel)
- 강도·프리블러·높이 반전 컨트롤
- OpenGL↔DirectX Y 채널 반전 + 타일 wrap 경계
- 투명 알파 보존, 대형 이미지 Web Worker 처리 — 완전 브라우저
사용 전 확인
이미지의 밝기를 높이로 해석해 Sobel 기울기로 탄젠트 공간 노멀맵을 생성합니다.
요철이 드러나는 이미지(텍스처·패턴)일수록 결과가 좋습니다. 한 변이 4096px를 넘으면 처리하지 않으니 미리 크기를 확인하고, 엔진의 Y 채널 규격(OpenGL/DirectX)도 맞춰 두세요.
사용 순서
- 노멀맵으로 바꿀 이미지를 드래그하거나 선택해 업로드합니다.
- 강도와 프리블러 반경, 높이 반전 여부를 조정합니다.
- 엔진 규격에 맞춰 OpenGL 또는 DirectX(Y 반전)를 고르고, 타일이면 이음새 방지(wrap)를 켭니다.
- 노멀맵을 생성하고 PNG로 내려받습니다.
주의사항
- 휘도 기반이라 색이 밝다고 반드시 높은 곳은 아닙니다 — 필요하면 높이 반전을 쓰세요.
- 강도는 픽셀 단위 기울기 배수라 같은 그림도 리사이즈하면 요철 세기가 달라집니다.
- 투명 배경 스프라이트는 투명 픽셀을 평탄 노멀로 처리하고 원본 알파를 그대로 보존합니다.
자주 묻는 질문
Q. 강도나 옵션을 바꿨더니 방금 만든 결과의 다운로드 버튼이 사라졌습니다
의도된 동작입니다. 강도·프리블러·높이 반전·wrap 경계·Y 채널 규격 중 하나라도 바꾸면 화면에 남아있던 결과가 새 설정과 어긋나므로 다운로드 버튼이 사라집니다. "노멀맵 생성"을 다시 눌러야 바뀐 설정으로 만든 결과를 받을 수 있습니다.
Q. 노멀맵을 만드는 중에 다른 이미지를 올렸는데 반응이 없습니다
의도된 동작입니다. 생성 중(특히 큰 이미지가 백그라운드에서 처리되는 동안)에는 새 이미지 업로드 자체를 무시해, 진행 중인 결과가 다른 소스로 덮어써지는 것을 막습니다. 처리가 끝난 뒤 다시 업로드하세요.
Q. PNG·JPEG·WebP가 아닌 이미지를 끌어다 놓았더니 아무 일도 안 일어난 것 같아요
무시된 게 아니라 지원하지 않는 형식이라는 오류 문구가 뜹니다. 파일 선택 창은 PNG·JPEG·WebP만 고를 수 있게 걸러져 있지만 드래그 앤 드롭은 이 필터를 그대로 지나치므로, 업로드 직후 형식을 따로 검사해 걸러냅니다.
Q. "2048로 축소 후 생성" 버튼을 누르면 정확히 뭐가 바뀌나요
긴 변이 2048px 이하가 되도록 원본 비율을 유지해 축소한 뒤, 그 축소본을 새 원본으로 등록합니다. 축소가 끝나면 실제로 줄어든 가로×세로 값이 안내 문구로 뜨고, 이후 미리보기·생성·다운로드는 전부 이 축소본을 기준으로 진행됩니다.
이 도구는 설치 없이 브라우저에서 바로 실행됩니다. 화면이 이 안내에 머물러 있다면 JavaScript를 활성화한 브라우저로 접속해 주세요.