@real mural Probably it's supposed to be wgpu_canvas.getContext('webpgu')
#canvas element problem with webgpu
placid hornet
Honestly, there's some pretty sketchy parts in that code:
canvas is working in there code, without declaring it because elements with id are implicitly available as globals in the browser - for example <div id="foobar" /> will be available as a foobar global variable, but 1) TS cannot support this (it doesn't know what elements are in your DOM), and it's 2) considered bad practice to actually use these globals: https://stackoverflow.com/questions/24606056/why-is-it-bad-practice-to-use-implicit-id-references-in-javascript
They also never declare commandEncoder, and just do commandEncoder = device.createCommandEncoder();
This is only valid in 'non-strict' JS - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode, writing non-strict JS is pretty rare nowdays (though it's usually inserted by tools like Typescript)
real mural
@placid hornet
thanks for input, I made my code more compact ```ts
async function wgpu_init()
{
console.log("from wgpu_init function");
const adapter = await navigator.gpu.requestAdapter
({
featureLevel: "compatibility",
});
const device = await adapter?.requestDevice();
if (!device) {
console.log("device error");
}
else
{
console.log("device ok");
}
const canvas = document.getElementById("wgpu") as HTMLCanvasElement;
const context = canvas.getContext("webgpu") as GPUCanvasContext;
const devicePixelRatio = window.devicePixelRatio;
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context?.configure
({
device,
format: presentationFormat,
})
}
wgpu_init();```
but it still fails at
