can't get webgpu context work | Graphics Programming | Page 1

brittle wave Sep 16, 2025, 7:57 PM

#

async function x()
{
  if (!navigator.gpu) {
    console.error("WebGPU is not available.");
    throw new Error("WebGPU support is not available");        
}
 
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
    console.error("Failed to request Adapter.");
    return;
}
let device = await adapter.requestDevice();
if (!device) {
    console.error("Failed to request Device.");
    return;
}
const wgpu_canvas = <HTMLCanvasElement>document.getElementById("wgpu");
const context = canvas.getContext('webgpu');
 
const canvasConfig = {
    device: device,
    format: navigator.gpu.getPreferredCanvasFormat(),
    usage:
        GPUTextureUsage.RENDER_ATTACHMENT,
    alphaMode: 'opaque'
};
 
context.configure(canvasConfig);
}```

#

why I have that error ?

#

#

it's ts file , following that tutorial, can't find where is the problem ,and how he uses that without issues there ?

#

https://shi-yan.github.io/webgpuunleashed/Basics/creating_an_empty_canvas.html

WebGPU Unleashed: A Practical Tutorial

WebGPU Unleashed, your ticket to the dynamic world of graphics programming. Dive in and discover the magic of creating stunning visuals from scratch, mastering the art of real-time graphics, and unlocking the power of WebGPU - all in one captivating tutorial.

woeful meadow Sep 17, 2025, 2:16 AM

#

brittle wave

Looks like a typo

brittle wave Sep 17, 2025, 7:08 AM

#

@woeful meadow what do you mean typo

#

async function wgpu_init()
{
  const adapter = await navigator.gpu.requestAdapter
  ({
    featureLevel: "compatibility",
  });
  const device = await adapter?.requestDevice();

  const canvas = document.querySelector("wgpu") as HTMLCanvasElement;
  const context = canvas.getContext("webgpu") as GPUCanvasContext;
  const devicePixelRatio = window.devicePixelRatio;

  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context?.configure
  ({
    device,
    format: presentationFormat,
  })
}```

#

#

any ideas what's up with this ? something happens in canvas.getContext

#

I took that code from webgpu samples , that works in my browser but I can't make it work in vscode ...

#

why why 🙁

#

why device errors

woeful meadow Sep 17, 2025, 7:10 AM

#

brittle wave ```ts async function x() { if (!navigator.gpu) { console.error("WebGPU is ...

Looks fixed in the new code, you were using canvas in this code which wasn't defined (I assume you meant wgu_canvas)

brittle wave Sep 17, 2025, 7:11 AM

#

yes .. I took a new code

#

#

it's named correctly

#

  const canvas = document.querySelector("wgpu") as HTMLCanvasElement;

#

is that correct ?

#

  const context = canvas.getContext("webgpu") as GPUCanvasContext;

woeful meadow Sep 17, 2025, 7:12 AM

#

Also querySelector takes a CSS selector so to query by ID with it you need a # prefix

#

Or just use getElementById

brittle wave Sep 17, 2025, 7:13 AM

#

  const canvas = document.getElementById("wgpu") as HTMLCanvasElement;

#

ok now ?

#

but device still fails ..

#

woeful meadow Sep 17, 2025, 7:14 AM

#

Whats the error message?

brittle wave Sep 17, 2025, 7:14 AM

#

woeful meadow Sep 17, 2025, 7:16 AM

#

Oh you need to assert that its not null with the ! operator (postfix) iirc

#

I'd recommend learning a bit more about typescript forgderp2

brittle wave Sep 17, 2025, 7:17 AM

#

which element I need to assert with ! there ?

woeful meadow Sep 17, 2025, 7:19 AM

#

The device, it currently could be undefined if requestDevice failed (or requestAdapter)

#

But it looks like context.configure expects the device to not be undefined

#

(the type GPUDevice | undefined is not compatible with GPUDevice)

brittle wave Sep 17, 2025, 7:22 AM

#

ok I will look into it , thanks !

#

  const device = await adapter?.requestDevice();
  if (!device) {
    console.log("device error");
  }
  else
    {
      console.log("device ok");
    }```

#

this says device is ok in console

#

hence , I don't think it's empty

#

but it still errors 🙂

#can't get webgpu context work