WebGPU는 브라우저에서 DirectX 12, Vulkan, Metal과 같은 최신 그래픽스 API를 사용할 수 있도록 나온 인터페이스 스펙이다.
WebGPU를 사용하면 이제 프론트엔드 개발자는 브라우저에서 CPU 자원만 사용하는것이 아닌 GPU 자원을 동시에 사용할 수 있다.
CPU 자원을 사용한다는 것은 CPU에서 돌아가는 프로그램을 짠다는 의미이고
GPU 자원을 사용한다는 것은 GPU에서 돌아가는 프로그램을 짠다는 의미이다.
어...? GPU에서 돌아가는 프로그램...?? 그건 뭐지...??
GPU에서 돌아가는 프로그램은 Shader Program 이라고 부른다.
Vertex Shader, Fragment Shader,Computed Shader
이렇게 3가지 쉐이더가 있다.
WebGPU를 사용하면 필연적으로 작성해야하는 새로운 프로그램이다.
ㅇㅋ... 쉐이더를 작성하는구나... 그럼 쉐이더 코드는 어떻게 gpu로 넘기지...?
그것은 WebGPU API를 통해서 진행한다.
WebGPU를 사용한다는 의미는, CPU - GPU 프로그래밍을 한다는 의미이고. 개발자가 순수 CPU -> GPU로 데이터를 넘기는 플로우를 작성하고 GPU -> CPU로 데이터를 가져와 처리하는 코드를 작성해야한다. 이렇게 하드웨어와 밀접한 작업을 해야하기 때문에 Low Level API 라고 부른다.
Low Level API 라고 해서 겁먹을 필요는 없다고 생각한다. 이 Low Level API 조차 사람들이 쓸 수 있게 빅테크 기업 직원들이 잘 정리해서 내놓은 것이기 때문이다.
정리
WebGPU를 사용한다는 것은 GPU 프로그래밍도 한다는 의미이다.
GPU에서 돌아가는 프로그램은 Shader 라고 부른다.
- Vertex Shader
- Fragment Shader
- Compute Shader
CPU -> GPU, GPU -> CPU 로 데이터를 넘기는 것을 WebGPU가 도와준다.GPU 프로그래밍 파이프라인
GPU는 내부적으로 위와같은 파이프라인으로 돌아간다.
input assembler (IA) -> Vertex Shader -> Fragment Shader
IA: 우리가 CPU 에서 GPU로 넘긴 데이터를 조합하는 단계이다. 이 단계에서 데이터를 Vertex Shader로 넘긴다.
Vertex Shader: 넘겨받은 데이터를 사용해서 정점을 계산한다. 계산 후 Fragment Shader로 넘긴다.
Fragment Shader: Rasterization 된 후 나온 픽셀에 대한 처리를 할때 사용하는 쉐이더이다.
전통적인 그래픽스 파이프라인은 이렇다.
흔히 GPU가 CPU보다 병렬 처리에서 유리하다! 라고 많이 들어봤을 것인데. 그 이유는
저 쉐이더들이 병렬로 여러개가 동시에 처리되기 때문이다.
쉐이더 프로그래밍을 할때 이 점을 유의하면서 프로그래밍 해야한다.
지금은 이런게 있구나! 정도로만 알고 넘어가자. 점점 익숙해질것이다.
결론
- WebGPU를 사용한다는 것은 GPU 프로그래밍을 한다는 것이다!
- GPU프로그래밍은 Shader를 사용하여 이루어진다!
- GPU는 GPU 파이프라인을 통해서 작동한다.
- GPU는 병렬로 돌아간다.
코드는 다음 장부터 작성하면서 세부적인 내용을 적도록 하겠다.
