Show GN: FBO 파티클 데모 - Three.js로 구현한 GPU 파티클 데모

2 weeks ago 21

Three.js (React Three Fiber) 와 셰이더 코드를 작성하여 구현한 FBO (Framebuffer Object) 파티클 데모입니다.

FBO (Framebuffer Object)
- GPU 연산 결과를 texture 형태로 저장하고, 이후 연산의 입력값으로 다시 활용할 수 있게함
- GPU의 빠른 병렬 연산을 활용할 수 있어 많은 양의 데이터를 동시에 처리할 수 있게 해줌
- 많은 수의 파티클의 위치와 속도를 제어해야 할 때 활용하기 좋은 기술
파티클
- 파티클의 position과 normal은 3D object의 mesh surface에서 샘플링함
- mesh의 normal vector가 광원 방향과 많이 일치할수록 파티클을 크게 그림
- 이 파티클 간 크기의 차이를 통해 빛의 세기를 간접적으로 표현함
Ping-pong
- 두 framebuffer를 매 렌더마다 번갈아 사용하여, 이전 프레임의 연산 결과를 다음 프레임 때 활용함
- 본 데모에선 각 파티클의 이전 velocity를 이용해 파티클의 움직임에 관성 효과를 구현할 때 사용됨

소스 코드는 아래 링크에서 확인하실 수 있습니다.
https://github.com/bb-in-hoodie/bb-in-hoodie-lab/tree/main/src

Read Entire Article