스마트 셰이더 아틀라스 메이커 - 애니메이션 PNG 아틀라스 베이커

스마트 셰이더 아틀라스 메이커는 3D 메시와 재질 템플릿을 바꿔 보며 색감과 움직임을 비교하고, 그 결과를 게임 UI·이펙트용 PNG 텍스처 아틀라스로 저장하는 브라우저 도구입니다. GLB/GLTF 모델과 JSON 재질 템플릿을 선택한 뒤 라이브 파라미터를 움직이면 중앙 3D 프리뷰가 즉시 갱신되며, 현재 설정 그대로 프레임 시퀀스를 베이크할 수 있습니다.

실제 제공 기능

텍스처 라이브러리와 재질 비교

• Checker, Tech Grid, Energy Stripes, Lava Noise 기본 텍스처를 제공합니다.
• PNG·JPEG·WebP 이미지를 텍스처 라이브러리에 추가할 수 있습니다.
• 선택한 텍스처는 GLSL의 uTexture sampler에 연결되어 중앙 3D 프리뷰에 즉시 반영됩니다.

3D 메시와 사용자 텍스처 등록

• 업로드 전에도 Sphere, Torus Knot, Teapot 데모 메시를 골라 재질과 아틀라스 베이크를 바로 확인할 수 있습니다.
• GLB 또는 자체 리소스를 포함한 GLTF 파일을 업로드해 프리뷰 모델을 교체할 수 있습니다.
• PNG·JPEG·WebP 파일을 업로드해 현재 세션의 텍스처 라이브러리에 추가할 수 있습니다.

GLSL 셰이더 템플릿 편집

• Energy Flow, Molten Core, Ion Plasma 프래그먼트 셰이더 파일을 기본 템플릿으로 제공합니다.
• 앱 안의 GLSL 편집기에 코드를 직접 수정하고 APPLY SHADER로 현재 3D 메시에서 바로 확인할 수 있습니다.
• .frag 또는 .glsl 파일을 불러오고, 편집한 프래그먼트를 다시 .frag 파일로 저장할 수 있습니다.
• 셰이더의 uniform float과 색상용 uniform vec3를 읽어 라이브 파라미터 UI를 자동으로 구성합니다.
• // @param uName label="표시명" min=0 max=1 step=0.01 주석으로 슬라이더의 이름과 범위를 지정할 수 있습니다.

실시간 라이브 조절과 프리뷰

• 애니메이션 속도, 발광량, 웨이브 왜곡, 패턴 크기를 슬라이더로 조절합니다.
• 재생·일시정지·루프 처음으로 이동과 CALM, PULSE, GLITCH 프리셋을 지원합니다.
• 프리뷰를 마우스 또는 터치로 드래그해 구도를 바꿔 볼 수 있으며, 좁은 화면에서는 패널이 세로로 재배치됩니다.

PNG 아틀라스와 JSON 메타데이터 내보내기

• 프레임 크기(128·256·512px), 행·열, 루프 시간을 지정해 애니메이션 프레임을 한 장의 PNG 아틀라스로 생성합니다.
• 각 셀은 루프 구간에 균등하게 배치되므로 스프라이트 애니메이션 프로토타입에 사용할 수 있습니다.
• JSON 파일에는 프레임 크기·개수·행·열·루프 시간·FPS·현재 파라미터가 기록됩니다.

대상 사용자와 활용 사례

게임 UI·이펙트의 색과 움직임 방향을 검토하는 프론트엔드 개발자, 프로토타이핑 중인 게임 개발자, 재질 스타일을 협의하는 디자이너에게 적합합니다. 예를 들어 능력 아이콘의 발광 강도나 SF 배경의 흐름 속도를 회의 중 빠르게 비교한 뒤, 4×2 프레임 PNG 아틀라스와 JSON 정보를 내려받아 프로토타입에 연결하거나 프리뷰를 공유할 수 있습니다.

사용 방법

1. 왼쪽 ATLAS LIBRARY에서 재질 타일을 선택합니다.
2. 오른쪽 LIVE PARAMETERS 슬라이더 또는 프리셋으로 결과를 조절합니다.
3. 중앙 프리뷰를 드래그해 구도를 확인하고, PAUSE 또는 다시 시작 버튼으로 시간을 제어합니다.
4. ATLAS BAKE & EXPORT에서 프레임 크기, 열, 행, 루프 시간을 설정합니다.
5. BAKE ATLAS PNG를 눌러 텍스처 아틀라스를 저장하고, JSON META로 프레임 정보를 함께 저장합니다.

제한 사항

이 앱은 메시 기반 GLSL 재질 템플릿을 브라우저에서 렌더링·베이크하는 도구이며, HLSL 코드와 Unity·Unreal 전용 프로젝트 파일 내보내기는 제공하지 않습니다. 텍스처를 쓰려는 프래그먼트는 uniform sampler2D uTexture와 varying vec2 vUv를 선언해야 하며, 외부 텍스처나 별도 바이너리에 의존하는 GLTF는 파일 하나로 구성된 GLB보다 불러오기 실패 가능성이 높습니다.

FAQ

모바일에서도 조작할 수 있나요?

네. 슬라이더와 버튼은 터치 입력을 지원하며, 프리뷰는 손가락 드래그로 이동할 수 있습니다.

내 3D 모델과 재질 템플릿을 등록할 수 있나요?

네. 왼쪽 라이브러리에서 GLB/GLTF 메시와 JSON 재질 템플릿을 선택해 등록할 수 있습니다. JSON 템플릿의 예시 파일도 앱에서 내려받을 수 있습니다.

조절한 재질을 아틀라스 PNG로 저장할 수 있나요?

네. ATLAS BAKE & EXPORT에서 프레임 구성을 정한 뒤 BAKE ATLAS PNG를 누르면 한 장의 스프라이트 아틀라스로 저장됩니다. 상단 PREVIEW 버튼은 현재 프리뷰 한 장만 저장합니다.

JSON 파일에는 무엇이 들어가나요?

프레임 크기, 행·열, 프레임 개수, 루프 시간, FPS, 선택한 템플릿과 현재 파라미터가 들어갑니다. 편집한 셰이더 코드는 별도의 .frag 다운로드 버튼으로 저장합니다.