Demonstrate how transparent windows can be used

Author: DJMcNab

examples/scenes/src/test_scenes.rs

@@ -76,6 +76,7 @@ export_scenes!(
     labyrinth(labyrinth),
     robust_paths(robust_paths),
     base_color_test(base_color_test: animated),
+    translucent_base(translucent_base),
     clip_test(clip_test: animated),
     longpathdash_butt(impls::longpathdash(Cap::Butt), "longpathdash (butt caps)", false),
     longpathdash_round(impls::longpathdash(Cap::Round), "longpathdash (round caps)", false),
@@ -1539,6 +1540,20 @@ mod impls {
         );
     }
 
+    pub(super) fn translucent_base(scene: &mut Scene, params: &mut SceneParams<'_>) {
+        let background_color = Color::TRANSPARENT;
+        params.base_color = Some(background_color);
+
+        // Blend a white square over it.
+        scene.fill(
+            Fill::NonZero,
+            Affine::IDENTITY,
+            palette::css::WHITE.with_alpha(0.5),
+            None,
+            &Rect::new(50.0, 50.0, 500.0, 500.0),
+        );
+    }
+
     pub(super) fn clip_test(scene: &mut Scene, params: &mut SceneParams<'_>) {
         let clip = {
             const X0: f64 = 50.0;

examples/with_winit/src/lib.rs

@@ -782,6 +782,7 @@ fn window_attributes() -> WindowAttributes {
     Window::default_attributes()
         .with_inner_size(LogicalSize::new(1044, 800))
         .with_resizable(true)
+        .with_transparent(true)
         .with_title("Vello demo")
 }
 

vello/src/util.rs

@@ -6,8 +6,9 @@
 use std::future::Future;
 
 use wgpu::{
-    util::TextureBlitter, Adapter, Device, Instance, Limits, Queue, Surface, SurfaceConfiguration,
-    SurfaceTarget, Texture, TextureFormat, TextureView,
+    util::{TextureBlitter, TextureBlitterBuilder},
+    Adapter, BlendComponent, BlendFactor, BlendOperation, BlendState, Device, Instance, Limits,
+    Queue, Surface, SurfaceConfiguration, SurfaceTarget, Texture, TextureFormat, TextureView,
 };
 
 use crate::{Error, Result};
@@ -89,18 +90,28 @@ impl RenderContext {
             height,
             present_mode,
             desired_maximum_frame_latency: 2,
-            alpha_mode: wgpu::CompositeAlphaMode::Auto,
+            alpha_mode: wgpu::CompositeAlphaMode::PreMultiplied,
             view_formats: vec![],
         };
         let (target_texture, target_view) = create_targets(width, height, &device_handle.device);
+        let premul_blitter = TextureBlitterBuilder::new(&device_handle.device, format)
+            .blend_state(BlendState {
+                alpha: BlendComponent::REPLACE,
+                color: BlendComponent {
+                    src_factor: BlendFactor::SrcAlpha,
+                    dst_factor: BlendFactor::Zero,
+                    operation: BlendOperation::Add,
+                },
+            })
+            .build();
         let surface = RenderSurface {
             surface,
             config,
             dev_id,
             format,
             target_texture,
             target_view,
-            blitter: TextureBlitter::new(&device_handle.device, format),
+            blitter: premul_blitter,
         };
         self.configure_surface(&surface);
         Ok(surface)