https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=187638


엔진 개발일지 #9 - 스왑체인, 렌더패스, 파이프라인, 쉐이더, 버퍼들 - 인디 게임 개발 마이너 갤러리

https://gall.dcinside.com/mgallery/board/view/?id=game_dev&no=187380 엔진 개발일지 #8ㅎㅇㅎㅇ지난번에 윈도우 다루기에 이어서, 이번에는 디바이스(GPU)를

gall.dcinside.com



오늘은 지난 글에 이어, 각종 리소스들을 사용해 쉐이더와 데이터를 주고 받는 방법에 대해 다룰 예정임


데이터를 다루는 쉐이더 리소스로는 다음과 같이 여러가지가 있음


1. 정점 버퍼

2. 인덱스 버퍼

3. 유니폼 버퍼

4. 푸시 상수

5. 스토리지 버퍼


각각 간단히 설명하자면,


1. 정점 버터 - 정점 데이터를 저장하고 정점 쉐이더에서 사용함(각 점들의 위치)


2. 인덱스 버퍼 - 정점 버퍼의 데이터를 재사용하기 위한 인덱스들을 저장하는 버퍼 (예를 들어, 사각형을 두개의 삼각형으로 표현할 때, 공통된 정점을 재사용하는 등)


3. 유니폼 버퍼 - 여러 쉐이더들이 공유하는 상수 데이터들을 저장(변환 행렬, 조명 정보 등)


4. 푸시 상수 - 소량의 데이터를 매우 빠르게 쉐이더로 전달할 때 사용


5. 스토리지 버퍼 - 대량의 읽기/쓰기 가능한 데이터를 저장하는데 사용. 특이하게도 쉐이더 코드에서 "쓰기" 작업도 가능함


이런 여러 쉐이더 리소스들을 적절히 사용해 쉐이더와 데이터를 주고 받으며 화면에 그림을 그리는거임ㅇㅇ 얼마나 잘 쓰느냐에 따라 최적화 수준이 달라짐.


이 쉐이더 리소스들을 사용해 각종 드로잉을 하는 예제 코드들을 Vulkan과 WGPU, WebGPU, WebGL 등 각각의 플랫폼에 맞추어 작성해봄


- Vulkan: https://github.com/erenengine/eren/tree/main/eren_vulkan_render_shared/examples

- WGPU: https://github.com/erenengine/eren/tree/main/eren_render_shared/examples

- WebGPU: https://github.com/erenengine/erenjs/tree/main/eren-webgpu-render-shared/examples

- WebGL: https://github.com/erenengine/erenjs/tree/main/eren-webgl-render-shared/examples


예제를 웹에서 간단히 보려면 아래 경로에서 볼 수 있음


- WGPU 구현체: https://erenengine.github.io/eren/eren_render_shared/examples/test_uniform_buffer.html

- WebGL 구현체: https://erenengine.github.io/erenjs/eren-webgl-render-shared/examples/test-uniform-buffer/


이렇게 뱅글뱅글 돌아가는 사각형을 확인할 수 있음





각 플랫폼별 특이점으로는, WebGPU/WebGL에서는 푸시 상수를 쓸 수 없다는것...


그리고 WebGL에서는 스토리지 버퍼도 지원하지 않는 다는 것...



오늘은 여기까지... 다들 즐개발!!!


커여워