제작자: Jared Liu
라이브 체험 프로젝트 소개
Planet Maker는 브라우저에서 실행되는 오프라인 우선 3D 행성 편집기입니다. 수성부터 달까지 9개 천체 중 하나를 선택하거나 자체 2:1 맵을 업로드해 새 행성을 만들고, 지형의 높낮이를 조형하고 구름과 대기를 조절하며 태양 방향을 정한 뒤 3D 오브젝트, 핀 마커, 빌보드 텍스트를 구면에 배치할 수 있습니다. 모든 요소가 곡면에 맞는 방향으로 놓입니다.
가벼운 CC0 모델 20개와 Tripo 제작 진입점을 내장했습니다. Tripo에서 사용자 지정 모델을 생성하고 GLB를 업로드한 뒤 구면을 클릭하면 배치됩니다. 모든 데이터는 브라우저 안에 머물며 계정과 백엔드가 필요 없습니다. 완성한 행성은 PNG 스냅샷, GLB 장면 또는 다시 편집할 수 있는 .planet.json 프로젝트로 내보낼 수 있습니다. PWA로 설치하고 오프라인 라이브러리를 다운로드하면 인터넷 연결 없이도 계속 제작할 수 있습니다.
체험 포인트
- 수성부터 달까지 9개 천체에서 시작하거나 원하는 이미지를 업로드하세요. 이미지는 로컬에서 2:1 등장방형 표면 맵으로 잘립니다
- 표면 높낮이, 거칠기, 구름, 대기, 자동 회전, 태양 방향을 모두 슬라이더로 조절할 수 있습니다
- CC0 모델 20개를 내장했습니다. Tripo로 사용자 지정 모델을 생성하고 GLB를 업로드한 뒤 구면을 클릭하면 항상 표면에 밀착된 방향으로 배치됩니다
- PNG 스냅샷, GLB 장면 또는 다시 편집할 수 있는 .planet.json 프로젝트를 클릭 한 번으로 내보낼 수 있습니다. PWA로 설치하면 완전한 오프라인 환경에서도 계속 제작할 수 있습니다
기술 분석
GLB 오브젝트 파이프라인 · Tripo 결과물을 구면에 바로 배치
오브젝트 패널에는 Tripo 제작 진입점이 내장되어 있습니다. Tripo에서 사용자 지정 모델을 생성하고 GLB를 업로드하면 바로 사용할 수 있습니다. 번들로 제공되는 CC0 에셋 20개를 포함한 모든 GLB는 먼저 Box3 바운딩 박스를 기준으로 정규화됩니다. 중앙을 맞추고 밑면을 원점에 고정하며 가장 긴 변을 기준으로 균일하게 스케일링합니다. 배치할 때는 구면 좌표를 위치와 쿼터니언으로 변환하므로 어느 위도에서든 클릭 한 번으로 오브젝트를 지면에 밀착시킬 수 있습니다.
행성 렌더링 · 텍스처 한 장과 물리 기반 재질
행성 전체는 단일 2:1 맵으로 동작합니다. meshPhysicalMaterial이 이를 컬러 맵과 범프 맵으로 함께 사용하며 bumpScale이 지형 높낮이 슬라이더가 됩니다. 구름은 alphaMap을 적용한 별도 셸에 두고(금성은 불투명한 예외 처리), 대기는 가산 합성 BackSide 발광 셸로 구성하며 토성에는 ringGeometry를 추가합니다. 태양의 방위각과 고도가 방향광을 제어하고 그림자도 이를 따라갑니다.
사용자 지정 표면 · 전 과정 로컬 처리
업로드한 이미지는 서버를 전혀 거치지 않습니다. createImageBitmap으로 파일을 읽고 중앙 기준 2:1로 자른 뒤 너비를 2048px로 제한하고, canvas에서 webp로 인코딩해 localStorage에 저장합니다. 업로드한 사용자 지정 GLB는 메모리의 objectURL을 사용하며 의도적으로 프로젝트 JSON에는 포함하지 않습니다. 계정도 백엔드도 없으며 프로젝트는 브라우저 데이터와 함께 저장됩니다.
성능과 오프라인 · 온디맨드 렌더링 + PWA
frameloop은 필요할 때만 실행됩니다. 자동 회전을 끄면 demand 모드로 전환되고 탭이 숨겨지면 완전히 멈추며, 부하가 높을 때는 dpr을 자동으로 낮춥니다. vite-plugin-pwa가 앱 셸과 초기 에셋을 미리 캐시하고, 내보내기 패널의 ‘오프라인 라이브러리 다운로드’가 행성 9개와 모델 20개를 모두 캐시하므로 인터넷 연결 없이도 행성 제작을 계속할 수 있습니다.
