제작자: 希彼赫
라이브 체험 프로젝트 소개
Bloom은 브라우저에서 실행되는 실시간 꽃밭입니다. 마우스를 움직이거나 카메라를 켜고 양손으로 핀치 제스처를 하면, 지나간 자리를 따라 꽃의 물결이 피어납니다.
꽃은 원격으로 불러온 3D 꽃 모델을 바탕으로 실시간 렌더링되며, 영향 반경, 개화 속도, 광채, 꽃 크기, 밀도, 물결 속도를 조절할 수 있습니다. 즐길 수 있는 인터랙티브 작품이자 3D 에셋의 실시간 성능을 검증하는 실험장입니다.
체험 포인트
- 마우스를 움직이면 지나간 자리를 따라 꽃의 물결이 피어납니다
- 드래그로 시점을 회전하고 스크롤로 확대·축소해 어느 각도에서든 꽃밭을 감상할 수 있습니다
- 카메라를 켜고 핀치 제스처를 두 번 하면 꽃밭 전체가 한꺼번에 피어납니다
- 광채, 밀도, 물결 속도는 물론 꽃별 크기와 채도까지 조절할 수 있으며, H 키를 누르면 UI를 숨기고 깔끔한 화면을 녹화할 수 있습니다
기술 분석
3D 에셋 · Tripo 텍스트 투 3D
들판의 여섯 가지 꽃 — 흰 꽃, 노란 꽃, 데이지, 보라 꽃, 파란 꽃, 빨간 꽃 — 은 전부 Tripo 텍스트 투 3D로 바로 생성한 것입니다. 프롬프트 한 줄이면 PBR 머티리얼이 입혀진 GLB 파일이 돌아오죠. 꽃 하나의 폴리곤은 2,000–8,000 삼각형으로 잡았는데, 미적인 욕심 때문이 아니라 화면에 5천 송이 가까이 심어야 하기 때문 — 모델이 가벼울수록 프레임이 안정적입니다.
모든 꽃 모델은 같은 규약으로 출력합니다: 정면은 +Z, 바닥은 원점, 높이는 약 1유닛. 덕분에 코드가 어떤 꽃도 특별 취급할 필요가 없고, 새 꽃으로 갈아 끼워도 그대로 돌아갑니다.
수천 송이를 한 화면에 · InstancedMesh
브라우저에서 수천 송이를 동시에 피우는 비결은 Three.js의 InstancedMesh입니다. 종마다 지오메트리와 머티리얼을 하나씩만 두고 복제는 인스턴싱에 맡깁니다 — 기본 설정으로 전체 약 4,900송이, 종 하나당 draw call 한 번이라 부담이 생각보다 훨씬 적습니다.
개화 애니메이션도 모델 자체는 건드리지 않습니다. instanceMatrix의 스케일 값을 인스턴스별로 갱신하면, 꽃마다 땅에 붙은 새싹에서 활짝 핀 모습까지 자라납니다.
개화 물결 · 레이캐스팅 + 방사형 파면
마우스가 지나가면 Raycaster가 커서 위치를 풀밭에 투영하고, 그 지점이 개화 물결의 시작점이 됩니다. 각 꽃은 시작점에서 자기가 얼마나 떨어져 있는지만 보고 언제 필지 정합니다 — 가까운 꽃부터, 먼 꽃은 나중에, 동심원을 그리며 번져 나가죠. 복잡해 보여도 핵심은 간단한 거리 계산 한 번입니다.
제스처 입력 · MediaPipe Hands
카메라를 켜면 MediaPipe Hands가 손의 랜드마크 21개를 실시간으로 추적합니다. 코드가 지켜보는 건 딱 하나, 엄지와 검지가 맞닿았는가 — 두 번 집으면 손끝이 가리키는 자리에서 들판 전체가 한꺼번에 피어납니다. 오작동을 막기 위해 오른손만 인식합니다.
글로우 · Bloom 후처리
화면을 감싸는 몽환적인 빛무리는 UnrealBloomPass 후처리에서 옵니다. 전체 글로우는 기본 0.46 — 빛나되 타버리지 않는 지점이죠. 꽃 종류마다 글로우와 채도 조절 손잡이도 따로 남겨 두어, 분위기를 끝까지 끌어올려도 각 꽃 고유의 색은 덮이지 않습니다.
