Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di WebGPU (Chrome\r121)

François Beaufort

Mendukung WebGPU di Android

Tim Chrome dengan senang hati mengumumkan bahwa WebGPU kini diaktifkan secara default di Chrome 121 pada perangkat yang menjalankan Android 12 dan yang lebih baru yang didukung oleh GPU Qualcomm dan ARM.

Dukungan akan diperluas secara bertahap untuk mencakup berbagai perangkat Android, termasuk perangkat yang menjalankan Android 11 dalam waktu dekat. Perluasan ini akan bergantung pada pengujian dan pengoptimalan lebih lanjut untuk memastikan pengalaman yang lancar di berbagai konfigurasi hardware yang lebih luas. Lihat issue chromium:1497815.

Screenshot contoh WebGPU yang berjalan di Chrome untuk Android. — Contoh WebGPU yang berjalan di Chrome untuk Android.

Menggunakan DXC, bukan FXC, untuk kompilasi shader di Windows

Chrome kini menggunakan kemampuan DXC (DirectX Compiler) untuk mengompilasi shader di komputer Windows D3D12 yang dilengkapi dengan hardware grafis SM6+. Sebelumnya, WebGPU mengandalkan FXC (FX Compiler) untuk kompilasi shader di Windows. Meskipun berfungsi, FXC tidak memiliki set fitur dan pengoptimalan performa yang ada di DXC.

Pengujian awal menunjukkan peningkatan kecepatan kompilasi shader komputasi rata-rata sebesar 20% saat menggunakan DXC dibandingkan dengan FXC.

Kueri stempel waktu dalam proses komputasi dan rendering

Kueri stempel waktu memungkinkan aplikasi WebGPU mengukur secara tepat (hingga nanodetik) berapa banyak waktu yang diperlukan perintah GPU untuk menjalankan komputasi dan meneruskan rendering. Alat ini banyak digunakan untuk mendapatkan insight tentang performa dan perilaku workload GPU.

Jika fitur "timestamp-query" tersedia di GPUAdapter, Anda kini dapat melakukan hal berikut:

Minta GPUDevice dengan fitur "timestamp-query".
Buat GPUQuerySet jenis "timestamp".
Gunakan GPUComputePassDescriptor.timestampWrites dan GPURenderPassDescriptor.timestampWrites untuk menentukan tempat penulisan nilai stempel waktu di GPUQuerySet.
Selesaikan nilai stempel waktu menjadi GPUBuffer dengan resolveQuerySet().
Baca kembali nilai stempel waktu dengan menyalin hasil dari GPUBuffer ke CPU.
Dekode nilai stempel waktu sebagai BigInt64Array.

Lihat contoh berikut dan keluarkan 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();

Karena masalah serangan waktu, kueri stempel waktu dikuantisasi dengan resolusi 100 mikrodetik, yang memberikan kompromi yang baik antara presisi dan keamanan. Di browser Chrome, Anda dapat menonaktifkan kuantisasi stempel waktu dengan mengaktifkan flag "Fitur Developer WebGPU" di chrome://flags/#enable-webgpu-developer-features selama pengembangan aplikasi Anda. Lihat Kuantisasi kueri stempel waktu untuk mempelajari lebih lanjut.

Karena GPU terkadang mereset penghitung stempel waktu, yang dapat menghasilkan nilai yang tidak terduga seperti delta negatif antara stempel waktu, sebaiknya Anda melihat perubahan diff git yang menambahkan dukungan kueri stempel waktu ke contoh Compute Boids berikut.

Screenshot contoh Compute Boids yang menampilkan kueri stempel waktu. — Contoh Compute Boids yang menampilkan kueri stempel waktu.

Titik entri default ke modul shader

Untuk meningkatkan pengalaman developer, Anda kini dapat menghilangkan entryPoint modul shader saat membuat pipeline komputasi atau render. Jika tidak ada titik entri unik untuk tahap shader yang ditemukan dalam kode shader, GPUValidationError akan dipicu. Lihat contoh berikut dan 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 }] },
});

Mendukung display-p3 sebagai ruang warna GPUExternalTexture

Sekarang Anda dapat menetapkan ruang warna tujuan "display-p3" saat mengimpor GPUExternalTexture dari video HDR dengan importExternalTexture(). Lihat cara WebGPU menangani ruang warna. Lihat contoh dan masalah berikut chromium:1330250.

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

Info heap memori

Untuk membantu Anda mengantisipasi batasan memori saat mengalokasikan jumlah besar selama pengembangan aplikasi, requestAdapterInfo() kini mengekspos informasi memoryHeaps seperti ukuran dan jenis heap memori yang tersedia di adaptor. Fitur eksperimental ini hanya dapat diakses jika flag "Fitur Developer WebGPU" di chrome://flags/#enable-webgpu-developer-features diaktifkan. Lihat contoh berikut dan issue 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)   { /* ... */ }
}

Screenshot https://webgpureport.org yang menampilkan heap memori di info adaptor. — Heap memori info adaptor ditampilkan di https://webgpureport.org.

Update Dawn

Metode HasWGSLLanguageFeature dan EnumerateWGSLLanguageFeatures di wgpu::Instance telah ditambahkan untuk menangani fitur bahasa WGSL. Lihat masalah dawn:2260.

Fitur wgpu::Feature::BufferMapExtendedUsages non-standar memungkinkan Anda membuat buffer GPU dengan wgpu::BufferUsage::MapRead atau wgpu::BufferUsage::MapWrite dan wgpu::BufferUsage lainnya. Lihat contoh berikut dan keluarkan 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);

Fitur berikut telah didokumentasikan: ANGLE Texture Sharing, D3D11 multithread protected, Implicit Device Synchronization, Norm16 texture formats, Timestamp Query Inside Passes, Pixel Local Storage, Shader Features, dan Multi Planar Formats.

Tim Chrome telah membuat repositori GitHub resmi untuk Dawn.

Hal ini hanya mencakup beberapa sorotan utama. Lihat daftar commit yang lengkap.