使用 DX Compositor 的 UWP App 实时模糊背景

Question

所以 UWP 合成支持已经有一段时间了，我正在寻找一种对元素进行实时模糊处理的方法（在移动或加载时实时模糊，而不是静态快照）。到目前为止，我一直在查看有关 Whosebug 和 google 的一些答案，这让我使用 Lumia Imaging SDK Sample and Win2D. None of them are good enough for realtime blur support. I know doing blur in realtime is possible in composition because I have seen demos of blurred videos and there is an obsolete project XAMLFx，它允许您在 8.1 应用程序上使用 DX 模糊几乎所有内容。

我不想使用 RenderTargetBitmap（想让我的 UI 线程空闲）。我怎样才能只使用组合 API:

ContainerVisual rootVisual = GetVisual(this.Content);
Compositor compositor = rootVisual.Compositor;

// what next?

非常感谢任何帮助:)

Answer 1

注意：这些功能（模糊和背景画笔）需要 Windows10 周年纪念更新。您目前可以通过 Windows Insider 预览 SDK计划

先决条件

针对 Windows 10 周年更新
基本了解视觉层以及视觉树的工作原理。您可以了解更多 here.

此外，您可以查看我写的要点 here，这是一种快速起床的方法，并且运行在 XAML 应用程序中使用组合 API .它也使用效果进行演示。不仅如此，它还涵盖了使用 Composition API（使用我编写的包）加载图像。

入门

您可以通过两种方式在合成 API 中使用模糊效果。一种是适用于单个表面的法线效果。另一种是将其用作 "Backdrop" 画笔，将其后面的所有内容模糊化。

要使用模糊效果，您需要使用 Win2D 中的 GaussianBlurEffect 定义。事情是这样的：

GaussianBlurEffect blurEffect = new GaussianBlurEffect() 
{
    Name = "Blur",
    BlurAmount = 0.0f, // You can place your blur amount here.
    BorderMode = EffectBorderMode.Hard,
    Optimization = EffectOptimization.Balanced,
    Source = new CompositionEffectSourceParameter("source")
};

下一步是创建效果工厂：

var effectFactory = compositor.CreateEffectFactory(blurEffect, new[] {"Blur.BlurAmount"});

第二个参数不是必需的，但提供它允许您在编译效果后设置动画或更改命名的属性。在这种情况下，我们现在可以更改或动画化 BlurAmount。如果您想重复使用模糊效果工厂来创建多个模糊效果画笔，但让它们都使用不同的 BlurAmount，这将很有用。

下一步取决于您希望效果如何工作。

单曲面

如果您希望它仅适用于单个表面，您可以执行以下操作：

var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("source", someOtherSurfaceBrush);
visual.Brush = effectBrush;

背景

但是，如果您想动态模糊给定视觉背后的大量内容，您可以执行以下操作：

var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("source", compositor.CreateBackdropBrush());
visual.Brush = effectBrush;

请注意，这看起来与第一种方法非常相似，但不是给它一个表面画笔，而是给它一个背景画笔。这将实时获取视觉背后的内容并将其输入到效果源中。在这种情况下，任何东西 "behind" 视觉效果都会变得模糊。

性能

如果您只模糊单个图像，最好模糊单个表面。您应该尝试仅在确实需要时才使用 BackdropBrush。

给我看更多！

要查看更多信息，请前往我们的 GitHub page! We've created a custom XAML control that should help you out here, and you can see it in action here. You can also see the //build talk here。

使用 DX Compositor 的 UWP App 实时模糊背景

UWP App realtime blur background using DX Compositor

c#

directx

composition

win-universal-app

uwp-xaml