WebGPU'daki (Chrome 121) Yenilikler

François Beaufort
François Beaufort
GitHub

Android'de WebGPU'yu destekleme

Chrome ekibi, WebGPU'nun artık Qualcomm ve ARM GPU'ları tarafından desteklenen, Android 12 ve sonraki sürümleri çalıştıran cihazlarda Chrome 121'de varsayılan olarak etkinleştirildiğini duyurmanın heyecanını yaşıyor.

Destek, yakın gelecekte Android 11 çalıştıranlar da dahil olmak üzere daha geniş bir Android cihaz yelpazesini kapsayacak şekilde kademeli olarak genişletilecektir. Bu genişleme, daha geniş bir donanım yapılandırması yelpazesinde sorunsuz bir deneyim sağlamak için daha fazla test ve optimizasyon yapılmasını gerektiriyor. chromium:1497815 sorunu bölümüne bakın.

Android için Chrome'da çalıştırılan WebGPU örneğinin ekran görüntüsü.
Android için Chrome'da çalıştırılan WebGPU örneği.

Windows'da gölgelendirici derlemesi için FXC yerine DXC'yi kullan

Chrome artık SM6+ grafik donanımına sahip Windows D3D12 makinelerinde gölgelendiricileri derlemek için DXC'nin (DirectX Derleyici) gücünü kullanmaktadır. Daha önce WebGPU, Windows'da gölgelendirici derlemesi için FXC'yi (FX Derleyici) kullanıyordu. FXC işlevsel olsa da, DXC'de bulunan özellik grubundan ve performans optimizasyonlarından yoksundu.

İlk testler, DXC kullanılırken işlem gölgelendirici derleme hızında FXC'ye kıyasla ortalama% 20 artış olduğunu gösteriyor.

Bilgi işlem ve oluşturma kartlarında zaman damgası sorguları

Zaman damgası sorguları, WebGPU uygulamalarının GPU komutlarının işlem ve bilgi oluşturma işlemlerini yürütmek ve oluşturmak için ne kadar sürdüğünü nanosaniyeye kadar hassas bir şekilde ölçmesine olanak tanır. Bunlar, GPU iş yüklerinin performansı ve davranışı hakkında bilgi edinmek için yoğun olarak kullanılır.

"timestamp-query" özelliği GPUAdapter içinde kullanılabildiğinde artık şunları yapabilirsiniz:

  • "timestamp-query" özelliğine sahip bir GPUDevice isteyin.
  • "timestamp" türünde bir GPUQuerySet oluşturun.
  • GPUQuerySet ürününde zaman damgası değerlerinin nereye yazılacağını tanımlamak için GPUComputePassDescriptor.timestampWrites ve GPURenderPassDescriptor.timestampWrites tuşlarını kullanın.
  • Zaman damgası değerlerini resolveQuerySet() kullanarak GPUBuffer biçiminde çözümleyin.
  • GPUBuffer aracındaki sonuçları CPU'ya kopyalayarak zaman damgası değerlerini tekrar okuyun.
  • Zaman damgası değerlerinin kodunu BigInt64Array olarak çözün.

Aşağıdaki örneğe ve dawn:1800 sorununu inceleyin.

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();

Zamanlama saldırısı endişeleri nedeniyle, zaman damgası sorguları 100 mikrosaniyelik bir çözünürlükle ölçülür. Bu da, hassasiyet ve güvenlik arasında iyi bir uzlaşma sağlar. Chrome tarayıcıda "WebGPU Geliştirici Özellikleri"ni etkinleştirerek zaman damgası miktar belirlemeyi devre dışı bırakabilirsiniz. flag, uygulamanızı geliştirirken bu konuma chrome://flags/#enable-webgpu-developer-features ekleyin. Daha fazla bilgi edinmek için Zaman damgası sorgularının nicelenmesi bölümüne bakın.

GPU'lar zaman damgası sayacını zaman zaman sıfırlayabileceğinden, bu durum zaman damgaları arasında negatif deltalar gibi beklenmedik değerlere neden olabilir. Aşağıdaki Compute Boids örneğine zaman damgası sorgu desteği ekleyen git diff değişikliklerine göz atmanızı öneririz.

Zaman damgası sorgusunu içeren Compute Boids örneğinin ekran görüntüsü.
Zaman damgası sorgusunu içeren Compute Boids örneği.

Gölgelendirici modüllerine varsayılan giriş noktaları

Geliştirici deneyimini iyileştirmek için artık bilgi işlem veya oluşturma ardışık düzeni oluştururken gölgelendirici modülünüzün entryPoint kısmını çıkarabilirsiniz. Gölgelendirici kodunda, gölgelendirici aşaması için benzersiz bir giriş noktası bulunamazsa GPUValidationError tetiklenir. Aşağıdaki örneği ve sorun şafak:2254 bilgisini inceleyin.

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 renk alanı olarak destekle

Artık importExternalTexture() ile HDR videolardan GPUExternalTexture içe aktarırken "display-p3" hedef renk alanını ayarlayabilirsiniz. WebGPU'nun renk alanlarını nasıl işlediğine göz atın. Aşağıdaki örneğe ve soruna bakın: chromium:1330250.

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

Bellek yığını bilgileri

Uygulamanızı geliştirirken büyük miktarlar ayırırken bellek sınırlamalarını öngörmenize yardımcı olmak için requestAdapterInfo() artık adaptörde bulunan bellek yığınlarının boyutu ve türü gibi memoryHeaps bilgilerini gösteriyor. Bu deneysel özelliğe yalnızca "WebGPU Geliştirici Özellikleri" flag (chrome://flags/#enable-webgpu-developer-features) etkinleştirildi. Aşağıdaki örneğe ve sorun şafak:2249 bölümüne bakın.

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)   { /* ... */ }
}
.
Bağdaştırıcı bilgilerinde bellek yığınlarını gösteren https://webgpureport.org ekran görüntüsü.
Bağdaştırıcı bilgi bellek yığınları https://webgpureport.org adresinde gösteriliyor.

Şafak güncellemeleri

wgpu::Instance üzerindeki HasWGSLLanguageFeature ve EnumerateWGSLLanguageFeatures yöntemleri, WGSL dil özelliklerini işlemek için eklendi. dawn:2260 sorununu inceleyin.

Standart olmayan wgpu::Feature::BufferMapExtendedUsages özelliği, wgpu::BufferUsage::MapRead veya wgpu::BufferUsage::MapWrite ve diğer wgpu::BufferUsage özelliklerine sahip bir GPU arabelleği oluşturmanıza olanak tanır. Aşağıdaki örneğe ve dawn:2204 sorununu inceleyin.

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);

Şu özellikler belgelenmiştir: ANGLE Doku Paylaşımı, D3D11 çoklu iş parçacığı korumalı, Dolaylı Cihaz Senkronizasyonu, Norm16 doku biçimleri, Zaman Damgası içindeki Kartlar, Pixel Yerel Depolama, Gölgesel Özellikler ve Çoklu Düzlemsel Biçimler.

Chrome ekibi Dawn için resmi bir GitHub deposu oluşturdu.

Bunlar, öne çıkan özelliklerden yalnızca bazılarıdır. Taahhütlerin kapsamlı listesini inceleyin.

WebGPU'daki Yenilikler

WebGPU'daki Yenilikler serisinde ele alınan her şeyin listesi.

Chrome 127 sürümü

Chrome 126

Chrome 125 sürümü

Chrome 124 sürümü

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119 sürümü

Chrome 118 sürümü

Chrome 117 sürümü

Chrome 116

Chrome 115 sürümü

Chrome 114 sürümü

Chrome 113