在 copyExternalImageToTexture() 中支援 HTMLImageElement 和 ImageData
GPUQueue
上的 copyExternalImageToTexture()
方法可讓您將從來源圖片、影片或畫布擷取的快照複製到指定的 GPUTexture
。您現在可以傳遞 HTMLImageElement
和 ImageData
物件做為來源。請參閱以下範例和 chromium 問題 1471372。
// Fetch and decode image.
const source = document.createElement("img");
source.src = "my-image.png";
await source.decode();
// Create destination texture.
const size = [source.width, source.height];
const texture = myDevice.createTexture({
size,
format: "rgba8unorm",
usage:
GPUTextureUsage.COPY_DST |
GPUTextureUsage.RENDER_ATTACHMENT |
GPUTextureUsage.TEXTURE_BINDING,
});
// Copies a snapshot taken from the source image into a texture.
myDevice.queue.copyExternalImageToTexture({ source }, { texture }, size);
支援讀寫和唯讀儲存空間紋理
儲存紋理繫結類型可讓您執行紋理讀取作業,而無需取樣,並將其儲存至著色器中的任意位置。當 GPUAdapter
提供 "chromium-experimental-read-write-storage-texture"
功能時,您現在可以要求使用這項功能的 GPUDevice
,並在建立繫結群組版面配置時,將 GPUStorageTexture
存取權設為 "read-write"
或 "read-only"
。先前這項功能僅限於 "write-only"
。
如要充分利用這項功能,您必須使用 enable chromium_experimental_read_write_storage_texture
在 WGSL 程式碼中明確啟用此擴充功能。啟用後,您可以使用 read_write
和 read
存取限定詞來存放紋理,textureLoad()
和 textureStore()
內建函式會相應運作,新的 textureBarrier()
內建函式則可用於同步處理工作群組中的紋理記憶體存取。請參閱以下範例和dawn:1972 版本。
這項功能仍在實驗階段,可能會變更。在標準化之前,請使用 --enable-dawn-features=allow_unsafe_apis
flag 執行 Chrome,以便使用此功能。
const feature = "chromium-experimental-read-write-storage-texture";
const adapter = await navigator.gpu.requestAdapter();
if (!adapter.features.has(feature)) {
throw new Error("Read-write storage texture support is not available");
}
// Explicitly request read-write storage texture support.
const device = await adapter.requestDevice({
requiredFeatures: [feature],
});
const bindGroupLayout = device.createBindGroupLayout({
entries: [{
binding: 0,
visibility: GPUShaderStage.COMPUTE,
storageTexture: {
access: "read-write", // <-- New!
format: "r32uint",
},
}],
});
const shaderModule = device.createShaderModule({ code: `
enable chromium_experimental_read_write_storage_texture;
@group(0) @binding(0) var tex : texture_storage_2d<r32uint, read_write>;
@compute @workgroup_size(1, 1)
fn main(@builtin(local_invocation_id) local_id: vec3u) {
var data = textureLoad(tex, vec2i(local_id.xy));
data.x *= 2;
textureStore(tex, vec2i(local_id.xy), data);
}`,
});
// You can now create a compute pipeline with this shader module and
// send the appropriate commands to the GPU.
黎明更新
為求一致性,webgpu.h C API 已將下列欄位重新命名:requiredFeaturesCount
為 requiredFeatureCount
、pipelineStatisticsCount
為 pipelineStatisticCount
、colorFormatsCount
為 colorFormatCount
。請參閱 issue dawn:146040。
全新的 DawnInfo
程式 (類似於 vulkaninfo) 可讓您列出切換鈕、轉接器、轉接器功能和轉接器限制。可在建構黎明 samples
時使用。以下為經過大幅精簡的輸出內容。請參閱變更 dawn:149020。
./out/Debug/DawnInfo
Toggles
=======
Name: allow_unsafe_apis
Suppresses validation errors on API entry points or parameter combinations
that aren't considered secure yet.
http://crbug.com/1138528
[…]
Adapter
=======
VendorID: 0x106B
Vendor: apple
Architecture: common-3
DeviceID: 0x0000
Name: Apple M1 Pro
Driver description: Metal driver on macOS Version 13.5.1 (Build 22G90)
Adapter Type: discrete GPU
Backend Type: Metal
Power: <undefined>
Features
========
* depth_clip_control
Disable depth clipping of primitives to the clip volume
https://bugs.chromium.org/p/dawn/issues/detail?id=1178
[…]
Adapter Limits
==============
maxTextureDimension1D: 16,384
maxTextureDimension2D: 16,384
[…]
這份文件僅涵蓋部分重點。請查看完整的修訂版本清單。
WebGPU 新功能
以下是「WebGPU 最新消息」系列文章中涵蓋的所有內容。
Chrome 131
- WGSL 中的裁剪距離
- GPUCanvasContext getConfiguration()
- 點和線圖元不得有深度偏差
- 針對子群組的內建函式
- 實驗性支援多重繪製間接功能
- 著色器模組編譯選項嚴格數學
- 移除 GPUAdapter requestAdapterInfo()
- Dawn 更新
Chrome 130
Chrome 129
Chrome 128
Chrome 127
Chrome 126
Chrome 125
Chrome 124
Chrome 123
Chrome 122
Chrome 121
- 支援 Android 上的 WebGPU
- 在 Windows 上使用 DXC 而非 FXC 進行著色器編譯
- 在運算和算繪階段中執行時間戳記查詢
- 著色器模組的預設進入點
- 支援使用顯示器-p3 做為 GPUExternalTexture 色彩空間
- 記憶體堆積資訊
- Dawn 更新
Chrome 120
Chrome 119
Chrome 118
Chrome 117
Chrome 116
- WebCodecs 整合
- GPUAdapter
requestDevice()
傳回的遺失裝置 - 如果呼叫
importExternalTexture()
,請保持影片播放流暢 - 規格相容性
- 改善開發人員體驗
- Dawn 更新