Adjusted offscreen pass to be a render pass vs compute for compat with web-colors flag.

examples/screenshot/src/main.rs

@@ -134,7 +134,7 @@ impl Application for Example {
                 screenshot.size.height,
                 screenshot.clone(),
             ))
-            .content_fit(ContentFit::ScaleDown)
+            .content_fit(ContentFit::Contain)
             .width(Length::Fill)
             .height(Length::Fill)
             .into()

wgpu/src/backend.rs

@@ -139,7 +139,7 @@ impl Backend {
         primitives: &[Primitive],
         viewport: &Viewport,
         overlay_text: &[T],
-        texture_extent: wgpu::Extent3d,
+        size: wgpu::Extent3d,
     ) -> Option<wgpu::Texture> {
         #[cfg(feature = "tracing")]
         let _ = info_span!("iced_wgpu::offscreen", "DRAW").entered();
@@ -159,24 +159,7 @@ impl Backend {
             log::info!("Texture format is {format:?}; performing conversion to rgba8..");
             let pipeline = offscreen::Pipeline::new(device);
 
-            let texture = device.create_texture(&wgpu::TextureDescriptor {
+            return Some(pipeline.convert(device, frame, size, encoder));
-                label: Some("iced_wgpu.offscreen.conversion.source_texture"),
-                size: texture_extent,
-                mip_level_count: 1,
-                sample_count: 1,
-                dimension: wgpu::TextureDimension::D2,
-                format: wgpu::TextureFormat::Rgba8Unorm,
-                usage: wgpu::TextureUsages::STORAGE_BINDING
-                    | wgpu::TextureUsages::COPY_SRC,
-                view_formats: &[],
-            });
-
-            let view =
-                texture.create_view(&wgpu::TextureViewDescriptor::default());
-
-            pipeline.convert(device, texture_extent, frame, &view, encoder);
-
-            return Some(texture);
         }
 
         None

wgpu/src/offscreen.rs

@@ -1,12 +1,24 @@
 use std::borrow::Cow;
+use wgpu::util::DeviceExt;
+use wgpu::vertex_attr_array;
 
 /// A simple compute pipeline to convert any texture to Rgba8UnormSrgb.
 #[derive(Debug)]
 pub struct Pipeline {
-    pipeline: wgpu::ComputePipeline,
+    pipeline: wgpu::RenderPipeline,
+    vertices: wgpu::Buffer,
+    indices: wgpu::Buffer,
+    sampler: wgpu::Sampler,
     layout: wgpu::BindGroupLayout,
 }
 
+#[derive(Debug, Copy, Clone, bytemuck::Pod, bytemuck::Zeroable)]
+#[repr(C)]
+struct Vertex {
+    ndc: [f32; 2],
+    texel: [f32; 2],
+}
+
 impl Pipeline {
     pub fn new(device: &wgpu::Device) -> Self {
         let shader =
@@ -17,13 +29,53 @@ impl Pipeline {
                 ))),
             });
 
+        let vertices =
+            device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+                label: Some("iced_wgpu.offscreen.vertex_buffer"),
+                contents: bytemuck::cast_slice(&[
+                    //bottom left
+                    Vertex {
+                        ndc: [-1.0, -1.0],
+                        texel: [0.0, 1.0],
+                    },
+                    //bottom right
+                    Vertex {
+                        ndc: [1.0, -1.0],
+                        texel: [1.0, 1.0],
+                    },
+                    //top right
+                    Vertex {
+                        ndc: [1.0, 1.0],
+                        texel: [1.0, 0.0],
+                    },
+                    //top left
+                    Vertex {
+                        ndc: [-1.0, 1.0],
+                        texel: [0.0, 0.0],
+                    },
+                ]),
+                usage: wgpu::BufferUsages::VERTEX,
+            });
+
+        let indices =
+            device.create_buffer_init(&wgpu::util::BufferInitDescriptor {
+                label: Some("iced_wgpu.offscreen.index_buffer"),
+                contents: bytemuck::cast_slice(&[0u16, 1, 2, 2, 3, 0]),
+                usage: wgpu::BufferUsages::INDEX,
+            });
+
+        let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
+            label: Some("iced_wgpu.offscreen.sampler"),
+            ..Default::default()
+        });
+
         let bind_group_layout =
             device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
                 label: Some("iced_wgpu.offscreen.blit.bind_group_layout"),
                 entries: &[
                     wgpu::BindGroupLayoutEntry {
                         binding: 0,
-                        visibility: wgpu::ShaderStages::COMPUTE,
+                        visibility: wgpu::ShaderStages::FRAGMENT,
                         ty: wgpu::BindingType::Texture {
                             sample_type: wgpu::TextureSampleType::Float {
                                 filterable: false,
@@ -35,12 +87,10 @@ impl Pipeline {
                     },
                     wgpu::BindGroupLayoutEntry {
                         binding: 1,
-                        visibility: wgpu::ShaderStages::COMPUTE,
+                        visibility: wgpu::ShaderStages::FRAGMENT,
-                        ty: wgpu::BindingType::StorageTexture {
+                        ty: wgpu::BindingType::Sampler(
-                            access: wgpu::StorageTextureAccess::WriteOnly,
+                            wgpu::SamplerBindingType::NonFiltering,
-                            format: wgpu::TextureFormat::Rgba8Unorm,
+                        ),
-                            view_dimension: wgpu::TextureViewDimension::D2,
-                        },
                         count: None,
                     },
                 ],
@@ -54,15 +104,56 @@ impl Pipeline {
             });
 
         let pipeline =
-            device.create_compute_pipeline(&wgpu::ComputePipelineDescriptor {
+            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
                 label: Some("iced_wgpu.offscreen.blit.pipeline"),
                 layout: Some(&pipeline_layout),
-                module: &shader,
+                vertex: wgpu::VertexState {
-                entry_point: "main",
+                    module: &shader,
+                    entry_point: "vs_main",
+                    buffers: &[wgpu::VertexBufferLayout {
+                        array_stride: std::mem::size_of::<Vertex>() as u64,
+                        step_mode: wgpu::VertexStepMode::Vertex,
+                        attributes: &vertex_attr_array![
+                            0 => Float32x2, // quad ndc pos
+                            1 => Float32x2, // texture uv
+                        ],
+                    }],
+                },
+                fragment: Some(wgpu::FragmentState {
+                    module: &shader,
+                    entry_point: "fs_main",
+                    targets: &[Some(wgpu::ColorTargetState {
+                        format: wgpu::TextureFormat::Rgba8UnormSrgb,
+                        blend: Some(wgpu::BlendState {
+                            color: wgpu::BlendComponent {
+                                src_factor: wgpu::BlendFactor::SrcAlpha,
+                                dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                                operation: wgpu::BlendOperation::Add,
+                            },
+                            alpha: wgpu::BlendComponent {
+                                src_factor: wgpu::BlendFactor::One,
+                                dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                                operation: wgpu::BlendOperation::Add,
+                            },
+                        }),
+                        write_mask: wgpu::ColorWrites::ALL,
+                    })],
+                }),
+                primitive: wgpu::PrimitiveState {
+                    topology: wgpu::PrimitiveTopology::TriangleList,
+                    front_face: wgpu::FrontFace::Cw,
+                    ..Default::default()
+                },
+                depth_stencil: None,
+                multisample: Default::default(),
+                multiview: None,
             });
 
         Self {
             pipeline,
+            vertices,
+            indices,
+            sampler,
             layout: bind_group_layout,
         }
     }
@@ -70,11 +161,25 @@ impl Pipeline {
     pub fn convert(
         &self,
         device: &wgpu::Device,
-        extent: wgpu::Extent3d,
         frame: &wgpu::TextureView,
-        view: &wgpu::TextureView,
+        size: wgpu::Extent3d,
         encoder: &mut wgpu::CommandEncoder,
-    ) {
+    ) -> wgpu::Texture {
+        let texture = device.create_texture(&wgpu::TextureDescriptor {
+            label: Some("iced_wgpu.offscreen.conversion.source_texture"),
+            size,
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Rgba8UnormSrgb,
+            usage: wgpu::TextureUsages::RENDER_ATTACHMENT
+                | wgpu::TextureUsages::COPY_SRC,
+            view_formats: &[],
+        });
+
+        let view =
+            &texture.create_view(&wgpu::TextureViewDescriptor::default());
+
         let bind = device.create_bind_group(&wgpu::BindGroupDescriptor {
             label: Some("iced_wgpu.offscreen.blit.bind_group"),
             layout: &self.layout,
@@ -85,18 +190,33 @@ impl Pipeline {
                 },
                 wgpu::BindGroupEntry {
                     binding: 1,
-                    resource: wgpu::BindingResource::TextureView(view),
+                    resource: wgpu::BindingResource::Sampler(&self.sampler),
                 },
             ],
         });
 
-        let mut compute_pass =
+        let mut pass = encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
-            encoder.begin_compute_pass(&wgpu::ComputePassDescriptor {
+            label: Some("iced_wgpu.offscreen.blit.render_pass"),
-                label: Some("iced_wgpu.offscreen.blit.compute_pass"),
+            color_attachments: &[Some(wgpu::RenderPassColorAttachment {
-            });
+                view,
+                resolve_target: None,
+                ops: wgpu::Operations {
+                    load: wgpu::LoadOp::Load,
+                    store: true,
+                },
+            })],
+            depth_stencil_attachment: None,
+        });
 
-        compute_pass.set_pipeline(&self.pipeline);
+        pass.set_pipeline(&self.pipeline);
-        compute_pass.set_bind_group(0, &bind, &[]);
+        pass.set_bind_group(0, &bind, &[]);
-        compute_pass.dispatch_workgroups(extent.width, extent.height, 1);
+        pass.set_vertex_buffer(0, self.vertices.slice(..));
+        pass.set_index_buffer(
+            self.indices.slice(..),
+            wgpu::IndexFormat::Uint16,
+        );
+        pass.draw_indexed(0..6u32, 0, 0..1);
+
+        texture
     }
 }

wgpu/src/shader/offscreen_blit.wgsl

@@ -1,22 +1,27 @@
-@group(0) @binding(0) var u_texture: texture_2d<f32>;
+@group(0) @binding(0) var frame_texture: texture_2d<f32>;
-@group(0) @binding(1) var out_texture: texture_storage_2d<rgba8unorm, write>;
+@group(0) @binding(1) var frame_sampler: sampler;
 
-fn srgb(color: f32) -> f32 {
+struct VertexInput {
-    if (color <= 0.0031308) {
+    @location(0) v_pos: vec2<f32>,
-        return 12.92 * color;
+    @location(1) texel_coord: vec2<f32>,
-    } else {
-        return (1.055 * (pow(color, (1.0/2.4)))) - 0.055;
-    }
 }
 
-@compute @workgroup_size(1)
+struct VertexOutput {
-fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+    @builtin(position) clip_pos: vec4<f32>,
-    // texture coord must be i32 due to a naga bug:
+    @location(0) uv: vec2<f32>,
-    // https://github.com/gfx-rs/naga/issues/1997
+}
-    let coords = vec2(i32(id.x), i32(id.y));
+
-
+@vertex
-    let src: vec4<f32> = textureLoad(u_texture, coords, 0);
+fn vs_main(input: VertexInput) -> VertexOutput {
-    let srgb_color: vec4<f32> = vec4(srgb(src.x), srgb(src.y), srgb(src.z), src.w);
+    var output: VertexOutput;
-
+
-    textureStore(out_texture, coords, srgb_color);
+    output.clip_pos = vec4<f32>(input.v_pos, 0.0, 1.0);
+    output.uv = input.texel_coord;
+
+    return output;
+}
+
+@fragment
+fn fs_main(input: VertexOutput) -> @location(0) vec4<f32> {
+    return textureSample(frame_texture, frame_sampler, input.uv);
 }