How to draw multiple surfaces?

[CestcaVision]

Now I can see that the example realize multiple windows. But if I'd like one window with several canvas or surfaces, each canvas render its own frame simutainiously. Does anyone know how to do?
🙏

[kpreid]

There are several approaches you can take here. In order of increasing complexity and separation,

• Use the viewport and/or scissor rectangles to confine drawing to a portion of the surface.
• Composite things yourself: render each “canvas”'s content to a separate texture, then render whatever combination of those textures you want to the surface. (This should fit well into any 2D UI system your application might have.)
• Create multiple surfaces per window: you will have to write platform-specific code for this because each desktop platform understands these things differently.

[CestcaVision]

Thank you, kpreid👍!! Your suggestions are very comprehensive and helpful. I still have some confusions.
Firstly, I want to show you the result I hope to achieve.

I implemented it on the web page using TypeScript WebGPU. I set different contexts through different canvases, and each context can independently implement its rendering logic. The physical coordinates of the canvas can easily achieve the layout I want. P.S. Sorry for transcribing some code from ShaderToy, just for testing purposes only."

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const format = navigator.gpu.getPreferredCanvasFormat();
const canvas1 = document.querySelector("#canvas1") as HTMLCanvasElement;
const canvas2 = document.querySelector("#canvas2") as HTMLCanvasElement;
const canvas3 = document.querySelector("#canvas3") as HTMLCanvasElement;
const context1 = canvas1.getContext("webgpu");
const context2 = canvas2.getContext("webgpu");
const context3 = canvas3.getContext("webgpu");

However, back to the native side, using wgpu, I encountered a few confusions.
I tried your first suggestion. I rendered two different viewports through two rpasses. I must set the loadOp of rpass2 to Load to avoid overlaying the first viewport, but this setting affects the rendering of rpass2 itself.

                    let mut rpass2 = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
                        label: None,
                        color_attachments: &[Some(wgpu::RenderPassColorAttachment {
                            view: &view,
                            resolve_target: None,
                            ops: wgpu::Operations {
                                load: wgpu::LoadOp::Load,
                                store: true,
                            },
                        })],
                        depth_stencil_attachment:None,
                    });
                    rpass2.set_pipeline(&render_pipeline2);
                    rpass2.set_viewport(200.0,200.0,200.0,200.0,0.0,1.0);
                    rpass2.draw(0..3, 0..1);

I hope the rendering of each part can be more independent. So, I tried your third suggestion, setting multiple surfaces. surface should correspond to context of the canvas on the web side in conception. However, when I request an adapter, the parameter of type RequestAdapterOptions compatible_surface only accepts one Option<S>, so I have to request an adapter multiple times; Besides, I did not find any function or parameter in wgpu to set the position of the surface relative to the window, only the size can be set.

let adapter = instance
        .request_adapter(&wgpu::RequestAdapterOptions {
            power_preference: wgpu::PowerPreference::default(),
            force_fallback_adapter: false,
            // Request an adapter which can render to our surface
            compatible_surface: Some(&surface),

        })
        .await
        .expect("Failed to find an appropriate adapter");
let mut config = wgpu::SurfaceConfiguration {
        usage: wgpu::TextureUsages::RENDER_ATTACHMENT,
        format: swapchain_format,
        width: size.width/2,
        height: size.height/2,
        present_mode: wgpu::PresentMode::Fifo,
        alpha_mode: swapchain_capabilities.alpha_modes[0],
        view_formats: vec![],
};

[kpreid]

I hope the rendering of each part can be more independent.

Then you should probably take the second option — rendering to textures.

So, I tried your third suggestion, setting multiple surfaces.

I should have clarified: I do not mean the thing called wgpu::Surface. I mean the actual underlying surface that the OS/window compositor then puts on the screen. As I said before, you need platform-specific code to create those entities — it is a big project, and you cannot do it just with winit. (Unless you're on web in which case you can just create multiple <canvas>.) I was not recommending that you attempt this — just listing something that is theoretically possible.