WebGPU All In One

xgqfrms / 2023-08-10 / 原文

WebGPU All In One

chrome://flags/#enable-webgpu-developer-features

WebGPU is the working name for a potential web standard and JavaScript API for accelerated graphics and compute, aiming to provide "modern 3D graphics and computation capabilities".
It is developed by the W3C GPU for the Web Community Group with engineers from Apple, Mozilla, Microsoft, Google, and others.

https://en.wikipedia.org/wiki/WebGPU

https://www.w3.org/TR/webgpu/

https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API

您的第一个 WebGPU 应用

https://codelabs.developers.google.com/your-first-webgpu-app?hl=zh-cn#0

https://www.infoq.cn/article/qwawharqawdragtcoxqv

demos

if ("gpu" in navigator) {
   console.log(`🚀 WebGPU is supported!`)
}

WebGPU 不需要像 WebG L一样依赖 Canvas 元素作为渲染目标;
开发者可以通过 navigator.gpu 获取显卡和设备，然后直接在GPU上执行渲染和计算操作;
这意味着 WebGPU 不需要在 DOM 中创建 Canvas 元素，也避免了在 Canvas 元素崩溃时所涉及的复杂处理

navigator.gpu
// GPU {}[[Prototype]]: GPUgetPreferredCanvasFormat: ƒ getPreferredCanvasFormat()requestAdapter: ƒ requestAdapter()length: 0name: "requestAdapter"arguments: (...)caller: (...)[[Prototype]]: ƒ ()[[Scopes]]: Scopes[0]constructor: ƒ GPU()Symbol(Symbol.toStringTag): "GPU"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

navigator.gpu.getPreferredCanvasFormat()
// 'bgra8unorm'

navigator.gpu.requestAdapter()
// Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: GPUAdapter