Cannot read property 'requestDevice' of null

Question

im trying to render web GPU shader object in WebGpu

and it returning this error

Uncaught (in promise) TypeError: Cannot read property 'requestDevice' of null at cube.html:28

this is my code to the requestDevice

(async () => {
 

    const [adapter, glslang] = await Promise.all([
        navigator.gpu.requestAdapter(),
        import("https://unpkg.com/@webgpu/glslang@0.0.7/web/glslang.js").then(m => m.default())
    ]);

    const device = await adapter.requestDevice();
    
    const canvas = document.getElementById("webgpu-canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

});

any idea to fix this error ??

Answer 1

This happens for one of the following reasons. Check out those in this specific order:

1. WebGPU is disabled when the user has turned off "Use graphics acceleration when available" in chrome://settings/system. Check to see if this setting is turned off and turn it back on

2. WebGPU is not supported on this platform yet. You can enable the chrome://flags/#enable-unsafe-webgpu flag and restart Chrome. For Linux experimental support, you'll also need to enable the chrome://flags/#enable-vulkan flag. Check out WebGPU support in Headless Chrome to learn more.

3. The GPU hardware has been specifically blocklisted. If you see "WebGPU has been disabled via blocklist or the command line" in chrome://gpu, you can disable the WebGPU adapters blocklist by enabling the chrome://flags/#enable-unsafe-webgpu flag and restarting Chrome.

4. There is no matching GPU adapter for the options passed in requestAdapter(). Try calling requestAdapter() with different options.

5. WebGPU requires a GPU (either hardware or software-emulated). You can check if Chrome detects a GPU by visiting chrome://gpu.

See https://developer.chrome.com/docs/web-platform/webgpu/troubleshooting-tips for more tips