이 페이지는 Cloud Translation API를 통해 번역되었습니다.

WebGPU의 새로운 기능 (Chrome 121)

François Beaufort

Android에서 WebGPU 지원

Chrome팀은 이제 Qualcomm 및 ARM GPU를 기반으로 Android 12 이상을 실행하는 기기의 Chrome 121에서 WebGPU가 기본적으로 사용 설정된다고 발표하게 되어 기쁩니다.

조만간 Android 11을 실행하는 기기를 비롯하여 더 다양한 Android 기기를 지원하도록 지원 범위가 점진적으로 확대될 예정입니다. 이번 확장은 더 광범위한 하드웨어 구성에서 원활한 환경을 제공하기 위한 추가 테스트 및 최적화에 따라 진행됩니다. 문제 chromium:1497815를 참고하세요.

Android용 Chrome에서 실행되는 WebGPU 샘플의 스크린샷 — 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 브라우저에서는 앱을 개발하는 동안 chrome://flags/#enable-webgpu-developer-features에서 'WebGPU 개발자 기능' 플래그를 사용 설정하여 타임스탬프 정밀도를 사용 중지할 수 있습니다. 자세한 내용은 타임스탬프 쿼리 정밀도를 참고하세요.

GPU가 타임스탬프 카운터를 가끔 재설정할 수 있으므로 타임스탬프 간의 음수 델타와 같은 예기치 않은 값이 발생할 수 있습니다. 따라서 다음 Compute Boids 샘플에 타임스탬프 쿼리 지원을 추가하는 git diff 변경사항을 확인하시기 바랍니다.

타임스탬프 쿼리가 포함된 Compute Boids 샘플의 스크린샷 — 타임스탬프 쿼리가 포함된 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 정보를 노출합니다. 이 실험용 기능은 chrome://flags/#enable-webgpu-developer-features의 'WebGPU 개발자 기능' 플래그가 사용 설정된 경우에만 액세스할 수 있습니다. 다음 예와 문제 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의 스크린샷 — https://webgpureport.org에 표시된 어댑터 정보 메모리 힙

Dawn 업데이트

WGSL 언어 기능을 처리하기 위해 wgpu::Instance의 HasWGSLLanguageFeature 및 EnumerateWGSLLanguageFeatures 메서드가 추가되었습니다. 문제 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 텍스처 형식, 패스 내부 타임스탬프 쿼리, 픽셀 로컬 저장소, 셰이더 기능, 멀티 플래너 형식에 관한 문서가 작성되었습니다.

Chrome팀은 Dawn의 공식 GitHub 저장소를 만들었습니다.

여기에는 주요 내용 중 일부만 다룹니다. 전체 커밋 목록을 확인하세요.