Three.jsGLSLGameIncrementalBrowser GameSpaceIndie

STELLAR EPOCH: APHELION — 무료 브라우저 우주 인크리멘털 게임

Sloth255
Sloth255
·1 min read·64 words

장르: 우주 / 인크리멘털 게임
플랫폼: 브라우저 (모바일 & PC)
가격: 무료 — 계정 불필요
URL: https://stellar-epoch.sloth255.com/

게임 개요

STELLAR EPOCH: APHELION은 브라우저에서 완전히 실행되는 우주 테마 인크리멘털 게임입니다. 설치할 앱도 없고, 구독도 없고, 유료 벽도 없습니다. 스마트폰이든 데스크톱이든 브라우저만 있으면 바로 플레이를 시작할 수 있습니다.

제목의 Aphelion은 행성 궤도에서 태양으로부터 가장 멀리 떨어진 지점을 가리키는 천문학 용어로, 게임 세계관의 광대하고 낭만적인 규모를 담은 이름입니다.

특징

🌠 이벤트와 조건에 따라 진화하는 우주

게임 내 조건과 이벤트에 따라 우주의 상태가 동적으로 변화합니다. 플레이 방식에 따라 다양한 우주 풍경과 상황을 만나게 됩니다.

🏁 진짜 엔딩

단순한 숫자 게임이 아닙니다. STELLAR EPOCH: APHELION에는 제대로 된 결말이 기다리고 있습니다. 획득한 업그레이드와 자원 하나하나가 의미 있는 목표에 가까워지게 해주며, 도달했을 때 진짜 성취감을 느낄 수 있습니다.

📱 모바일과 PC 모두 지원

스마트폰과 데스크톱 브라우저 모두 최적화되어 있습니다. 편한 곳에서 플레이하세요 — 진행 상황은 언제나 탭 하나로 이어집니다.

🌍 다국어 지원

게임은 여러 언어를 지원하므로 전 세계 플레이어가 모국어로 즐길 수 있습니다. 글로벌 플레이어를 위해 만든 게임입니다.

🪐 Three.js로 렌더링된 3D 우주

Three.js를 사용해 우주를 생생하게 표현했습니다. 코스모스가 브라우저에서 실시간으로 렌더링되어 플레이어를 깊이 몰입시킵니다.

인크리멘털 게임이란?

인크리멘털 게임(아이들 게임 또는 클리커 게임이라고도 함)은 자원을 조금씩 축적하고, 업그레이드를 해제하며, 조작 규모를 단계적으로 확장해 나가는 장르입니다. 작은 꾸준한 진전이 엄청난 것으로 쌓여가는 성취감, 그리고 자신의 페이스로 플레이할 수 있는 점이 매력입니다.

이런 분께 추천합니다

  • 설치 없이 바로 뛰어들 수 있는 게임을 찾는 분
  • 우주 및 SF 설정을 좋아하는 분
  • 인크리멘털 / 아이들 게임 팬
  • 스토리와 진짜 엔딩이 있는 게임을 즐기는 분
  • 모바일이나 PC에서 가볍게 플레이하고 싶은 분
  • 일본어 이외의 언어로 플레이하고 싶은 분

플레이 방법

브라우저를 열고 **https://stellar-epoch.sloth255.com/**으로 이동하면 됩니다 — 그게 전부입니다!

기술적 하이라이트

전체 아키텍처

기술 용도
React + TypeScript 전체 UI
Zustand 게임 상태 관리
Vite 빌드 도구
Firebase 분석
AWS S3 + CloudFront 호스팅

게임 루프: Zustand 스토어의 tick() 함수가 useGameLoop 훅에서 일정 간격으로 호출되며, 에너지 생산, 시설, 인카운터 생성을 한 번에 처리합니다. 상태는 localStorage에 저장됩니다.

Three.js / React Three Fiber를 이용한 3D 렌더링

모든 3D 렌더링은 SpaceScene.tsx에 집중되어 있습니다. 주요 기술 포인트는 다음과 같습니다.

1. 커스텀 GLSL 셰이더 (태양, 대기, 강착 원반)

  • 태양 셰이더: 프래그먼트 셰이더는 표면 법선과 카메라 방향의 내적을 사용해 코로나 글로우 효과를 생성합니다. time 유니폼이 매 프레임 업데이트되어 펄스 애니메이션을 만듭니다. 플레어가 트리거되면 flareIntensity가 lerp()로 부드럽게 전환됩니다.
  • 대기 셰이더: 같은 법선 내적 기법을 사용해 림 부분만 색을 입히는 행성 대기(프레넬 유사 효과)를 BackSide 렌더링으로 표현합니다.
  • 블랙홀 강착 원반: 여러 겹쳐진 사인 파로 구성된 난류 패턴이 중심에서 흰빛으로 빛나다가 가장자리로 갈수록 어두운 빨간색으로 사라지는 그라데이션을 만듭니다. RingGeometry UV는 의도대로 방사형으로 매핑되도록 수동으로 수정했습니다.

2. useFrame을 이용한 프레임별 애니메이션

  • 행성 및 위성 궤도: 매 프레임 angleRef를 증가시키고, 삼각함수로 position.x/z를 계산합니다 — 물리 시뮬레이션 없이도 가벼운 구현이 가능합니다.
  • 오브젝트 참조는 useRef로 저장하여 React 리렌더링 없이 위치, 회전, 유니폼을 직접 쓸 수 있어 성능을 유지합니다.

3. InstancedMesh를 이용한 대량 오브젝트의 효율적 렌더링

THREE.Object3D 더미 오브젝트의 행렬을 InstancedMesh로 복사해 모든 인스턴스를 단일 드로우 콜로 줄입니다.

4. 파티클 시스템 (BufferGeometry)

  • 은하 나선: 5,000개 점의 Float32Array를 사전 생성합니다. 4개의 나선 팔이 균등 간격의 극좌표와 랜덤 퍼짐으로 배치되고, exp(-dist/18)로 밝기가 줄어들어 중심이 가장 밝은 자연스러운 은하를 만듭니다.
  • 초신성 효과: 속도 벡터가 userData에 내장되어, useFrame 내에서 elapsed * velocity로 위치를 계산해 파티클이 구 형태로 바깥으로 퍼져나갑니다.
  • 우주 거물: 200개 노드의 근접 그래프를 LineSegments로 렌더링하며, 거리 12 이내의 두 노드를 연결합니다.

5. 페이즈 인식 카메라 컨트롤

게임이 1∼7 단계를 거치면서 카메라의 후퇴 거리가 변화해, 태양계 → 은하 → 대규모 우주 구조로의 시각적 규모 확장을 연출합니다. 커스텀 이징 커브(1 - (1-t)^3)가 requestAnimationFrame을 통해 적용되어 부드러운 전환을 이룹니다.

6. Suspense를 이용한 점진적 텍스처 로딩

@react-three/drei의 useTexture는 텍스처를 비동기로 로드하며 React Suspense로 감쌉니다. 텍스처가 아직 로드되지 않은 동안에는 셰이더만 사용하는 폴백이 표시됩니다. hasTexture 유니폼이 GLSL에 전달되어 텍스처 있음/없음 렌더링을 동적으로 전환합니다.

7. 카메라 셰이크

레전더리 인카운터가 트리거되면 useThree()를 통한 직접 카메라 조작으로 매 프레임 카메라 위치에 랜덤 오프셋을 더하고 빼는 간단한 셰이크 효과를 구현합니다.