제작자: Theodore
라이브 체험 설명
Afterglow Grand Prix는 브라우저에서 바로 달릴 수 있는 아케이드 포뮬러 레이싱 게임으로, 플레이어와 AI 드라이버 다섯 명이 여섯 대의 그리드를 이룹니다. 트랙은 세 개입니다. 석양 아래의 Afterglow International(3.4 km, 14개 코너), 비에 젖은 Rain City Streets(2.4 km, 14개 코너), 그리고 싱가포르 나이트 레이스를 본뜬 시가지 서킷(4.9 km, 19개 코너)입니다. 시간대는 석양, 비 오는 밤, 맑은 밤 중에서 고르고, 랩 수와 AI 난이도(Easy, Normal, Hard, Extreme 4단계)도 직접 정할 수 있습니다.
차고에 있는 다섯 대는 저마다 핸들링이 다릅니다. 균형이 잡혀 부담 없이 고를 수 있는 AURUM GT, 폭발적으로 출발하고 코너 탈출이 가장 빠른 AURELIA, 접지력이 가장 높아 코너 중간 속도가 가장 빠른 NERINE, 드리프트의 여왕으로 부스트를 가장 빨리 충전하는 DELUSION ANGEL, 최고 속도는 가장 높지만 스티어링이 묵직한 VIRELIA입니다. 차량 선택 화면에서는 두 가지 장면을 전환할 수 있습니다. 밤의 피트 레인에 세워 둔 차들, 또는 투광 조명이 비추는 트랙을 전속력으로 달리는 내 차입니다. 드래그하면 차를 돌려 가며 볼 수 있습니다.
모든 레이스는 영화 같은 오프닝으로 시작합니다. 공중에서 그리드를 훑고, 낮은 돌리 숏으로 차량 무리 사이를 지나간 뒤, 마지막으로 내 차를 클로즈업합니다. 다섯 개의 빨간불이 꺼지면 출발입니다. 레이스 HUD는 TV 중계를 본떴습니다. 순위 타워, 앞뒤 차량과의 간격, 예상 순위와 우승 확률을 알려 주는 레이스 엔지니어가 표시되고, 추월과 패스티스트 랩에는 배너가 뜹니다. 트랙 옆 대형 스크린에서도 레이스가 실시간으로 중계됩니다. 결승선을 통과하면 체커기, 주위를 도는 카메라, 불꽃놀이가 이어지고, 마지막으로 결과 화면이 나옵니다.
드리프트가 길어질수록 풀어 주는 순간 튀어 나가는 힘이 커지고, 불꽃은 파란색에서 주황색, 다시 분홍색으로 바뀝니다. 드리프트를 하면 부스트가 충전되며, 직선 구간에서 쓸 때 가장 효과적입니다. 앞차 바로 뒤에 붙으면 슬립스트림을 탈 수 있습니다. 코스를 벗어나 연석을 넘고 잔디에 올라서면 속도가 줄고, 그래블에서는 더 느려집니다. AI 드라이버 다섯 명은 저마다 성격이 다릅니다. 직선에서는 가장 빠르지만 코너에서 실수가 잦은 드라이버, 코너링은 능숙하지만 직선에서 느린 드라이버, 그리고 방어가 유난히 거센 드라이버도 있습니다.
조작법: W는 가속, S는 브레이크 / 후진, A / D는 조향(방향키도 사용 가능). 스페이스바를 누르고 있으면 드리프트하며, 오래 누를수록 튀어 나가는 힘이 커집니다. Shift는 부스트, C는 근거리 추적·원거리 추적·콕핏 카메라 전환, R은 리셋, M은 음소거, Esc / P는 일시정지입니다. 고속에서 조향하면서 S를 짧게 누르면 차를 휙 틀어 드리프트에 들어갈 수 있습니다. 현재는 데스크톱 키보드 조작만 지원하며, 터치와 게임패드 조작은 지원하지 않습니다.
Chrome / Edge 113 이상(WebGPU)을 권장합니다. WebGPU를 지원하지 않는 브라우저에서는 자동으로 WebGL2로 전환되며, 둘 다 쓸 수 없으면 페이지에서 알려 줍니다. 트랙을 처음 불러올 때는 셰이더를 컴파일해야 하므로 조금 더 오래 걸립니다. 게임 인터페이스는 영어로 되어 있습니다.
차량과 랜드마크 · Tripo로 생성
차고에 있는 다섯 대는 아트 팀이 Tripo로 생성한 뒤, 게임에 필요한 형식으로 통일해 정리했습니다. 모든 타이어가 같은 높이에 놓이고 네 바퀴는 각각 허브를 중심으로 분리되어 있어, 레이스 중에 바퀴가 구르고 조향에 따라 방향도 바뀝니다. 서킷을 따라 늘어선 랜드마크 건물들도 참고 사진을 바탕으로 Tripo로 생성했으며, 밤이 되면 게임이 건물 창문과 1층 상점에 불을 밝힙니다.
몇 초 만에 차를 화면에 띄우기 위해 모든 차는 두 가지 버전으로 준비되어 있습니다. 차량 선택 화면은 먼저 삼각형 수가 약 10분의 1이고 텍스처가 512픽셀인 경량 대체 모델을 불러오고, 그동안 전체 모델을 백그라운드에서 내려받습니다. 진행률은 차량 선택 화면에 바로 표시되며, 준비되는 즉시 교체됩니다. 전체 모델은 Meshopt로 압축한 메시와 KTX2 텍스처를 사용하며, 텍스처는 로드할 때 GPU 네이티브 압축 형식으로 트랜스코딩되어 비디오 메모리를 아낍니다.
이 모델들을 제외한 장면의 나머지, 즉 트랙, 방호벽, 관중석, 조명 리그, 도시 블록, 관중, 하늘은 모두 코드로 생성됩니다. 싱가포르 서킷 주변의 도시는 OpenStreetMap 오픈 지도 데이터에 담긴 실제 건물 윤곽과 높이를 바탕으로 세웠고, 데이터에 없는 것은 하나도 지어내지 않았습니다. 트랙 옆 광고판의 브랜드는 모두 가상입니다.
브라우저에서 실행되는 방식
게임 엔진은 쓰지 않았습니다. three.js의 WebGPU 렌더러 위에 직접 만들었고, 머티리얼, 후처리, 빗방울 파티클을 모두 TSL 노드로 작성했기 때문에 WebGPU를 지원하지 않는 브라우저에서는 같은 코드가 자동으로 WebGL2로 전환됩니다. 게임 전체는 빌드 후 약 26 MB의 정적 웹사이트이며, 대부분은 차량과 건물 모델입니다.
야간 레이스는 조명이 생명입니다. 트랙을 따라 늘어선 LED 가로등과 네온사인은 클러스터드 라이팅으로 처리해 장면에 많은 점광원을 담을 수 있게 했습니다. 젖은 노면에는 물웅덩이 마스크, 픽셀 단위 러프니스, 평면 반사, 빗방울 파문이 적용되고, 비 자체는 컴퓨트 셰이더로 구동하는 파티클 시스템입니다. 후처리에서는 앰비언트 오클루전, 블룸, 안개, 컬러 그레이딩, 필름 그레인, 안티에일리어싱을 겹겹이 쌓고, 고속에서는 방사형 속도 블러를 더합니다.
트랙 옆 대형 스크린의 영상은 가상의 트랙사이드 카메라가 실시간으로 촬영합니다. 이 카메라는 따라가는 차보다 앞질러 자리를 잡고 차에 맞춰 패닝하며, 6프레임마다 256×144 화면을 갱신하고 랩 수 바, 순위 타워, 드라이버 자막을 겹쳐 띄웁니다. 결승선에서는 카메라가 플레이어에게 고정되어 최종 순위를 보여 줍니다.
그래픽 품질은 Low, Medium, High 세 단계이며, 렌더링 해상도, 섀도 맵 크기, 앰비언트 오클루전, 노면 반사, 남겨 두는 조명 수를 조절합니다. 모든 셰이더는 로딩 화면 뒤에서 미리 컴파일하고 결승선 불꽃놀이까지 미리 예열해 두므로, 레이스 도중 끊기는 일이 없습니다. 사운드는 Web Audio로 구동하며, 엔진, 기어 변속, 타이어, 바람, 비, 관중 소리는 모두 실시간으로 합성하고, 음악과 UI 효과음은 CC0 에셋을 사용합니다.
