파티클 갤럭시 셰이더 디자인

세 개의 나선 팔, 한 번의 포인트 드로

Particle Galaxy는 어둡고 거의 비어 있는 캔버스와 희미한 파티클의 넓은 필드를 중심으로 한 OpenDesign 공식 예제입니다. 제목 “Fifty thousand points, one draw call.”은 기술적 전제를 인터페이스 뒤에 숨기지 않고 시각 아이덴티티의 일부로 삼습니다.

파티클 필드와 좌측 하단에 고정된 제목은 하나의 뷰포트를 공유하며, 헤드라인이 스크롤 아래의 별도 섹션으로 나뉘지 않습니다. 희미한 초록색, 파란색, 옅은 색 포인트가 세 팔 사이에 넓은 어두운 틈을 남깁니다. 시각적 트레이드오프는 분명합니다. 절제된 필드는 밝은 글자 옆에서 조용하게 느껴지지만, 대비가 낮아 전체 크기 이미지를 가까이 봐야 합니다.

이 디자인이 어울리는 곳

이 디자인은 크리에이티브 코딩 랜딩 장면, 인터랙티브 기술 쇼케이스, 아트 디렉션이 들어간 WebGL 스터디에 적합합니다. 비주얼 자체가 주제이고 보조 카피를 짧게 유지할 수 있을 때 가치가 가장 큽니다.

고정된 컨트롤이 없어 변화하는 파티클 필드에 시선이 집중됩니다. 하지만 그 절제는 발견 가능성을 제한하기도 합니다. 제공된 마크업에는 작성된 컨트롤이 없으므로, 이 디자인은 명시적인 인터랙션 단서 대신 모션, 타이포그래피, 간결한 통계 블록으로 소통합니다.

구성이 작동하는 방식

우측 상단 블록에는 50,000 POINTS, 1 DRAW CALL, 그리고 변하는 FPS 추정치가 표시됩니다. 버텍스 셰이더는 gl_VertexID에서 포인트 위치를 도출해 세 팔에 분배하고, 각속도를 달리해 안쪽 포인트가 더 빠르게 회전하게 합니다. 고정된 기울기와 천천히 변하는 전체 회전이 원반의 원근감을 만듭니다. 부드러운 포인트 스프라이트와 가산 혼합이 초록색, 시안색, 옅은 색 파티클에 빛나는 느낌을 줍니다.

통계는 큰 흰색 숫자와 자간이 넓은 작은 라벨을 쓰는 반면, 작품은 훨씬 대비가 낮은 초록색, 파란색, 옅은 색 파티클을 씁니다. 이 분리 덕분에 메타데이터는 갤럭시와 경쟁하지 않으면서도 쉽게 훑어볼 수 있습니다. 동시에 지각상의 트레이드오프도 생깁니다. 성능 블록은 즉시 읽히지만, 파티클 팔은 더 오래 보아야 하고 적절한 디스플레이 대비가 필요합니다.

캡처에는 서로 다른 FPS 값이 표시되지만 포인트 수와 드로 콜 라벨은 동일합니다. 이 차이로 인해 FPS 필드는 기기 전반의 안정적인 성능 주장이 아니라 변하는 로컬 표시 상태로 읽힙니다.

기능의 경계

WebGL2 소스는 N = 50,000을 정의하고 렌더링되는 프레임마다 POINTS로 gl.drawArrays를 한 번 호출합니다. 파티클 위치는 CPU 위치 버퍼를 갱신하지 않고 버텍스 셰이더에서 계산됩니다. 설정, 타이밍 유니폼, 크기 조정, 드로잉은 여전히 메인 스레드가 처리합니다. 포인터, 키보드, 카메라 조작, 매개변수 컨트롤은 없습니다. 이는 갤럭시처럼 보이는 프로시저럴 비주얼이며 과학적인 중력 시뮬레이션이 아닙니다.

소스 주석은 60fps를 주장하지만, 개별 정지 캡처와 로컬 FPS 카운터만으로는 성능이 보장된다고 할 수 없습니다. 또한 프로덕션 배포, 연결된 서비스, 과거의 생성 과정도 입증하지 않습니다. 포인트 수와 드로 콜 수는 코드로 확인된 사실이고, 프레임 레이트 수치는 환경에 따라 달라지는 관찰값입니다.

카운터가 설명하는 것

포인트 수 표시는 설정된 N 값에서 나오며, 드로 콜 라벨은 렌더 루프의 단일 POINTS 드로와 일치합니다. FPS 값은 약 반 초 구간에 걸친 requestAnimationFrame 주기를 추정한 것입니다. 이 의미들을 분리해 두면 유용한 기술적 맥락을 유지하면서도 작품을 근거 없는 벤치마크로 만들지 않습니다.