WebGPU (Chrome 119)의 새로운 기능

François Beaufort
François Beaufort
GitHub

필터링 가능한 32비트 부동 텍스처

32비트 부동 소수점 텍스처는 HDR 이미지 및 깊이 맵과 같은 고정밀 데이터를 저장하는 데 사용됩니다. 고성능 게임 및 전문 애플리케이션에 사용되는 GPU에 특히 중요합니다.

필터링 가능한 32비트 부동 소수점 텍스처 지원은 GPU가 32비트 부동 소수점 텍스처를 필터링하는 기능을 설명합니다. 즉, GPU가 부동 소수점 텍스처의 가장자리를 부드럽게 처리하여 들쭉날쭉한 것처럼 보이게 할 수 있습니다. 이는 WebGL의 'OES_texture_float_linear' 확장 프로그램과 유사합니다.

일부 GPU는 필터링 가능한 32비트 부동 텍스처를 지원하지 않습니다. GPUAdapter에서 "float32-filterable" 기능을 사용할 수 있게 되면 이제 이 기능으로 GPUDevice를 요청하고 'r32float', 'rg32float', 'rgba32float' 형식으로 텍스처를 필터링할 수 있습니다. 다음 예와 issue dawn:1664를 참고하세요.

const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has("float32-filterable")) {
  throw new Error("Filterable 32-bit float textures support is not available");
}
// Explicitly request filterable 32-bit float textures support.
const device = await adapter.requestDevice({
  requiredFeatures: ["float32-filterable"],
});

// Create a sampler with linear filtering.
const sampler = device.createSampler({
  magFilter: "linear",
});

// Create a texture with rgba32float format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgba32float",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with sampler and texture and
// send the appropriate commands to the GPU....

unorm10-10-10-2 꼭짓점 형식

WebGPU 사양에 'unorm10-10-10-2'(일명 'rgb10a2')라는 새로운 꼭짓점 형식이 추가되었습니다. 10비트, 10비트, 10비트, 2비트로 배열된 4개의 정규화된 부호 없는 정수 값이 있는 하나의 패킹된 32비트 값으로 구성됩니다. 다음 예와 issue dawn:2044를 참고하세요.

// Define the layout of vertex attribute data with unorm10-10-10-2 format.
const buffers = [
  {
    arrayStride: 0,
    attributes: [
      { format: "unorm10-10-10-2", offset: 0, shaderLocation: 0 },
    ],
  },
];

// Describe the vertex shader entry point and its input buffer layouts.
const vertex = {
  module: myVertexShaderModule,
  entryPoint: "main",
  buffers,
};

// Pass vertex to device.createRenderPipeline() and
// use vec4<f32> type in WGSL shader code to manipulate data.

rgb10a2uint 텍스처 형식

WebGPU 사양에 'rgb10a2uint'라는 새로운 텍스처 형식이 추가되었습니다. 10비트 빨간색, 10비트 녹색, 10비트 파란색, 2비트 알파라는 4개의 부호 없는 정수 구성 요소가 있는 32비트 패킹 픽셀 형식으로 구성됩니다. 다음 예와 issue dawn:1936을 참고하세요.

// Create a texture with rgb10a2uint format.
const texture = device.createTexture({
  size: [100, 100],
  format: "rgb10a2uint",
  usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.TEXTURE_BINDING,
});

// Write data to texture, create a bindgroup with texture and
// send the appropriate commands to the GPU....

여명 업데이트

타임스탬프 쿼리를 사용하면 WebGPU 애플리케이션이 GPU 명령어를 실행하는 데 걸리는 시간을 나노초 단위까지 정확하게 측정할 수 있습니다. 패스의 시작과 끝에서 타임스탬프 쿼리를 캡처하는 API 형태가 WebGPU 사양과 일치하도록 업데이트되었습니다. 다음 예와 issue dawn:1800을 참고하세요.

// Create a timestamp query set that will store the timestamp values.
wgpu::QuerySetDescriptor querySetDescriptor = {
    .count = 2,
    .type = wgpu::QueryType::Timestamp};
wgpu::QuerySet querySet = device.CreateQuerySet(&querySetDescriptor);

wgpu::RenderPassTimestampWrites timestampWrites = {
    .querySet = querySet,
    .beginningOfPassWriteIndex = 0,
    .endOfPassWriteIndex = 1};
wgpu::ComputePassDescriptor pass{.timestampWrites = &timestampWrites};

// Write the queue timestamp into beginningOfPassWriteIndex and
// endOfPassWriteIndex of myQuerySet respectively before and after the pass
// commands execute.
myEncoder.BeginComputePass(&pass);

여기에서는 주요 특징 중 일부만 다루었습니다. 전체 커밋 목록을 확인하세요.

WebGPU의 새로운 기능

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

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113