INDEPENDENT STUDY / SEPTEMBER 2026
효과에서,
상태를 가진 장면으로.
이 포트폴리오를 위해 새로 만든 그래픽 실험입니다. Rust·wgpu와 WGSL로 GPU에 위치와 속도를 유지하고, 작업을 선택할 때 목표 형상을 바꿉니다. 같은 canvas가 페이지 사이에서 이어지며 HTML 본문은 별도로 갱신됩니다.
입자의 은백색 질감과 깊이감은 Pmndrs 예제, 유기적 구조와 빈 공간은 《팬텀 가든》의 스틸을 참고했습니다. 형태와 코드, 사이트의 전환은 이 작품을 위해 새로 구성했습니다.
DATA & COMPUTE
같은 점에,
다른 도착점을.
고정된 ID와 정수 해시에서 2차원 샘플과 층 번호를 구합니다. 같은 매개변수로 접힌 막·겹친 면·열린 셸·반복 군집을 정의해 형상 사이의 대응 관계를 유지합니다.
compute shader는 목표 곡면의 접선·법선과 현재 위치·속도를 읽고 감쇠 스프링을 계산합니다. 입력은 접선 방향의 작은 힘으로 연결하고, 시간 간격에 상한을 두어 탭 복귀 시 큰 시간 차이가 시뮬레이션에 그대로 들어오지 않도록 합니다.
Position + velocityGPU storage buffer · particle당 32 bytes각 입자는 자신의 상태만 갱신합니다. 이웃 입자의 값을 읽지 않으므로 이 경로에서는 ping-pong 상태 버퍼가 필요하지 않습니다. 계산이 끝난 같은 버퍼를 렌더 단계에서 읽습니다.
RENDERING & LIFETIME
남아 있는 것은
장면과 그 상태입니다.
깊이에 따라 점의 크기와 투명도를 조절하는 sprite 기반 심도 표현입니다. 반투명 점의 겹침 비용을 줄이기 위해 입자 수와 DPR을 제한했습니다.
브라우저 탐색에서는 canvas를 유지합니다. 새 작업의 목표가 들어와도 위치·속도를 초기화하지 않습니다. 숨긴 탭에서는 루프를 중단하고, 모션 감소 설정에서는 최종 형상을 정적으로 보여줍니다.
WebGPU를 사용할 수 없으면 WebGL2 vertex morph 경로를 시도합니다. 이 호환 경로에는 compute 운동 상태와 속도 시각화가 없습니다. 두 경로 모두 실패하면 본문과 정적 대체 화면으로 열람할 수 있습니다.
SOURCE & REPRODUCTION
코드로 확인하기.
실행되는 shader와 Rust 진입점, 브라우저의 상태 제어 코드를 아래에서 확인할 수 있습니다. 표시한 수치는 현재 세션에서 수집한 값이며 과거 회사 프로젝트의 성능 데이터가 아닙니다.
