Is there a way to initialize WGPU with HTMLCanvas/WebGlRenderingContext?

[Umenokin]

Hi folks!

As a way to learn rust, I want to migrate my TypeScript/WebGL2 pet project to WASM. I have WebGL2 context from HTML canvas and generally have no issues working directly with WebGL but it seems like working with WGPU will give me the ability to effortlessly switch to WebGPU once it goes live officially.

Is there a way to initialize WGPU in an HTML environment where I create and manage HTMLCanvas myself which means that I need to pass WebGlRenderingContext during WGPU initialization as well as manage events like canvas resizing myself?

Maybe there is a working example?

Thanks!

[grovesNL]

Hi @Umenokin! 👋

You should be able to pass a WebGlRenderingContext using instance.create_surface_from_canvas

wgpu/wgpu/src/lib.rs

Line 1796 in ea05b44

pub fn create_surface_from_canvas(&self, canvas: &web_sys::HtmlCanvasElement) -> Surface {

when you're using the wasm target.

[Umenokin]

Awesome, thanks @grovesNL !!! 😊

[ALPHAAAL]

Hi, I am trying to get wgpu working with HTML canvas as well.

Basically, what I am trying to achieve is
Start animation -> draw frame 1 - 1000 of the animation -> pause it -> do something on js side -> draw frames 2000 - 3000 (I intentionally skip frames, but it shouldn't matter).

I originally tried to use winit as the surface, however, I am not able to figure out how to pause the animation and start it again without creating new event loop (winit doesn't allow creating multiple event loops).

I tried to use create_surface_from_canvas as mentioned by @grovesNL in this thread, however, it seems like the frame rate is much lower than using winit for some reason, and I am not able to figure out why.

Any guidance would be nice, thanks! 😭

[anthonydito]

As of Mar. 2024, the accepted answer isn't up to date with the newest version of wgpu. To create a surface from a canvas, you can do.

let html_canvas: HtmlCanvasElement = ...
let instance = wgpu::Instance::new(InstanceDescriptor {
    backends: wgpu::Backends::all(),
    ..InstanceDescriptor::default()
});
let surface_target = SurfaceTarget::Canvas(html_canvas);
let surface = instance.create_surface(surface_target)

[KySpace]

Does it configure for all projects or the current project? I don't want to change it for everything, though.

[cwfitzgerald]

When editing the setting you can choose to set it either for your user or for the workspace. The workspace takes precedent over any user settings.

[KySpace]

I'm now doing it in a leptos crate. Is there a way I can enable wasm32 everywhere in the project?

[KySpace]

So I followed this method, and I think the surface is created, but I got Surface is not configured for presentation when trying to generate the surface texture.

I'm mostly following the tutorial. Maybe there's something else that I should change?

[KySpace]

Oh, I got it. I need to call surface.configure(&device, &config) first.