What’s New in WebGPU (Chrome 121) | Weblog | Chrome for Builders
The Chrome crew is happy to announce that WebGPU is now enabled by default in Chrome 121 on gadgets working Android 12 and larger powered by Qualcomm and ARM GPUs.
Assist will regularly develop to embody a wider vary of Android gadgets, together with these working on Android 11 in a close to future. This enlargement shall be depending on additional testing and optimization to make sure a seamless expertise throughout a broader vary of {hardware} configurations. See issue chromium:1497815.
Use DXC as a substitute of FXC for shader compilation on Home windows
Chrome now makes use of the ability of DXC (DirectX Compiler) to compile shaders on Home windows D3D12 machines geared up with SM6+ graphics {hardware}. Beforehand, WebGPU relied on FXC (FX Compiler) for shader compilation on Home windows. Whereas purposeful, FXC lacked the characteristic set and efficiency optimizations current in DXC.
Preliminary testing exhibits a 20% common enhance in compute shader compilation pace when utilizing DXC in comparison with FXC.
Timestamp queries in compute and render passes
Timestamp queries permit WebGPU purposes to measure exactly (all the way down to the nanosecond) how a lot time their GPU instructions take to execute compute and render passes. They’re closely used to achieve insights into the efficiency and conduct of GPU workloads.
When the "timestamp-query" characteristic is offered in a GPUAdapter, now you can do the next issues:
See the next instance and situation dawn:1800.
const adapter = await navigator.gpu.requestAdapter();
if (!adapter.options.has("timestamp-query")) {
throw new Error("Timestamp question characteristic will not be obtainable");
}
// Explicitly request timestamp question characteristic.
const machine = await adapter.requestDevice({
requiredFeatures: ["timestamp-query"],
});
const commandEncoder = machine.createCommandEncoder();
// Create a GPUQuerySet which holds 2 timestamp question outcomes: one for the
// starting and one for the top of compute move execution.
const querySet = machine.createQuerySet({ sort: "timestamp", rely: 2 });
const timestampWrites = {
querySet,
beginningOfPassWriteIndex: 0, // Write timestamp in index 0 when move begins.
endOfPassWriteIndex: 1, // Write timestamp in index 1 when move ends.
};
const passEncoder = commandEncoder.beginComputePass({ timestampWrites });
// TODO: Set pipeline, bind group, and dispatch work to be carried out.
passEncoder.finish();
// Resolve timestamps in nanoseconds as a 64-bit unsigned integer right into a GPUBuffer.
const dimension = 2 * BigInt64Array.BYTES_PER_ELEMENT;
const resolveBuffer = machine.createBuffer( GPUBufferUsage.COPY_SRC,
);
commandEncoder.resolveQuerySet(querySet, 0, 2, resolveBuffer, 0);
// Learn GPUBuffer reminiscence.
const resultBuffer = machine.createBuffer( GPUBufferUsage.MAP_READ,
);
commandEncoder.copyBufferToBuffer(resolveBuffer, 0, resultBuffer, 0, dimension);
// Submit instructions to the GPU.
machine.queue.submit([commandEncoder.finish()]);
// Log compute move length in nanoseconds.
await resultBuffer.mapAsync(GPUMapMode.READ);
const instances = new BigInt64Array(resultBuffer.getMappedRange());
console.log(`Compute move length: ${Quantity(instances[1] - instances[0])}ns`);
resultBuffer.unmap();
Resulting from timing attack issues, timestamp queries are quantized with a decision of 100 microseconds, which offers compromise between precision and safety. In Chrome browser, you may disable timestamp quantization by enabling the “WebGPU Developer Options” flag at chrome://flags/#enable-webgpu-developer-features through the growth of your app. See Timestamp queries quantization to be taught extra.
As GPUs could reset the timestamp counter often, which can lead to sudden values similar to detrimental deltas between timestamps, I like to recommend you try the git diff changes that provides timestamp question assist to the next Compute Boids pattern.
Default entry factors to shader modules
To enhance the developer expertise, now you can omit the entryPoint of your shader module when making a compute or render pipeline. If no distinctive entry level for the shader stage is discovered within the shader code, a GPUValidationError shall be triggered. See the next instance and issue dawn:2254.
const code = `
@vertex fn vertexMain(@builtin(vertex_index) i : u32) ->
@builtin(place) 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({
format: "auto",
vertex: { module, entryPoint: "vertexMain" },
fragment: { module, entryPoint: "fragmentMain", targets: [{ format }] },
vertex: { module },
fragment: { module, targets: [{ format }] },
});
Assist display-p3 as GPUExternalTexture colour area
Now you can set "display-p3" vacation spot colour area when importing a GPUExternalTexture from HDR movies with importExternalTexture(). Try how WebGPU handles color spaces. See the next instance and situation chromium:1330250.
// Create texture from HDR video.
const video = doc.querySelector("video");
const texture = myDevice.importExternalTexture({
supply: video,
colorSpace: "display-p3",
});
Reminiscence heaps information
That will help you anticipate reminiscence limitations when allocating massive quantities through the growth of your app, requestAdapterInfo() now exposes memoryHeaps data similar to the scale and kind of reminiscence heaps obtainable on the adapter. This experimental characteristic is accessible solely when the “WebGPU Developer Options” flag at chrome://flags/#enable-webgpu-developer-features is enabled. See the next instance and issue dawn:2249.
const adapter = await navigator.gpu.requestAdapter();
const adapterInfo = await adapter.requestAdapterInfo();
for (const { dimension, properties } of adapterInfo.memoryHeaps) {
console.log(dimension); // reminiscence heap dimension 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) { /* ... */ }
}
Daybreak updates
The HasWGSLLanguageFeature and EnumerateWGSLLanguageFeatures strategies on wgpu::Occasion have been added to deal with WGSL language options. See situation dawn:2260.
The non-standard wgpu::Characteristic::BufferMapExtendedUsages characteristic allows you to create a GPU buffer with wgpu::BufferUsage::MapRead or wgpu::BufferUsage::MapWrite and some other wgpu::BufferUsage. See the next instance and situation dawn:2204.
wgpu::BufferDescriptor descriptor = wgpu::BufferUsage::Uniform
;
wgpu::Buffer uniformBuffer = machine.CreateBuffer(&descriptor);
uniformBuffer.MapAsync(wgpu::MapMode::Write, 0, 128,
[](WGPUBufferMapAsyncStatus standing, void* userdata)
{
wgpu::Buffer* buffer = static_cast<wgpu::Buffer*>(userdata);
memcpy(buffer->GetMappedRange(), information, sizeof(information));
},
&uniformBuffer);
The next options have been documented: ANGLE Texture Sharing, D3D11 multithread protected, Implicit Device Synchronization, Norm16 texture formats, Timestamp Query Inside Passes, Pixel Local Storage, Shader Features, and Multi Planar Formats.
The Chrome crew has created an official GitHub repository for Dawn.
This covers solely a few of the key highlights. Try the exhaustive list of commits.
What’s New in WebGPU
An inventory of all the things that has been lined within the What’s New in WebGPU collection.