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: effect1anchors.fill: parentsource: sourceItemradius: toolbar.effectValue * 150visible: false
}
BrightnessContrast {id: effect2anchors.fill: effect1source: effect1brightness: toolbar.effectValue * 2visible: false
}
Image {id: maskImagesource: "mask.png"visible: false
}
ThresholdMask {id: effect3anchors.fill: effect2scale: 1.0 - 0.2 * toolbar.effectValuesource: effect2maskSource: maskImagespread: 0.2threshold: 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: parentscale: 1.0 - 0.2 * toolbar.effectValuesource: sourceItemblurHelperBlurMultiplier: 0.4fastBlurAmount: toolbar.effectValue * 1.5brightnessContrastBrightness: toolbar.effectValue * 2thresholdMaskThresholdLow: toolbar.effectValuethresholdMaskSpreadLow: 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简介博客文章末尾的说明，开始制作自己的自定义效果！

使用QQEM创建效果相关推荐

Pr 入门教程：如何创建效果预设？
欢迎观看 Premiere Pro 教程,小编带大家学习 Pr 的基本编辑技巧,了解如何创建效果预设. 在本文中,我要使用的是 Premiere Pro 项目文件 07_04 在文件夹中找到这个文件, ...
matlab做偏最小二乘回归（PLS带精度验证）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/lusongno1/article/de ...
css3实现折叠效果_使用CSS3创建灵活的折叠纸效果
css3实现折叠效果在本教程中,我们将学习使用CSS3功能(例如背景渐变和框阴影)创建灵活的(响应式)折叠纸效果,该功能可以为网站的内容区域提供漂亮的背景. 步骤1:设置<head> 让 ...
Cesium官方教程8-- 几何体和外观效果
原文地址:https://cesiumjs.org/tutorials/Geometry-and-Appearances/ 几何体和外观效果(Geometry and Appearances) 这篇教 ...
Windows2003下面的批量创建随机用户程序（.NET多线程）
翻看以前的代码,发现有这么一个小工具,以前是做了邮件群发服务器的一个工具,现在公布于众把,呵呵,没有多少技术含量,懂的人,觉得太菜了,大家不要吐槽就行. 1 using System; 2 using ...
JavaFX官方教程（十三）之应用效果
翻译自 Applying Effects 创建视觉效果包含以下主题: 混合效果绽放效果模糊效果投影效果内阴影效果反射照明效果透视效果创建一系列效果介绍如何使用视觉效果来增强Java ...
JAVA实现在面板中添加图表_Java 创建PowerPoint图表并为其添加趋势线
图表,是指将既得数据用图形的方式表示出来.在前文中我们介绍过如何使用Java程序来为Excel文档创建图表的方法.本文将通过使用Java程序来演示如何创建PowerPoint图表及为图表添加趋势线.趋 ...
threejs创建平面几何形状
创建平面几何形状平面几何形状有三种:点,线,面三种,下面说说用threejs创建这几种形状的方法. 创建点创建点可以使用Points类. function createPoints(){//创建一 ...
使用jquery打造一个动态的预览产品颜色效果
在浏览一些电子商务网站的时候,选择一件产品的时候,我们经常会看到点击衣服的颜色,同一件衣服的颜色就会切换,让我们觉得真是比较有意思,这样做的效果给用户的体验比较好,今天就给大家分享一下这种效果的实现原 ...

使用QQEM创建效果

Creating an effect with QQEM

使用QQEM创建效果

Intro

介绍

Creating the effect using QQEM

使用QQEM创建效果

Performance measurements

性能测试

Conclusions

结论

使用QQEM创建效果相关推荐

最新文章

热门文章