WebGPU: 브라우저에서 구현하는 250,000개의 파티클
오늘은 50일째 되는 날입니다. 매일 새로운 기술을 처음부터 직접 만들어보는 제 시리즈의 마지막 날입니다. 마지막은 WebGPU로 마무리하고 싶었습니다.
브라우저 내부의 GPU만으로 250,000개의 파티클을 시뮬레이션했습니다.
CPU에는 몇 개의 빠른 코어가 있습니다. 반면 GPU에는 수천 개의 단순한 코어가 있습니다. CPU는 파티클을 하나씩 이동시키지만, GPU는 수천 개를 동시에 이동시킵니다.
WebGPU는 WebGL의 현대적인 후계자입니다. compute shader를 통해 브라우저가 하드웨어에 접근할 수 있게 해줍니다. 이 shader를 사용하면 GPU가 단순히 그래픽을 그리는 것을 넘어 수학 연산을 수행할 수 있습니다.
작동 원리:
• GPU를 관리할 device를 생성합니다. • 위치와 속도 같은 파티클 데이터를 담을 buffer를 생성합니다. • 데이터를 한 번 업로드한 뒤 GPU에 계속 유지합니다. • 파티클 하나를 위한 compute shader를 작성합니다. • GPU가 해당 shader를 250,000개의 모든 파티클에 동시에 실행합니다.
데이터는 GPU에 머뭅니다. CPU로 돌아가지 않고 compute 단계에서 render 단계로 바로 이동합니다. 이러한 속도 덕분에 시뮬레이션이 60fps로 실행될 수 있습니다.
WebGPU는 브라우저 내 수학 연산과 로컬 머신러닝을 위한 새로운 기반입니다. 이번 시리즈를 마무리하기에 가장 적합한 방식이었습니다.
이 여정을 함께해주셔서 감사합니다. 모든 프로젝트의 전체 아카이브는 여기서 확인하실 수 있습니다.
전체 코드: https://github.com/dev48v/webgpu-from-zero
전체 포스트: https://dev.to/dev48v/webgpu-i-simulated-250000-particles-entirely-on-the-gpu-in-the-browser-2o0f
선택 사항 학습 커뮤니티: https://dev48v.infy.uk/techfromzero.php