three.js GPGPU
예전에 공부삼아 unity로 SPH를 구현해본 적이 있다.
three.js에서는 shader를 사용하기 위해서 webGL을 사용하지만
최근 들어 three.js 에서도 compute shader 연산을 사용할 수 있다는 것을 알았다.
그래서 webGL로 three.js 상에서
파티클 시뮬레이션을 구현해보고
가능하다면 webGPU로도 성능향상이 되는지 어떤지 측정해보면 좋겠다.
three.js에서 webgpu를 지원하나?
webgpu의 출시나는 three.js를 재작년에 프로젝트로 처음 사용했었다. 한창 작년에 webgpu가 브라우저에서 정식 지원한다는 말을 들었을 때까지는 three.js가 webgl 기반 라이브러리라서, webgpu보다는 퍼
like-grapejuice.tistory.com
three.js관련 GPGPU에 대한 포스팅은 위 글을 참고해보면 알 수 있다.
unity SPH 프로젝트
이렇게 유니티 상에서 수많은 파티클로 유체 시뮬레이션을 다루는 프로젝트를 이전에 했었다.
유니티 상에서 compute shader를 이용하여 어마하게 많은 파티클 연산을 처리할 수 있었는데.
three.js에서 webGL로 셰이더를 이용해서 처리하였을 때의 효과를 알아보도록 하자.
유체 시뮬레이션 등과 같이 수많은 연산처리가 필요한 작업에서
three.js에서 shader computing 구현해보기
shader
webGL은 GLSL이라는 shader 언어를 사용하고,
webGPU는 WGSL이라는 shader 언어를 사용한다.
둘 다 shader에서 사용하는 언어이므로 구조적으로 크게 다르진 않겠지만,
어떤 점에서 차이가 있는지.
실제로 성능이 향상 될 것인지 궁금하다.
three.js webGPU renderer
하지만 webGPU로 처음부터 구현하고 three.js와 비교하는 것보다는
three.js에서 최근들어 webGPU를 사용할 수 있도록 지원하고 있는 webGPURenderer를 사용해보려고 한다.
https://discourse.threejs.org/t/how-does-threejs-render-directly-using-webgpu/38073
How does threejs render directly using WebGPU?
How does threejs render directly using WebGPU?Can you provide examples or tutorials?Especially about using glsl in WebGPU?
discourse.threejs.org
위 포스팅에 three.js 오픈소스의 최고 장로님 Mugen87 씨께서 답변을 한게 보인다.
내가 three.js 오픈소스에 contribution했을 때도 Mugen87 이분이 컨펌하고 merge 해주셨다
threejs editor 오픈소스 컨트리뷰션 해보기 (opensource contribution, merge 승인)
threejs editor languagethreejs editor의 언어 설정을 보면 아쉽게도 한국어가 없는 걸 볼 수 있다. 추가하는게 어려울 것 같지 않은데 내가 직접 해보는 건 어떨까 싶다. sidebar setting에서 language option들을
like-grapejuice.tistory.com
webGPURenderer의 경우 생각보다 구글을 뒤져봐도 정보가 거의 협소하다.
그래서 좀 큰 산을 넘게 될 것 같지만, 이번 도전을 잘 마무리한다면 어쩌면 web graphic계에서 파티클 시뮬레이션을 여러모로 활용할 수 있는 일보전진을 할 수 있을지도 모른다.
https://discourse.threejs.org/t/webgpurenderer-with-typescript/70065
WebGPURenderer with typescript
Hi everyone, I use Threejs (r167) and webGPU with typescript. When I declare my gpu renderer variable private renderer: THREE.WebGPURenderer; I see in VSCode that the WebGPURenderer class is not known : e:/Tyl/Three.js/www/WU6/node_modules/@types/three/ind
discourse.threejs.org
보다보면 webGPU renderer의 경우 webGL에서 같은 three.js 함수를 사용하지만
이걸 webGPU 모듈에서 끌어다오도록 마이그레이션 하는 방식인 것 같다.
파티클 시뮬레이션의 최적화를 위해서는 compute shader를 사용해야하는데, 이건 webGPU가 아니라
GPGPU를 사용하여 먼저 three.js에서 구현해보자.
물론.. 꽤 어려운 도전이라고 생각되기에 실패에 좌절하지 말고 일단 해보자.
