WebGPU에서 장치 준비와 그리기 구분하기

adapter에서 device 얻기

adapter는 사용할 GPU와 드라이버의 기능을 나타낸다. 이 adapter에 device를 요청하면 앱에서 GPU 작업에 사용할 논리적 장치를 얻는다. GPU가 사용할 데이터 저장 공간을 만드는 기능도 device가 제공한다.

다음 코드는 브라우저에서 비동기 함수 안에 넣어 실행하는 준비 예제다.

if (!navigator.gpu) {
  throw new Error("이 환경에서는 WebGPU를 사용할 수 없어.");
}

const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  throw new Error("사용 가능한 adapter를 얻지 못했어.");
}

const device = await adapter.requestDevice();

WebGPU API가 있어도 adapter를 얻지 못할 수 있고, device 요청도 실패할 수 있다. 실제 앱에서는 이 준비 단계를 오류 처리와 함께 실행한다.

준비 성공과 빈 캔버스

준비 코드만 실행하면 삼각형이 나타날지 묻는 질문에 다음과 같이 답했다.

나타나지 않아. 그리는 코드가 실행되지 않았기 때문이야.

독립된 학습 화면에서 직접 준비 버튼을 누른 뒤 device 요청: 확보 성공을 확인했다. 같은 예제를 검증한 화면에서는 adapter와 device가 모두 확보됐고, 그리기 명령을 보내지 않은 캔버스는 비어 있었다.

여기서 기억할 것

GPU 장치를 준비하는 것과 그림을 그리도록 요청하는 것은 별개의 작업이다.

준비 순서를 영어로 쓰기

첫 문장에서는 As GPU makes data storage ...로 시작했다. “만들기 위해”라는 목적을 To create ...로 바꾸고, 준비 주체와 필요를 we need to prepare로 표현했다.

To create storage for GPU data in WebGPU, we need to prepare a device first.

참고 문장을 보고 전체 문장을 다시 썼다. 재작성의 sotrage는 storage의 철자 오타로 정정했다.

다음에는 그릴 대상을 연결하기

이 첫 준비 단위에서는 device 준비와 그리기의 차이를 설명하고 실제 준비 성공을 확인했다. 이후 GPU buffer에 좌표를 전달하는 후속 학습에서 저장 공간 생성과 데이터 복사, 배열 변경 뒤 재전달의 차이를 살폈다. 삼각형 렌더링은 다음 학습으로 남아 있다.