使用QQEM创建效果

Creating an effect with QQEM

使用QQEM创建效果

November 03, 2022 by Kaj Grönholm | Comments

2022年11月3日  Kaj Grönholm |评论

Todays blog post gives a bit more information about how to effectively use the Qt Quick Effect Maker (see the QQEM introduction blog post). We will first create an example effect using several Qt Graphical Effects and then re-create this same effect using a single QQEM multi-effect. This will be done with the node editor, so no experience of writing a shader code is required.

​今天的博客文章提供了关于如何有效使用Qt Quick Effect Maker的更多信息（参见QQEM简介博客文章）。我们将首先使用几个Qt图形效果创建一个示例效果，然后使用单个QQEM多重效果重新创建相同的效果。这将使用节点编辑器完成，因此不需要编写着色器代码的经验。

Intro

介绍

It is Monday morning. You are early in work as usual, drinking your morning coffee and checking tasks when email from The Designer arrives.

今天是星期一上午。你像往常一样很早就开始工作，喝着早上的咖啡，在设计师的电子邮件到达时检查任务。

Seems easy to do with Qt Quick. You take a sip of coffee, roll up the sleeves and start coding. Luckily Qt Quick contains Graphical Effects which can be used for this. After coding a while, you end up with a functional effect and a tester application which looks like this:

​使用Qt Quick似乎很容易。你喝一口咖啡，卷起袖子开始编码。幸运的是，Qt Quick包含可用于此目的的图形效果。编码一段时间后，您将得到一个功能效果和一个测试应用程序，它看起来如下：

https://youtu.be/XpQmAN59HN0

The relevant source code for the effect is:

效果的相关源代码是：

FastBlur {
    id: effect1
    anchors.fill: parent
    source: sourceItem
    radius: toolbar.effectValue * 150
    visible: false
}
BrightnessContrast {
    id: effect2
    anchors.fill: effect1
    source: effect1
    brightness: toolbar.effectValue * 2
    visible: false
}
Image {
    id: maskImage
    source: "mask.png"
    visible: false
}
ThresholdMask {
    id: effect3
    anchors.fill: effect2
    scale: 1.0 - 0.2 * toolbar.effectValue
    source: effect2
    maskSource: maskImage
    spread: 0.2
    threshold: toolbar.effectValue
}

So basically, you combine 3 graphical effects after each other: FastBlur, BrightnessContrast and ThresholdMask with a custom masking image. Being satisfied with this, you provide the effect and a small tester application to The Designer with a note "Did you mean something like this?" and continue being awesome for the rest of the day.

因此，基本上，您将3种图形效果相互结合：FastBlur、BrightnessContrast和ThresholdMask，并使用自定义遮罩图像。对这一点感到满意，您向设计师提供了效果和一个小型测试应用程序，并添加了一个注释“您的意思是这样的吗？”并在接下来的一天里继续表现出色。

Next morning, a new email arrives. This time from The Project Manager.

第二天早上，一封新邮件到达。这次来自项目经理。

OK, so nobody had mentioned to you that the customer runs this on an embedded device. And the effect you made yesterday was anyway just an initial version to get feedback. But that's OK. You know exactly what to do next: Implement the same effect as a single multieffect using the new Qt Quick Effect Maker.

好的，所以没有人向你提到客户在嵌入式设备上运行这个。你昨天所做的效果只是一个初步的版本，以获得反馈。但没关系。你确切知道下一步该做什么：使用新的Qt Quick效果生成器实现与单个多重效果相同的效果。

Creating the effect using QQEM

使用QQEM创建效果

Here's a video showing how to create the above effect with the Qt Quick Effect Maker using just nodes and properties.

下面是一段视频，演示如何使用Qt Quick effect Maker仅使用节点和属性创建上述效果。

https://youtu.be/z5x1LCowd3w

As you can see, creating, testing, and exporting the effect with QQEM took only about 3 minutes. The source code to use the exported effect component in your application looks like this:

如您所见，使用QQEM创建、测试和导出效果只需3分钟。在应用程序中使用导出效果组件的源代码如下所示：

SmoothFadeEffect {
    anchors.fill: parent
    scale: 1.0 - 0.2 * toolbar.effectValue
    source: sourceItem
    blurHelperBlurMultiplier: 0.4
    fastBlurAmount: toolbar.effectValue * 1.5
    brightnessContrastBrightness: toolbar.effectValue * 2
    thresholdMaskThresholdLow: toolbar.effectValue
    thresholdMaskSpreadLow: 0.2
}

So instead of 3 separate effect components there is only one, with properties to control blur, brightness and masking.

因此，没有3个单独的效果组件，只有一个，具有控制模糊、亮度和遮罩的属性。

Performance measurements

性能测试

Now let's test the performance of the original Graphical Effects version vs. custom QQEM multi-effect. Testing is done on a beefy Samsung Galaxy Tab S8 with Adreno 730 GPU, increasing the amount of effect items animating on screen and measuring how that affects the framerate. Note that Tab S8 has higher frequency 120Hz screen.

现在，让我们测试原始图形效果版本与自定义QQEM多效果的性能。测试是在带有Adreno 730 GPU的三星Galaxy Tab S8上完成的，它增加了屏幕上动画效果项的数量，并测量了它对帧速率的影响。请注意，选项卡S8具有更高频率的120Hz屏幕。

What we can see is that the initial effect using multiple Qt Graphical Effects maintains 120fps up to 7 effect items, while the QQEM multi-effect reaches solid 120fps still with 12 effect items: Combining effects into a single shader effect brings a notable performance gain.

我们可以看到的是，使用多个Qt图形效果的初始效果可以保持120fps（最多7个效果项），而QQEM多重效果可以达到120fps，但仍有12个效果项：将效果组合为单个着色器效果会带来显著的性能提升。

You provide this custom effect to The Project Manager, it runs at solid 60fps on the customer target hardware and everyone is happy.

您将此自定义效果提供给项目经理，它在客户目标硬件上以60fps的速度运行，每个人都很高兴。

Conclusions

结论

Let's conclude why you may want to create custom effects using QQEM:

让我们总结一下为什么您可能希望使用QQEM创建自定义效果：

• Performance: Chaining multiple Qt Graphical Effects requires an additional draw call, an additional set of shader passes and an additional offscreen buffer for each effect you add. QQEM composes the effect into a single draw call, shader & buffer.
• 性能：链接多个Qt图形效果需要一个额外的绘制调用、一组额外的着色器过程以及为每个添加的效果添加额外的屏幕外缓冲区。QQEM将效果合成为单个绘制调用、着色器和缓冲区。
• More effects: QQEM contains also effect nodes not available in Qt Graphical Effects. For example, Vignette, Noise, ColorLUT, NormalMapping etc. and all of these can be customized. This means that you have more effects to choose from, to reach the desired outcome.
• 更多效果：QQEM还包含Qt图形效果中不可用的效果节点。例如，Vignette、Noise、ColorLUT、NormalMapping等，所有这些都可以定制。这意味着你有更多的效果可供选择，以达到期望的结果。
• Customization: With QQEM you can create fully custom nodes, with custom shader code and properties. These custom nodes can be combined with the built-in nodes. This allows extending the effect while keeping the performance optimal.
• 自定义：使用QQEM，您可以使用自定义着色器代码和属性创建完全自定义的节点。这些自定义节点可以与内置节点组合。这允许在保持最佳性能的同时扩展效果。

The source codes of the example application with both versions of the effect are available in here. Convinced? See the instructions from the end of QQEM Introduction blog post and start making your own custom effects!

此处提供了具有两个版本效果的示例应用程序的源代码。确信吗？查看QQEM简介博客文章末尾的说明，开始制作自己的自定义效果！