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

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를 이용해 파티클의 움직임에 관성 효과를 구현할 때 사용됨

소스 코드는 아래 링크에서 확인하실 수 있습니다.