WebGL & WebGPU
Unity Technologies
서론
회사를 다니다 보니 "투자대비 효율"에 대한 중요성을 많이 느꼈다. 인더스트리에서 유니티를 사용해서 개발하는 것의 가장 큰 장점은... Web이 아닐까? WebGL과 WebGPU에 관한 이야기가 많아서 한번 진중하게 Web에 대해 공부하고 그 내용을 정리해 보고자 한다.
From WebGL to WebGPU - François Beaufort
From WebGL to WebGPU - Chrome for Developers
Learn some tips for WebGL developers who are migrating to WebGPU.
developer.chrome.com
WebGL과 WebGPU는 기본적인 개념에서 비슷하다. WebGL도 GPU를 사용해서 쉐이더를 호출할 수 있는데 vertex 그리고 fragment shader만 지원하는 반면 WebGPU의 경우 compute shaders도 지원한다.
- 여기서 몇가지 개념을 짚고 가려고 한다. Vertex shaders란 오브젝트의 위치 그리고 카메라, 프로젝션 등을 계산할 수 있다. 오브젝트가 어떻게 위치하고 조작되는지 계산하는 쉐이더. fragment shaders란 Vertex Shader 다음에 오는 개념으로 화면에 어떻게 디스플레이 될지를 결정하고 각 픽셀에 색상, 라이팅, 텍스쳐 효과를 추가한다. 쉽게 이야기 하면 어떻게 3D 오브젝트를 2D에 보일지 계산한다 (Perspective 즉 원근감 같은 개념)
- 여기까지 이야기 들어보면 기본적으로 위의 Vertex Shaders 그리고 Fragment Shaders만 사용하면 기본적인 표현은 무리없이 가능할 것으로 이해가 된다.
- WebGL은 Global State를 사용한다.이는 협업 및 공유하는 과정에서 쉽게 fragile 되는 단점이 있다.
- WebGPU은 stateless한 api 이기 때문에 Global State를 사용하지 않는다. 따라서 이전 WebGL에서 발생했던 문제인 공유하는 과정에서 fragile 된다는 단점을 보완할 수 있다.
- WebGL 에서 API를 호출하면 동기로 통신이 진행되는데 이 경우 bubble하는 문제가 발생한다. 이러한 문제를 해결하기 위해 WebGPU는 async로 진행이됨. (이전에 Jorldy에서 본 sync, Async 차이)
- Compute Shader는 WebGL이 아닌 WebGPU에서만 사용이 가능하다. 사실상 가장 큰 차이점.
- Video Frame processing을 예시로 설명하는데 제한된 병렬에 대해서 이야기 한다. 사실 성능과 관련해서는 크게 와닿지 않아서 않음.
- WebGPU를 사용할 때 requestDevice()를 사용해야 함. 개발자에게 직접 하드웨어 성능을 선언하게 함으로써 보다 명확함.
- WebGPU의 Canvas는 Multi Sample texture를 제공할 수 있음. 이 보다 눈에 들어온 것은 WebGL브라우저의 경우 페이지에 캔버스 개수 제한이 있다. 본문에 따르면 크롬과 사파리는 16개의 캔버스 제한이 있다고 이야기 하고 있음. (Firefox는 200개) WebGPU는 제한이 없다.
- WebGL에서 버퍼와 텍스쳐를 만들고 이를 바꿀 수 있지만 WebGPU는 이러한 부분이 불가능함. 컨텐츠만 수정이 가능하다 -> 이 부분 확인해 볼 것
이 부분을 보면서 가장 궁금한 점은 "어떠한 프로젝트 (상황)에서 WebGL을 사용하고 어떠한 상황에서 WebGPU를 사용해야 하는가?'이다. 해당 부분에 대한 궁금증이 해결되지 않았음으로 다음의 글을 더 보았다.
WebGPU... better than WebGL? - AI williams
WebGPU… Better Than WebGL?
As the browser becomes more like an operating system, we are seeing more deep features being built into them. For example, you can now do a form of assembly language for the browser. Sophisticated …
hackaday.com
결론
글을 읽다보니 느꼈던 점이... WebGPU 자체의 구현도 문제이지만 브라우저 단에서 최적화 또는 적절하게 사용이 되게 업데이트가 필요한 부분으로 확인했다. Chrome의 경우 올해부터 WebGPU관련해서 베타를 시작하고 기능을 추가하는 것으로 확인하였는데 (아티클) 아직 갈 길이 먼 것 같다. 레이더 안에 넣어놓고 계속 업데이트 해야 할 듯.
참고자료
#1 From WebGL to WebGPU - François Beaufort
#2 WebGPU... better than WebGL? - AI Williams
댓글