WebGPU 은하 시뮬레이션
webgpu
- WebGPU
- 컴퓨트 셰이더
- N-body
- GPGPU
- 시뮬레이션
코드
1<!DOCTYPE html>
2<html lang="ko">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>WebGPU 은하 시뮬레이션</title>
7 <link rel="stylesheet" href="./style.css" />
8 </head>
9 <body>
10 <canvas id="gpu">WebGPU 은하 시뮬레이션 데모</canvas>
11 <p id="fallback"></p>
12 <div id="hint">드래그로 궤도 회전 · 휠로 거리 조절</div>
13 <script src="./script.js"></script>
14 </body>
15</html>
16아이디어
은하의 별들은 서로를 끌어당긴다. 별 4,096개 각각이 나머지 모든 별과 중심 질량으로부터 받는 중력을 매 프레임 적분한다. CPU에는 버거운 N²(약 1,700만) 연산을 WebGPU 컴퓨트 셰이더가 GPU에서 병렬로 처리한다.
핵심 코드
컴퓨트 스레드 하나가 별 하나를 맡아, 나머지 전부와의 힘을 합산한다.
1@compute @workgroup_size(64) 2fn main(@builtin(global_invocation_id) gid: vec3<u32>) { 3 let i = gid.x; 4 var force = vec3<f32>(0.0); 5 for (var j: u32 = 0u; j < COUNT; j = j + 1u) { 6 let d = posIn[j].xyz - posIn[i].xyz; 7 let r2 = dot(d, d) + P.soft; 8 force += d * (P.starMass / (r2 * sqrt(r2))); 9 } 10 // ...중심 질량 + 속도·위치 적분 11}
위치 버퍼를 핑퐁으로 교체해 읽기/쓰기 충돌을 막고, 갱신된 별을 인스턴스드 빌보드 + 가산 블렌딩으로 그려 발광하는 은하를 만든다.
인터랙션
드래그로 은하를 궤도 회전, 휠로 거리 조절. 가만히 두면 천천히 돈다.
WebGPU
WebGPU 미지원 브라우저에서는 안내 메시지를 보여준다. 최신 Chrome·Edge, Safari 18 이상에서 동작한다.