눈앞에서 터지는 WebGPU 불꽃축제, 직접 만들고 감상하는 온라인 불꽃놀이 사이트

밤하늘을 수놓는 거대한 불꽃놀이를 웹에서 직접 감상하고, 또 직접 만들어볼 수 있다면 어떨까요? 이번에 소개할 사이트는 단순히 버튼을 누르면 불꽃이 터지는 작은 효과 페이지가 아닙니다. WebGPU 기반으로 구현된 3D 불꽃축제 시뮬레이션으로, 실제 대형 불꽃놀이 공연처럼 시간표에 따라 수많은 발사대가 움직이고, 다양한 색과 모양의 불꽃이 하늘과 관객 눈앞까지 퍼져 나가는 몰입형 웹 경험입니다. 고백할때 정성들여서 불꽃을 만들어 마음을 전해보세요. 문자를 불꽃으로 표시하는 불꽃이 있어서 이름을 입력하거나 하고싶은 말을 불꽃으로 표현하면 좋을거 같습니다.

 

불꽃놀이 사이트

 

처음 사이트에 들어가면 자동으로 대형 레퍼런스 불꽃놀이 쇼가 재생됩니다. 은빛 코멧이 일제히 솟아오르고, 황금빛 카무로가 밤하늘을 뒤덮으며, 마지막에는 별, 하트, 스파이럴, 웨이브 형태의 불꽃들이 관객 가까이까지 날아오는 구성을 볼 수 있습니다.

특히 이 사이트의 재미는 “감상”에서 끝나지 않는다는 점입니다.

Next-Gen WebGPU Fireworks

 

 

하단 타임라인에서 불꽃의 종류, 색상, 발사 시간, 발사 위치, 목표 지점, 파워, 입자 수, 꼬리 효과를 직접 조절할 수 있습니다. 발사대는 3D 공간에 배치할 수 있고, 불꽃은 단순한 방사형 폭발뿐 아니라 하트, 별, 나선형, 산개형, 웨이브형 등 다양한 모양으로 표현됩니다. 

 

많은 사용자들이 불꽃놀이를 구경하는 모습

 

시점도 다양합니다. 전체 무대를 내려다보는 3D 시점은 물론, 실제 관객이 된 것처럼 보는 1인칭 시점과 사용자를 뒤에서 따라가는 3인칭 시점도 지원합니다. 사용자의 크기까지 조절할 수 있어 거대한 관람자처럼 보거나, 아주 작은 관객의 눈높이에서 압도적인 불꽃을 감상하는 것도 가능합니다. 

• 온라인에서 색다른 불꽃놀이를 감상하고 싶은 사람
• 직접 불꽃놀이 쇼를 설계해보고 싶은 사람
• WebGPU와 3D 그래픽 기반 인터랙티브 웹을 좋아하는 사람
• 타임라인 기반 연출 도구나 시각 효과 제작에 관심 있는 사람
• 단순한 데모가 아니라 실제 공연처럼 구성된 웹 경험을 찾는 사람

가장 인상적인 부분은 불꽃이 하늘 멀리에서만 터지는 것이 아니라, 중간중간 관객의 눈앞 가까이까지 날아오도록 구성되어 있다는 점입니다. 꼬리를 길게 남기며 휘어지고, 꼬이고, 사방으로 흩어지는 불꽃들이 3D 공간을 가득 채워서 실제 축제 현장에 있는 듯한 느낌을 줍니다.

 

직접 새 불꽃놀이를 만들고 싶다면 처음부터 새 불꽃놀이 버튼을 누르면 됩니다. 빈 타임라인에서 시작해 나만의 발사대와 불꽃 쇼를 구성할 수 있고, 완성한 쇼는 내보내기 기능으로 저장할 수도 있습니다.

 

웹에서 이렇게까지 불꽃놀이를 입체적으로 만들고 감상할 수 있다는 점이 꽤 신선합니다. 단순한 효과 페이지를 넘어, 하나의 작은 온라인 불꽃축제 제작 도구에 가깝습니다.

 

 

Next-Gen WebGPU Fireworks

 

 

밤하늘을 직접 설계해보고 싶다면, 이 WebGPU 불꽃축제 사이트를 한 번 경험해보세요.
처음 자동 공연만 감상해도 충분히 멋지고, 타임라인을 만지기 시작하면 나만의 불꽃놀이를 만드는 재미가 꽤 오래 이어집니다.

• 1. 메인 화면
  • 가운데 WebGPU 캔버스에서 불꽃, 발사대, 무대, 관객 실루엣, 사용자 캐릭터가 함께 보입니다.
  • 처음 진입하면 대형 레퍼런스 불꽃놀이가 자동 재생되고, 실제 타임라인에도 모든 이벤트가 배치됩니다.
  • 불꽃이 눈앞에서 터지는 구도를 보려면 오른쪽 위 View 메뉴에서 First 또는 Third를 선택합니다.
  2. 오른쪽 위 View 메뉴
  • 3D는 전체 무대와 발사대를 편집하기 좋은 기본 시점입니다.
  • First는 사용자 눈높이의 1인칭 관람 시점입니다.
  • Third는 사용자 뒤에서 보는 3인칭 시점이며, 선택 즉시 이동할 수 있습니다.
  • Launchers는 발사대와 목표점 오버레이를 켜고 끕니다.
  • Guides는 목표 반구, 지면 가이드, 배치 보조선을 켜고 끕니다.
  • Character는 화면 속 사용자 캐릭터 표시를 켜고 끕니다.
  3. 사용자 시점과 이동
  • First와 Third에서 마우스 왼쪽 또는 오른쪽 버튼을 누른 채 드래그하면 시선이 움직입니다.
  • W/A/S/D 또는 방향키로 앞, 뒤, 좌, 우 이동을 합니다.
  • Shift를 누른 채 A/D 또는 좌/우 방향키를 누르면 사용자가 좌우로 회전합니다.
  • F 키를 누르면 시선과 Third 줌이 기본값으로 돌아갑니다.
  • Third에서는 마우스 휠로 카메라 거리를 조절합니다.
  4. 사용자 크기 조절
  • 3D 또는 Third에서 사용자 머리 위 중앙의 원형 핸들을 드래그하면 사용자 크기가 바뀝니다.
  • 위로 드래그하면 커지고, 아래로 드래그하면 작아집니다.
  • 크기 제한은 두지 않았으므로 아주 작은 관객 시점부터 거대한 관람자 시점까지 만들 수 있습니다.
  • Third에서 앞쪽 시선 핸들을 드래그하면 사용자가 바라보는 방향을 무대 쪽으로 맞출 수 있습니다.
  5. 발사대 오버레이
  • 화면 위 발사대 마커를 드래그하면 발사 위치가 바뀝니다.
  • 목표점 마커를 드래그하면 불꽃이 터질 위치가 바뀝니다.
  • 3D에서는 반구 가이드를 따라 높이와 깊이를 조절할 수 있습니다.
  • 왼쪽 위 Minimap은 넓은 무대에서 발사대 위치를 빠르게 확인하고 이동시키는 용도입니다.
  6. 타임라인 왼쪽 패널
  • Play/Pause는 현재 타임라인을 재생하거나 일시정지합니다.
  • Stop은 재생을 멈추고 시간을 처음으로 되돌립니다.
  • 처음부터 새 불꽃놀이 버튼은 자동 레퍼런스 쇼를 지우고 빈 타임라인에서 다시 시작합니다.
  • Loop는 쇼를 반복 재생하고, Total은 전체 길이를 초 단위로 조절합니다.
  • Snap은 이벤트를 0.5초, 0.25초 또는 자유 배치로 맞춥니다.
  • 불꽃 칩을 선택한 뒤 오른쪽 트랙 lane을 클릭하면 해당 불꽃 이벤트가 추가됩니다.
  7. 타임라인 오른쪽 편집 영역
  • 상단 눈금자를 클릭하면 재생 위치를 이동합니다.
  • 트랙 lane을 클릭하면 선택한 불꽃 이벤트가 그 시간에 추가됩니다.
  • 이벤트 블록은 드래그해서 시간과 트랙을 옮길 수 있습니다.
  • 이벤트 가장자리를 드래그하면 지속 시간을 조절합니다.
  • Ctrl/Cmd 또는 Shift를 누른 채 이벤트를 클릭하면 여러 이벤트를 함께 선택합니다.
  • Delete 또는 Backspace로 선택 이벤트를 삭제합니다.
  8. 트랙과 이벤트 상세 설정
  • 트랙 이름을 클릭하면 이름을 직접 바꿀 수 있습니다.
  • Settings에서 발사대 종류, X/Z 위치, 발사 각도, 목표 거리, 꼬리 길이, 꼬리 입자 수를 조절합니다.
  • Rect와 Hemi 값은 목표 가이드 크기를 조절합니다.
  • 이벤트를 선택하면 색상, 파워, 퍼짐, 입자 수, 지속 시간을 세밀하게 바꿀 수 있습니다.
  • Undo/Redo는 Ctrl+Z, Ctrl+Y 또는 버튼으로 사용할 수 있습니다.
  9. 저장, 불러오기, 광고
  • Export는 현재 쇼를 JSON 파일로 내보냅니다.
  • Import는 저장해 둔 JSON 쇼를 다시 불러옵니다.
  • Minimize는 타임라인을 접어서 화면을 넓게 봅니다.
  • 광고의 X 버튼은 원형 진행 표시가 약 5초간 찬 뒤 누를 수 있습니다.
  10. 불꽃 이벤트 속성 설명
  • Name: 타임라인 블록에 표시되는 이름입니다. 연출 구간을 알아보기 쉽게 적어두면 편집이 편합니다.
  • Time: 불꽃이 발사되는 시점입니다. 타임라인의 현재 초 단위 위치와 연결됩니다.
  • Color: 폭발 입자의 기본 색상입니다. 일부 효과는 이 색을 바탕으로 밝기와 깜빡임이 변형됩니다.
  • Type: 불꽃의 형태입니다. Peony, Willow, Ring, Text Firework 같은 효과 종류를 바꿉니다.
  • Text: Text Firework 전용 문구입니다. 입력한 글자 형태로 입자가 퍼집니다.
  • Duration: 발사 후 목표 지점까지 날아가는 시간입니다. 값이 길수록 궤적이 느리고 길게 보입니다.
  • Lane Y: 같은 트랙 안에서 이벤트 블록의 세로 위치입니다. 여러 이벤트를 보기 좋게 분리할 때 사용합니다.
  • Power: 폭발 세기입니다. 값이 클수록 입자가 더 멀리 퍼지고 텍스트 불꽃도 크게 전개됩니다.
  • Particles: 생성되는 입자 수입니다. 값이 클수록 풍성하지만 성능 부담도 커질 수 있습니다.
  • Spread: 퍼지는 각도입니다. 낮추면 방향성이 강해지고, 360도에 가까울수록 사방으로 퍼집니다.
  11. 발사대 속성 설명
  • Launcher Type: 발사대의 궤적 성격입니다. Mortar는 기본형, Rail은 직선적, Fan은 넓고 장식적인 꼬리를 만듭니다.
  • Launcher X: 발사대의 좌우 위치입니다. 여러 발사대를 배치해 무대 폭을 넓힐 수 있습니다.
  • Launch Angle: 목표 지점을 직접 지정하지 않았을 때 쓰는 발사 각도입니다.
  • Line Length: 발사대에서 목표 지점까지의 기본 거리입니다. 궤적 길이와 폭발 위치에 영향을 줍니다.
  • Z Depth: 3D 공간에서 앞뒤 깊이 위치입니다. 대각선, 앞뒤 이동 연출을 만들 때 중요합니다.
  • Projectile Arc: 발사 궤적의 포물선 높이입니다. 값이 클수록 더 크게 솟아오릅니다.
  • Trail Power: 날아가는 동안 남는 꼬리 불꽃의 세기입니다.
  • Trail Particles: 꼬리 불꽃 입자 수입니다. 값이 클수록 궤적이 두껍고 밝아집니다.
  • Guide Rectangle Size: 바닥 가이드라인 표시 크기입니다. 넓은 무대 배치 확인에 사용합니다.
  • Hemisphere Size: 각 발사대의 목표 반구 크기입니다. launcher-target이 이동 가능한 범위를 정합니다.
  12. 불꽃 종류 설명
  • Peony: 기본적인 둥근 구형 폭발입니다. 오프닝이나 중심 포인트에 쓰기 좋습니다.
  • Chrysanthemum: Peony보다 풍성하고 오래 퍼지는 큰 구형 폭발입니다. 메인 하이라이트에 어울립니다.
  • Dahlia: 입자가 크고 묵직하게 퍼지는 꽃 모양 폭발입니다. 적은 수로도 존재감이 큽니다.
  • Willow: 금빛 가지가 아래로 길게 흘러내리는 잔상형 불꽃입니다. 느린 장면과 피날레에 좋습니다.
  • Palm: 야자수처럼 굵은 줄기가 바깥으로 뻗는 불꽃입니다. 발사 방향이 또렷하게 보입니다.
  • Waterfall: 입자가 아래로 쏟아지는 폭포형 효과입니다. 높은 위치에서 터뜨리면 가장 잘 보입니다.
  • Ring: 원형 고리로 퍼지는 불꽃입니다. 대칭적인 패턴이나 리듬 포인트에 적합합니다.
  • Crossette: 십자 방향으로 갈라지는 짧고 날카로운 폭발입니다. 빠른 박자에 잘 맞습니다.
  • Spider: 길고 얇은 다리가 사방으로 뻗는 폭발입니다. 넓은 공간을 채울 때 좋습니다.
  • Strobe: 밝게 깜빡이는 입자가 남는 점멸 효과입니다. 어두운 장면에서 강조용으로 좋습니다.
  • Crackle: 작고 많은 입자가 부서지듯 터지는 크랙 효과입니다. 마무리나 보조 폭발에 어울립니다.
  • Whistler: 휘어지는 꼬리와 밝은 흔적이 있는 이동감 있는 효과입니다. 궤적 강조에 좋습니다.
  • Star: 별 모양 윤곽으로 퍼지는 불꽃입니다. 상징적인 포인트나 장식용 이벤트에 적합합니다.
  • Heart: 하트 형태로 터지는 불꽃입니다. 특정 순간을 감성적으로 강조할 때 사용합니다.
  • Spiral: 나선형으로 감기며 퍼지는 효과입니다. 좌우 이동이나 회전감 있는 장면에 잘 맞습니다.
  • Wave: 물결처럼 흔들리며 퍼지는 불꽃입니다. 전후좌우 방향 이동을 부드럽게 연결합니다.
  • Helix: 여러 가닥이 꼬이는 나선 궤적 효과입니다. 3D 깊이감과 입체감을 보여주기 좋습니다.
  • Scatter: 여러 방향으로 빠르게 흩어지는 폭발입니다. 화면을 넓게 채우거나 전환감을 줄 때 좋습니다.
  • Vortex: 소용돌이처럼 말려 들어가는 입체 폭발입니다. 큰 무대의 중심 효과로 쓰기 좋습니다.
  • Text Firework: 선택한 이벤트의 Text 값 그대로 글자 모양으로 터집니다. 속성 패널에서 문구를 바꿀 수 있습니다.

불꽃축제 모습

 

Next-Gen WebGPU Fireworks