WebGPU (Chrome 119)의 새로운 기능

François Beaufort
François Beaufort
GitHub

필터링 가능한 32비트 플로팅 텍스처

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

필터링 가능한 32비트 부동 텍스처 지원은 32비트 부동 소수점 텍스처를 필터링하는 GPU 기능을 설명합니다. 즉, GPU는 부동 소수점 텍스처의 가장자리를 부드럽게 처리하여 덜 들쭉날쭉하게 보이도록 할 수 있습니다. '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 텍스처 형식

새로운 텍스처 형식 'rgb10a2uint' WebGPU 사양에 추가되었습니다. 4개의 부호 없는 정수 구성 요소(10비트 빨간색, 10비트 녹색, 10비트 파란색 및 2비트 알파)가 있는 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 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