WebGPU로 GPU 컴퓨팅 활용하기

저는 Safari 팀의 엔지니어 Mike라고 합니다 오늘은 WebGPU가 웹에서 병렬 컴퓨팅을 구현하는 원리를 설명드리겠습니다 WebGPU에는 WebGL의 모든 3D 그래픽 기능이 있지만 성능과 유연성이 더 뛰어납니다 최고의 웹 그래픽 선택지죠 게다가 브라우저에서 바로 범용 연산을 실행하는 유일한 수단이기도 합니다 Metal에 익숙하시다면 쉽게 사용하실 수 있을 겁니다 호출은 대부분 Metal 프레임워크와 일대일 매핑됩니다 Mac, iPhone, iPad Vision Pro와 같이 Metal을 지원하는 모든 플랫폼에서 지원되고요 웹 API이기 때문에 WebGPU 웹사이트와 웹 앱은 모든 지원 환경에서 동작합니다 Apple이 아닌 경우 API는 Metal과 유사합니다 여러분이 저수준 그래픽 프로그래밍에 익숙하지 않더라도 WebGPU를 지원하는 웹 그래픽 라이브러리로 모든 성능과 기능을 끌어낼 수 있습니다 내부에서 WebGPU를 실행하는 threeJS를 사용해서 아름다운 3D 해파리 애니메이션을 만들 수 있죠 Safari에서도 이 멋진 예시가 원활하게 실행됩니다 최신 하드웨어의 성능을 완전히 활용할 수 있도록 기초부터 WebGPU를 설계했기 때문입니다 먼저 API와 WebGPU의 Metal 매핑 방식을 알아보죠 WebGPU에 필요한 대부분의 코드를 살펴볼 수 있습니다 그 다음 GPU에서 직접 코드를 실행하는 WebGPU 셰이더 프로그램을 만드는 방법을 살펴보겠습니다 셰이딩 언어와 새로운 언어가 필요한 이유도 설명할 것입니다

먼저 기본적인 내용을 다루고 최고의 API 성능을 끌어내는 방법을 설명하겠습니다 WebGPU에 익숙하다면 특히 관심이 있으실 Apple 플랫폼에 대한 구체적인 최적화 방법을 다룹니다 그래픽 파이프라인을 살펴보며 시작해 봅시다

파이프라인은 한쪽으로 흐르는 과정과도 같습니다 시작은 이미지, 비디오 이진 데이터와 같은 콘텐츠를 로드하는 웹사이트 또는 웹 앱입니다

콘텐츠는 WebKit으로 가서 GPU에서 사용될 준비를 합니다

WebKit은 Metal 프레임워크를 호출해서 그래픽 하드웨어에서 실행할 리소스와 프로그램을 만듭니다

이제 조금 더 자세히 살펴보죠 WebGPU에서 Metal은 버퍼, 텍스처, 샘플러 세 가지 리소스를 생성합니다 WebKit은 이것들을 GPU 바인드 그룹으로 정리합니다 GPU에서 리소스를 효율적으로 사용할 수 있도록 구조적으로 그룹화하는 방식이죠 이것들은 모두 실제 GPU 리소스를 참고하는 Metal 버퍼인 인수 버퍼에 패킹됩니다 코드 문자열로 생성된 프로그램은 세 가지 주요 유형 즉 컴퓨팅, 꼭짓점, 조각 프로그램으로 컴파일됩니다 GPU에서 실행되는 실제 명령입니다 계산부터 픽셀 렌더링까지 모든 걸 할 수 있죠 파이프라인에 리소스와 프로그램이 어떻게 맞물리는지 알아봤으니 API에서 인터페이스를 어떻게 정의하는지 간략히 살펴봅시다

WebGPU는 단순 구조 API 이지만 인터페이스가 많습니다 계층 구조의 최상단에는 GPU 객체와 GPU 어댑터 인터페이스가 있습니다

WebGPU는 종종 캔버스와 함께 사용됩니다 GPUCanvasContext가 컨텍스트 쿼리로 반환됩니다

기기는 대부분의 API 호출 진입점입니다 다른 대부분의 인터페이스를 만드는 데 사용하기도 합니다

API에는 다양한 인터페이스가 있지만 몇 가지 카테고리로 단순하게 나눌 수 있습니다 텍스처, 버퍼 샘플러와 같은 리소스

리소스에 명령을 내리는 인코더 다양한 리소스를 인코더에서 어떻게 처리할지 결정하는 파이프라인 관련 리소스를 하나로 묶는 바인드 그룹 GPU 연산에 필요한 지시를 내리는 셰이더 모듈 이제 WebGPU의 전체 구조를 이해했으니 기기와 리소스 생성을 직접 보여드리면서 API 작업을 소개해 드리겠습니다

기기는 대부분의 API 호출 진입점입니다 Metal의 MTLDevice와 아주 비슷합니다

canvas 페이지가 있으면 canvas 요소를 가져옵니다 navigator.gpu request.Adapter() 어댑터를 생성하고 requestDevice를 호출해 GPU 기기를 생성합니다

WebGPU는 다양한 확장을 지원하는데 셰이더-f16 확장으로 반정밀 부동 소수점을 사용 가능합니다

메모리 대역폭이 줄어들어 성능이 향상됩니다 모든 Apple 기기에서 지원되지만 선택 기능이므로 다른 플랫폼에서 사용하기 전에 지원 여부를 확인하시기 바랍니다

configure를 호출해 기기와 컨텍스트를 설정합니다 이렇게 하면 canvas가 GPU 가용 메모리에 연결됩니다

이제 기기가 준비되었으니 리소스를 만들어 보겠습니다 WebGPU에서는 버퍼 텍스처 등을 많이 사용합니다 Metal은 MTLBuffer와 MTLTexture로 표현합니다

버퍼는 매우 유연합니다 간단한 부동 소수점 벡터부터 직접 정의한 복잡한 맞춤형 데이터까지 모든 유형의 데이터를 저장할 수 있죠 예를 들어 하나의 버퍼가 파티클 유형의 여러 인스턴스를 가질 수 있습니다 버퍼에 파티클 3개가 있다고 생각해 봅시다

createBuffer를 호출해 기기에 버퍼를 생성합니다 버퍼의 크기와 사용 모드를 전달합니다 사용 모드는 API 복잡성 없이 WebGPU의 데이터 충돌을 방지합니다

기기의 대기열 속성은 버퍼와 텍스처에 대한 작업을 수행하는 데 사용됩니다

버퍼가 생성되면 writeBuffer를 호출해 버퍼, 오프셋, JavaScript arrayBuffer를 넘깁니다

버퍼처럼 텍스처도 메모리 덩어리지만 GPU에서 특정한 텍스터 레지스터와 명령으로 처리됩니다 이미지 데이터 표현에 자주 사용되는데 1차원, 2차원 2차원 텍스처의 배열 2차원 텍스처 6개의 배열인 정육면체 맵일 수도 있고 3차원 텍스처일 수도 있습니다

device.createTexture를 호출해서 텍스처의 너비와 높이 2D 텍스처 형식, 사용 모드를 전달하면 텍스처가 생성됩니다

GPUTexture를 생성한 다음 이미지 데이터를 로드하려면 device.queue.copyExternalImageToTexture 명령으로 이미지 비트맵과 방금 만든 2D 텍스처 이미지 크기를 전달합니다

텍스처는 이미지에서 생성되고 GPU에서 이미지로 표현됩니다 기기와 리소스 생성 다음으로는 파이프라인을 생성해 보겠습니다

파이프라인은 GPU에서 사용할 텍스처와 버퍼를 지정합니다 두 가지 유형이 있습니다 꼭짓점과 조각 프로그램에 사용되는 렌더 파이프라인 컴퓨팅 프로그램에 사용되는 컴퓨팅 파이프라인 Metal의 MTLRenderPipelineState MTLComputePipelineState 객체죠

컴퓨팅 파이프라인을 생성하려면 명령을 호출하고 바인드 그룹 레이아웃이나 셰이더가 레이아웃을 생성하는 자동 상수 식별자를 전달합니다

레이아웃은 API에서 버퍼, 텍스처, 샘플러를 GPU 프로그램으로 전달하는 구조화된 방식입니다

파이프라인을 생성하려면 셰이더 모듈이 필요합니다 문자열에서 생성되죠

렌더 파이프라인은 비슷한 방식으로 생성되고 자동 레이아웃 꼭짓점 셰이더 모듈 조각 셰이더 모듈을 전달합니다

기기, 리소스 파이프라인을 생성했으니 WebGPU 애플리케이션 기본 설정이 끝났습니다

WebGPU API의 구조를 살펴보았으니 이제 셰이더의 개발 방법을 살펴보겠습니다

WGSL라는 WebGPU 셰이딩 언어로 손쉽게 웹사이트에서 GPU를 실행하는 프로그램을 작성할 수 있습니다 Apple은 WGSL 셰이딩 언어의 설계와 구현의 중추입니다 WGSL은 웹 안전을 위해 제로부터 구축되었습니다 WGSL은 꼭짓점, 조각, 컴퓨팅 세 가지 유형의 프로그램을 지원합니다

간단한 WebGPU 예제를 만드는 방법을 살펴보겠습니다 JavaScript에서 버퍼 데이터를 가져오는 꼭짓점 프로그램으로 화면에 삼각형을 그립니다 조각 프로그램은 텍스처의 각 색상과 심도 값을 계산합니다 컴퓨팅 프로그램은 일반적인 계산에 사용하는데 이 경우에서는 물리 시뮬레이션을 수행합니다

꼭짓점 프로그램은 화면에 보이는 삼각형의 위치를 계산합니다

이 예제는 삼각형 윤곽 10만 개로 만들어졌습니다

삼각형의 출력 위치는 @builtin 위치 속성으로 지정합니다

여기에는 주요 함수의 정의와 꼭짓점 셰이더 입력값이 있습니다 위치와 색상을 지정하죠 이제 조각 셰이더를 살펴봅시다

꼭짓점에서 생성한 색상을 가져와서 텍스처에 저장합니다 단순한 예제이지만 여기에 어떤 논리든 넣어서 색상과 심도 값을 계산할 수 있습니다 저장 텍스처와 버퍼에 기록하거나 원자 연산처럼 다양한 작업을 수행할 수 있습니다 WGSL은 정말 유연합니다 더 유연한 컴퓨팅 셰이더를 살펴봅시다

다른 프로그램과 마찬가지로 JavaScript 입력값인 많은 바인딩을 포함합니다

컴퓨팅 셰이더의 멋진 점은 어떤 계산이든 수행할 수 있고 결과를 버퍼에 저장했다가 다시 JavaScript 코드로 읽어들일 수 있다는 점입니다 화면에 시각화가 필요 없습니다 WebGL에서는 컴퓨팅 셰이더를 사용할 수 없었습니다 WebGPU를 새 애플리케이션에 사용해야 하는 또 하나의 이유죠

컴퓨팅 프로그램은 작업 그룹 크기로 컴퓨팅 셰이더를 실행할 그리드의 크기를 정의해야 합니다

전체 그리드의 위치를 나타내는 global_invocation_id를 씁니다 JavaScript 전달 없이도 사용할 수 있는 내장 변수입니다

컴퓨트 셰이더의 본문은 파티클 시뮬레이션을 업데이트해 중력, 속도 경과 시간을 적용합니다

원하는 모든 계산을 수행할 수 있고 GPU에서 뛰어난 성능으로 병렬 실행됩니다

파티클이 완전히 사라지면 확률 맵에서 textureLoad를 호출해서 입자를 다시 생성할 새로운 위치를 선택합니다

남은 파티클 속성은 초기값으로 재설정되고 파티클은 버퍼에 저장됩니다

이것들을 모두 합친 결과가 멋진 WebGPU 로고 애니메이션이죠 GPU의 병렬 처리 기능을 활용하면 웹에서는 할 수 없었던 크기로 임의 연산을 수행하면서 실시간 성능도 유지됩니다

멋지지 않나요?

지금까지 WebGPU 셰이더 개발에 대해 살펴봤습니다 이제 WebGPU에서 최상의 성능을 끌어내 봅시다

Apple 플랫폼에서 최상의 경험을 하려면 몇 가지를 기억해 두세요 핵심은 메모리 사용을 염두에 두는 것입니다 메모리 효율적인 데이터 유형을 사용하고 렌더링 명령을 기록한 다음 재사용하고 리소스 수를 적게 유지하세요 조금 더 자세히 알아봅시다

몇 가지 방법으로 메모리 사용량을 최소화할 수 있습니다 먼저 반정밀 부동 소수점을 사용합니다 IEEE 표준입니다 WGSL은 이 데이터 유형을 f16이라고 합니다 메모리 사용량을 크게 줄이고 성능을 높이죠 하지만 항상 실용적인 것은 아닙니다 정밀도가 줄어들어도 알고리즘이 안정적인지 확인해야 하고 최대값은 65,000보다 조금 더 큽니다 32비트 부동 소수점은 훨씬 더 큰 값을 처리하죠 특히 iOS와 visionOS는 f16이나 압축 형식으로 데이터를 저장함으로써 메모리 과부하로 인한 프로그램 종료를 예방됩니다 반정밀 부동 소수점을 사용하려면 기기 생성 과정 중과 WGSL 코드에서 활성화해야 합니다 간단한 코드 예제를 직접 보여드리겠습니다

requestDevice 호출로 shader-f16을 활성화하고 셰이더에 'enable f16' 구문을 추가합니다

f16 스칼라, 벡터 유형을 기존처럼 32비트 유형과 함께 사용할 수 있게 됩니다 데이터를 반정밀로 저장하고 바로 f32로 풀기만 해도 메모리에는 큰 도움이 되므로 메모리 과부하로 인한 앱 종료를 예방할 수 있습니다

메모리 사용을 최소화하는 또 다른 방법은 불필요한 버퍼, 텍스처를 호출하지 않는 것입니다 JavaScript에서 Metal 리소스 메모리로 데이터가 복사되기 때문이죠 인덱스 또는 간접 사용 모드로 버퍼를 업데이트하면 특히 사용량이 많아지는데 버퍼를 다시 사용하기 전에 검증을 거치기 때문입니다 버퍼는 직간접적으로 꼭짓점 버퍼로 인덱싱하는데 WebGPU는 이 버퍼의 모든 오프셋이 드로우 명령 실행 전 경계에 있는지 확인해야 합니다

필요할 때만 업데이트하세요 버퍼를 바인드 그룹에 쓰기나 읽기, 쓰기 권한으로 사용하는 경우도 마찬가지입니다 코드 예제에서 설명한 것처럼 리소스를 셰이더 내부에서 직접 작성할 게 아니라면 읽기 전용 권한이 좋습니다 리소스가 인덱스나 간접 버퍼라면 특히 더 그렇죠 이렇게만 해도 Apple 플랫폼만이 아닌 모든 모바일, 데스크톱 기기의 성능이 크게 향상됩니다 이제 렌더링 명령에 대해 더 자세히 알아보겠습니다

렌더 번들을 사용하면 한 번 인코딩한 명령을 계속해서 재사용할 수 있습니다 WebGPU는 모든 읽기와 쓰기가 잘 정의되고 범위 내에 있는지 확인하기 때문에 프레임마다 많은 검증이 필요합니다 하지만 렌더 번들을 사용하면 번들을 생성할 때 한 번만 검증을 수행하면 실행할 때마다 수행하지 않아도 됩니다 시간이 절약되고 앱의 성능이 향상되고 실제 논리를 처리할 여유가 생깁니다 아주 간단하게 렌더 번들을 만들 수 있습니다 렌더 번들 인코더를 생성하고 드로우 호출을 인코딩합니다 렌더 패스 인코더처럼요 finish()를 호출하면 재사용 가능한 번들이 생성됩니다

번들을 만든 뒤에는 executeBundles()로 모든 드로우 명령을 실행하고 필요한 만큼 반복할 수 있습니다

내부적으로는 Metal의 간접 명령 버퍼에 매핑되어 비슷한 성능을 제공합니다 메모리 사용을 줄이고 검증 오버헤드도 줄였으니 이제 리소스 수를 줄여봅시다

구체적으로 명령 버퍼 렌더링 컴퓨팅 패스 바인드 그룹 레이아웃 바인드 그룹을 줄입니다

명령 버퍼 경계는 고속 온칩 메모리와 통합 온디바이스 메모리 간의 동기화가 필요합니다 가능하다면 업데이트 루프당 하나의 명령 버퍼만 사용하고 그럴 수 없는 경우에는 명령 버퍼를 가능한 한 적게 사용하는 게 좋습니다 명령 버퍼는 나눠야 하는 건 데이터를 통합 메모리로 다시 쓸 때뿐입니다 거의 보기 드문 일이죠

명령 버퍼와 달리 패스는 통합 메모리와 동기화할 필요가 없습니다 하지만 렌더링 대상이나 컴퓨팅 디스패치 크기에 따라 상당한 메모리 대역폭을 소모합니다 메모리 대역폭을 절약하려면 적게 사용하는 것이 좋습니다

대부분의 휴대폰이 그렇듯이 Apple 기기의 GPU는 타일 기반 지연 렌더러를 기반으로 합니다 패스 결합과 메모리 대역폭 모범 사례를 따르면 사이트나 웹이 Apple 하드웨어에서 뛰어난 성능을 발휘할 것입니다 타일 기반 렌더러에 대한 정보는 WWDC 2020의 "Apple Silicon 기반 Mac에 대한 Metal 성능 최적화" "Metal로 Apple GPU 활용하기"를 참고하십시오

이제 바인드 그룹에 대해 집중적으로 살펴보겠습니다 Metal 인수 버퍼로 구현되기 때문에 바인드 그룹을 생성하면 MTLBuffer도 생성됩니다 동적 오프셋을 사용하면 같은 레이아웃을 공유하지만 런타임에는 다른 리소스를 사용하는 바인드 그룹이 생성됩니다 동적 오프셋은 셰이더 모듈의 자동 레이아웃이 아닌 맞춤형 바인드 그룹 레이아웃을 생성해야 합니다

hasDynamicOffset이 있는 createBindGroupLayout을 호출해 레이아웃을 생성하고, 이를 전달해 바인드 그룹을 만듭니다 setBindGroup 호출에 동적 오프셋이 필요합니다 바인드 그룹의 동적 버퍼마다 오프셋 하나가 필요합니다

이 경우에는 동적 오프셋을 사용하는 버퍼가 1개이므로 setBindGroup에 1개의 오프셋을 전달합니다

예를 들어 64바이트 객체 10개를 표현하려면

64비트 버퍼 10개가 아닌 640비트 버퍼 1개를 생성하는 게 훨씬 좋습니다 이렇게 9개의 버퍼를 만들지 않고 끝났습니다

데이터 저장에 쓰는 메모리가 적으면 반복 검증 없이 최소한의 Metal 객체로 멋지고 효율적인 WebGPU 웹사이트와 웹 앱이 탄생합니다 WebGPU를 사용할 때 이렇게 성능을 향상하십시오 이제까지의 웹과 다르게 WebGPU를 사용하면 맞춤형 알고리즘을 GPU에서 직접 실행할 수 있습니다 Mac, iPhone, iPad Vision Pro에서 오늘 WebGPU를 사용해 보시고 최적의 사용 지침을 적용해 보시기를 바랍니다

GPU 프로그래밍을 사용한 웹의 미래가 기대됩니다