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 정점 형식

'unorm10-10-10-2'('rgb10a2'라고도 함)라는 새로운 정점 형식이 WebGPU 사양에 추가되었습니다. 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....

Dawn 업데이트

타임스탬프 쿼리를 사용하면 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 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

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