2

Whichever WebGPU example (austin-eng, jack1232/WebGPU-Step-By-Step, etc...) I run in Chrome Canary 97.0.4686.0 with unsafe WebGPU flag enabled I get some errors in console that indicate that my browser does not support WebGPU.

Example: https://austin-eng.com/webgpu-samples/samples/helloTriangle

Is WebGPU Enabled?

TypeError: Cannot read property 'requestDevice' of null

Can you reproduce this behavior?

  • I tested some things on different computers and operation systems. Firefox nightly with flags also do not seem to work. `await navigator.gpu.requestAdapter()` `Uncaught (in promise) DOMException: No matching adapter found!` It's silly that it's late 2021 and support for WebGPU is that bad. Thanks for no comments and negative vote. I appreciate that. – rafineria888wp Oct 31 '21 at 12:03

3 Answers3

4

Recently (at least in 96), WebGPU is no longer behind a flag, instead it's now behind an origin trial. This means that you can register for a token and put it in the <head> of your webpage and it will enable WebGPU for all users.

To do this, go to: https://developer.chrome.com/origintrials/#/register_trial/118219490218475521, fill out the form, and retrieve your token. Note that you can also request a token for localhost for development. Then simply add <meta http-equiv="origin-trial" content={ORIGIN_TRIAL_KEY}/> to your webpage and if registered correctly, WebGPU will be enabled for not only you but everyone that visits your site.

If you are using JSX/React, use this: <meta httpEquiv="origin-trial" content={ORIGIN_TRIAL_KEY}/>

The difference is http-equiv vs httpEquiv.

kungfooman
  • 4,473
  • 1
  • 44
  • 33
Axiverse
  • 1,589
  • 3
  • 14
  • 30
  • Got a token for the domain localhost:8000 but it does not seem to work. `navigator.gpu` is undefined. – Luke Skywalker Jun 02 '22 at 12:33
  • @LukeSkywalker I updated the answer, use the proper meta tag. If you got a token for `localhost`, make sure you don't use `127.0.0.1`. – kungfooman Aug 13 '22 at 08:47
1

As https://web.dev/gpu/#enabling-via-about:flags says, to experiment with WebGPU locally, enable the #enable-unsafe-webgpu flag in about://flags.

To check if WebGPU is supported, use:

if ("gpu" in navigator) {
  // WebGPU is supported! 
}

Caution: The GPU adapter returned by navigator.gpu.requestAdapter() may be null.

At the time of writing, WebGPU is available on select devices on Chrome OS, macOS, and Windows 10 in Chrome 94 with more devices being supported in the future. Linux experimental support is available by running Chrome with --enable-features=Vulkan. More support for more platforms will follow.

François Beaufort
  • 4,843
  • 3
  • 29
  • 38
  • I've added platform information support as I guess you're running on a non supported platform. – François Beaufort Nov 26 '21 at 10:55
  • The WebGPU flag has already been removed as of Chrome 96, possibly earlier. – Axiverse Dec 09 '21 at 02:58
  • This is not true. The WebGPU flag is still there. See https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/about_flags.cc;l=5815;drc=ebc0f2b6f9513225a5493a65da23a7e46cc7b0c3 – François Beaufort Dec 09 '21 at 08:13
  • 1
    It's not available in Chrome version 102 and possibly earlier (M1). I don't talk about source code, but actual, user accessible flag – Robert Monfera May 27 '22 at 13:00
  • For Chrome the flag is extended to 105. But I just checked in Mac Chrome 102 and it is not found in chrome://flags (weird) An alternative way is to launch Chrome from terminal/cmd with --enable-unsafe-webgpu. This should work even when you cannot find it in chrome://flags page – shrekshao Jun 03 '22 at 21:18
0

if you use chrome of canary, why not use the latest canary, as far as I know, satable version is already 108, the latest canary version is 111. when you enable #enable-unsafe-webgpu in the lastest canary chrome. you can use ts code

let adapter: GPUAdapter;
let device: GPUDevice;
export async function getGpuDevice() {
    if (device) {
        return { adapter, device }
    } else {
        try {
            adapter = (await navigator.gpu.requestAdapter())!;
            device = (await adapter!.requestDevice())!;
        } catch (e) {
            alert('your browser don‘t support webgpu\n你的浏览器不支持 webgpu');
        }
        return { adapter, device };
    }
}

good luck!

kuake
  • 1