[Starfield] 별이 중심에서 빨려나가는 하이퍼스페이스 워프 배경

한 줄 요약 - 별마다 3D 거리값(z)을 주고 매 프레임 그 거리를 줄이면, 별이 화면 중심에서 바깥으로 빨려나가는 우주 워프 배경이 됩니다.

이럴 때 필요해요

게임 로딩 화면, SF/테크 제품의 히어로 섹션, "발사/시작" 같은 순간에 속도감을 주고 싶을 때 씁니다. 별을 그냥 무작위 점으로 흩뿌리면 정적인 밤하늘이지만, 깊이(거리) 개념을 넣으면 화면이 앞으로 돌진하는 듯한 몰입감이 생깁니다.

어떻게 동작하나

1. 각 별에 화면 좌표가 아니라 3D 공간 좌표 (x, y, z)를 줍니다. z는 "카메라에서 얼마나 먼가"입니다.
2. 매 프레임 z를 조금씩 줄입니다(별이 다가옴). 화면에 찍을 때는 원근 투영 화면X = x / z + 중심을 씁니다. z가 작아질수록 같은 별이 더 빠르게 바깥으로 퍼집니다.
3. z가 눈앞까지 오면 그 별을 다시 먼 거리로 재배치합니다. 덕분에 새 객체를 만들지 않고 같은 별들을 무한히 재활용합니다.
4. 직전 거리와 현재 거리 두 위치를 선으로 이으면 빛줄기(streak)가 되고, 속도가 빠를수록 줄기가 길어집니다.

핵심은 이거예요

별을 2D 점이 아니라 "z(거리)를 가진 3D 점"으로 다루는 것 하나입니다. 이것만 이해하면 가속/streak/무한 별이 전부 z를 줄이고 z로 나누는 것에서 자연스럽게 따라 나옵니다.

놓치기 쉬운 것

• 화면을 매 프레임 완전히 지우는 대신 반투명 검정으로 덮으면 빛줄기 잔상이 남아 훨씬 빠르게 느껴집니다.
• 레티나(고해상도) 화면에서 devicePixelRatio 보정을 안 하면 가느다란 선이 뭉개집니다.
• 빠르게 움직이는 전체 화면 효과는 멀미를 유발할 수 있어, 시스템의 "동작 줄이기" 설정이 켜져 있으면 정적인 별만 보여줍니다(prefers-reduced-motion).
• requestAnimationFrame 루프는 컴포넌트가 사라질 때 반드시 취소해야 합니다.

이런 곳에 써요

• 게임/SF 서비스의 로딩 화면이나 인트로(하이퍼스페이스 점프 연출)
• 테크/우주 테마 랜딩 페이지의 풀스크린 히어로 배경