WebGPU의 새로운 기능 (Chrome 121)

François Beaufort

Android에서 WebGPU 지원

Chrome팀은 이제 Chrome 121에서 Qualcomm 및 ARM GPU로 구동되는 Android 12 이상을 실행하는 기기의 WebGPU가 기본적으로 사용 설정된다는 반가운 소식을 알려드립니다.

조만간 Android 11에서 실행되는 기기를 포함하여 더 다양한 Android 기기를 포함하도록 지원이 점차 확대될 예정입니다. 더 광범위한 하드웨어 구성에서 원활한 환경을 보장하기 위해 추가 테스트와 최적화에 따라 확장될 예정입니다. 문제 chromium:1497815를 참고하세요.

<ph type="x-smartling-placeholder">

</ph>

Android용 Chrome에서 실행되는 WebGPU 샘플

Windows에서 셰이더 컴파일에 FXC 대신 DXC 사용

이제 Chrome은 DXC (DirectX 컴파일러)의 기능을 사용하여 SM6+ 그래픽 하드웨어가 장착된 Windows D3D12 시스템에서 셰이더를 컴파일합니다. 이전에는 WebGPU가 Windows에서 셰이더 컴파일을 위해 FXC (FX 컴파일러)를 사용했습니다. FXC는 기능적으로 작동하기는 하지만 DXC에 있는 기능 집합과 성능 최적화가 없었습니다.

초기 테스트 결과 DXC 사용 시 컴퓨팅 셰이더 컴파일 속도가 FXC에 비해 평균 20% 증가하는 것으로 나타났습니다.

컴퓨팅 및 렌더링 패스의 타임스탬프 쿼리

타임스탬프 쿼리를 사용하면 WebGPU 애플리케이션에서 GPU 명령어가 컴퓨팅 및 렌더링 패스를 실행하는 데 걸리는 시간을 나노초 단위까지 정확하게 측정할 수 있습니다. GPU 워크로드의 성능과 동작에 대한 유용한 정보를 얻는 데 많이 사용됩니다.

GPUAdapter에서 "timestamp-query" 기능을 사용할 수 있게 되면 이제 다음 작업을 할 수 있습니다.

• "timestamp-query" 기능으로 GPUDevice를 요청합니다.
• "timestamp" 유형의 GPUQuerySet를 만듭니다.
• GPUComputePassDescriptor.timestampWrites 및 GPURenderPassDescriptor.timestampWrites을 사용하여 GPUQuerySet에서 타임스탬프 값을 쓸 위치를 정의합니다.
• resolveQuerySet()를 사용하여 타임스탬프 값을 GPUBuffer로 확인합니다.
• GPUBuffer의 결과를 CPU로 복사하여 타임스탬프 값을 다시 읽습니다.
• 타임스탬프 값을 BigInt64Array로 디코딩합니다.

다음 예를 참고하여 dawn:1800을 실행합니다.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("timestamp-query")) {
  throw new Error("Timestamp query feature is not available");
}
// Explicitly request timestamp query feature.
const device = await adapter.requestDevice({
  requiredFeatures: ["timestamp-query"],
});
const commandEncoder = device.createCommandEncoder();

// Create a GPUQuerySet which holds 2 timestamp query results: one for the
// beginning and one for the end of compute pass execution.
const querySet = device.createQuerySet({ type: "timestamp", count: 2 });
const timestampWrites = {
  querySet,
  beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when pass begins.
  endOfPassWriteIndex: 1, // Write timestamp in index 1 when pass ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be performed.
passEncoder.end();

// Resolve timestamps in nanoseconds as a 64-bit unsigned integer into a GPUBuffer.
const size = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
});
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);

// Read GPUBuffer memory.
const resultBuffer = device.createBuffer({
  size,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, size);

// Submit commands to the GPU.
device.queue.submit([commandEncoder.finish()]);

// Log compute pass duration in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const times = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute pass duration: ${Number(times[1] - times[0])}ns`);
resultBuffer.unmap();

타이밍 공격에 대한 우려로 인해 타임스탬프 쿼리는 100마이크로초의 해상도로 양자화되므로 정밀도와 보안 간의 절충안을 제공합니다. Chrome 브라우저에서 'WebGPU 개발자 기능'을 사용 설정하여 타임스탬프 양자화를 사용 중지할 수 있습니다. flag를 chrome://flags/#enable-webgpu-developer-features에 추가합니다. 자세한 내용은 타임스탬프 쿼리 양자화를 참고하세요.

GPU가 타임스탬프 카운터를 재설정하여 타임스탬프 사이의 음수 델타와 같은 예기치 않은 값이 발생할 수 있으므로 다음 Compute Boids 샘플에 타임스탬프 쿼리 지원을 추가하는 git diff changes를 확인하는 것이 좋습니다.

<ph type="x-smartling-placeholder">

</ph>

타임스탬프 쿼리가 포함된 Compute Boids 샘플

셰이더 모듈의 기본 진입점

개발자 환경을 개선하기 위해 이제 컴퓨팅 또는 렌더링 파이프라인을 만들 때 셰이더 모듈의 entryPoint를 생략할 수 있습니다. 셰이더 코드에 셰이더 단계의 고유한 진입점이 없는 경우 GPUValidationError가 트리거됩니다. 다음 예와 issue dawn:2254를 참조하세요.

const code = `
    @vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
      @builtin(position) vec4f {
       const pos = array(vec2f(0, 1), vec2f(-1, -1), vec2f(1, -1));
       return vec4f(pos[i], 0, 1);
    }
    @fragment fn fragmentMain() -> @location(0) vec4f {
      return vec4f(1, 0, 0, 1);
    }`;
const module = myDevice.createShaderModule({ code });
const format = navigator.gpu.getPreferredCanvasFormat();
const pipeline = await myDevice.createRenderPipelineAsync({
  layout: "auto",
  vertex: { module, entryPoint: "vertexMain" },
  fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
  vertex: { module },
  fragment: { module, targets: [{ format }] },
});

display-p3을 GPUExternalTexture 색상 공간으로 지원

이제 importExternalTexture()를 사용하여 HDR 동영상에서 GPUExternalTexture를 가져올 때 "display-p3" 대상 색상 공간을 설정할 수 있습니다. WebGPU가 색상 공간을 처리하는 방법을 확인하세요. 다음 예와 문제 chromium:1330250을 참고하세요.

// Create texture from HDR video.
const video = document.querySelector("video");
const texture = myDevice.importExternalTexture({
  source: video,
  colorSpace: "display-p3",
});

메모리 힙 정보

앱 개발 중에 대용량을 할당할 때 메모리 제한을 예측할 수 있도록 이제 requestAdapterInfo()에서 어댑터에서 사용할 수 있는 메모리 힙의 크기와 유형과 같은 memoryHeaps 정보를 노출합니다. 이 실험용 기능은 'WebGPU 개발자 기능' chrome://flags/#enable-webgpu-developer-features의 flag가 사용 설정됩니다. 다음 예와 issue dawn:2249를 참조하세요.

const adapter = await navigator.gpu.requestAdapter();
const adapterInfo = await adapter.requestAdapterInfo();

for (const { size, properties } of adapterInfo.memoryHeaps) {
  console.log(size); // memory heap size in bytes
  if (properties & GPUHeapProperty.DEVICE_LOCAL)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_VISIBLE)  { /* ... */ }
  if (properties & GPUHeapProperty.HOST_COHERENT) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_UNCACHED) { /* ... */ }
  if (properties & GPUHeapProperty.HOST_CACHED)   { /* ... */ }
}

어댑터 정보 메모리 힙은 https://webgpureport.org에 나와 있습니다.

Dawn 업데이트

wgpu::Instance의 HasWGSLLanguageFeature 및 EnumerateWGSLLanguageFeatures 메서드가 WGSL 언어 기능을 처리하기 위해 추가되었습니다. 문제 dawn:2260을 참고하세요.

비표준 wgpu::Feature::BufferMapExtendedUsages 기능을 사용하면 wgpu::BufferUsage::MapRead 또는 wgpu::BufferUsage::MapWrite 및 기타 wgpu::BufferUsage로 GPU 버퍼를 만들 수 있습니다. 다음 예를 참고하여 dawn:2204를 실행합니다.

wgpu::BufferDescriptor descriptor = {
  .size = 128,
  .usage = wgpu::BufferUsage::MapWrite | wgpu::BufferUsage::Uniform
};
wgpu::Buffer uniformBuffer = device.CreateBuffer(&descriptor);

uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
   [](WGPUBufferMapAsyncStatus status, void* userdata)
   {
      wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
      memcpy(buffer->GetMappedRange(), data, sizeof(data));
   },
   &uniformBuffer);

ANGLE 텍스처 공유, D3D11 멀티스레드 보호, 암시적 기기 동기화, Norm16 텍스처 형식, 타임스탬프 쿼리 내부 패스, Pixel 로컬 저장소, 셰이더 기능, 다중 평면 형식과 같은 기능이 문서화되어 있습니다.

Chrome팀에서 Dawn용 공식 GitHub 저장소를 만들었습니다.

여기에서는 몇 가지 주요 사항만 다룹니다. 전체 커밋 목록을 확인하세요.

WebGPU의 새로운 기능

WebGPU의 새로운 기능 시리즈에서 다룬 모든 내용 목록

Chrome 127

• Android에서 OpenGL ES 실험용 지원
• GPUAdapter 정보 속성
• WebAssembly 상호 운용성 개선
• 명령어 인코더 오류 개선
• Dawn 업데이트

Chrome 126

• maxTextureArrayLayers 한도 늘리기
• Vulkan 백엔드의 버퍼 업로드 최적화
• 셰이더 컴파일 시간 개선
• 제출된 명령어 버퍼는 고유해야 합니다.
• Dawn 업데이트

Chrome 125

• 하위 그룹 (개발 중 기능)
• 3D 텍스처 슬라이스로 렌더링
• Dawn 업데이트

Chrome 124

• 읽기 전용 및 읽기-쓰기 스토리지 텍스처
• 서비스 워커 및 공유 작업자 지원
• 새 어댑터 정보 속성
• 버그 수정
• Dawn 업데이트

Chrome 123

• WGSL에서 DP4a 내장 함수 지원
• WGSL의 제한되지 않은 포인터 매개변수
• WGSL에서 복합을 역참조하기 위한 구문 슈가
• 스텐실 및 깊이 측면의 별도 읽기 전용 상태
• Dawn 업데이트

Chrome 122

• 호환성 모드로 도달범위 확대 (개발 중)
• maxVertexAttributes 한도 증가
• Dawn 업데이트

Chrome 121

• Android에서 WebGPU 지원
• Windows에서 셰이더 컴파일에 FXC 대신 DXC 사용
• 컴퓨팅 및 렌더링 패스의 타임스탬프 쿼리
• 셰이더 모듈의 기본 진입점
• display-p3을 GPUExternalTexture 색상 공간으로 지원
• 메모리 힙 정보
• Dawn 업데이트

Chrome 120

• WGSL에서 16비트 부동 소수점 값 지원
• 한도의 한계에 도전하기
• 심도 스텐실 상태 변경사항
• 어댑터 정보 업데이트
• 타임스탬프 쿼리 양자화
• 스프링 청소 기능

Chrome 119

• 필터링 가능한 32비트 플로팅 텍스처
• unorm10-10-10-2 꼭짓점 형식
• rgb10a2uint 텍스처 형식
• Dawn 업데이트

Chrome 118

• copyExternalImageToTexture()의 HTMLImageElement 및 ImageData 지원
• 읽기-쓰기 및 읽기 전용 저장소 텍스처를 실험적으로 지원합니다.
• Dawn 업데이트

Chrome 117

• 꼭짓점 버퍼 설정 해제
• 바인드 그룹 설정 해제
• 기기 분실 시 비동기 파이프라인 생성 시 오류 차단
• SPIR-V 셰이더 모듈 만들기 업데이트
• 개발자 환경 개선
• 자동으로 생성된 레이아웃으로 파이프라인 캐싱
• Dawn 업데이트

Chrome 116

• WebCodecs 통합
• GPUAdapter requestDevice()에서 반품한 분실 기기
• importExternalTexture()가 호출되는 경우 동영상을 원활하게 재생합니다.
• 사양 적합성
• 개발자 환경 개선
• Dawn 업데이트

Chrome 115

• 지원되는 WGSL 언어 확장 프로그램
• Direct3D 11 실험용 지원
• AC 전원에서 기본적으로 개별 GPU 가져오기
• 개발자 환경 개선
• Dawn 업데이트

Chrome 114

• JavaScript 최적화
• 구성되지 않은 캔버스의 getCurrentTexture()에서 InvalidStateError 발생
• WGSL 업데이트
• Dawn 업데이트

Chrome 113

• importExternalTexture()에서 WebCodecs VideoFrame 소스 사용