踌躇满志

演示如何使用通过Qt Quick Effect Maker (QQEM) 创建的效果。

Wiggly演示了如何在Qt Quick 应用程序中使用用Qt Quick Effect Maker (QQEM) 创建的着色器特效。通过简单的Qt Quick 用户界面，用户可以更改 Wiggly 文字和波浪大小，以及应用电云效果。

运行示例

运行示例 Qt Creator，打开Welcome 模式，然后从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

应用程序基础知识

示例的大部分内容和设置都包含在main.qml文件中。首先，创建一个用作效果源的项目。

Rectangle {
    id: sourceItem
    anchors.centerIn: parent
    width: textItem.width + 60 * mainWindow.px
    height: textItem.height + 30 * mainWindow.px
    color: "#d0d0d0d0"
    border.color: "#d0ffffff"
    border.width: 4 * mainWindow.px
    radius: 20 * mainWindow.px
    layer.enabled: true
    layer.smooth: true
    visible: false
    Text {
        id: textItem
        anchors.centerIn: parent
        text: wigglyTextField.text
        font.family: font1.font.family
        font.pixelSize: Math.min(200 * mainWindow.px, 0.8 * mainWindow.width / text.length)
    }
}

该项目是一个Rectangle ，内含Text 元素。矩形的大小取决于文本的字符数，以使其能很好地适应应用程序窗口。这里重要的两行是layer.enabled：true和visible：false，前者用于为特效创建屏幕外纹理，后者用于隐藏该元素，因为特效将替换其内容。如果项目是可见的，它看起来就像这样，但没有摇摆效果：

接下来，创建用于控制效果的设置工具栏。

TextField {
    id: wigglyTextField
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.3
    text: "Wiggly"
}
Slider {
    id: wigglyAmountYSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 40
}
Slider {
    id: wigglyAmountXSlider
    anchors.verticalCenter: parent.verticalCenter
    width: mainWindow.width * 0.15
    from: 0
    to: 100
    value: 20
}
Switch {
    id: electricSwitch
    anchors.verticalCenter: parent.verticalCenter
}

这些组件使用 Qt Quick Controls堆叠在Row 元素内。第一个是TextField ，您可以用它来更改摇摆文字。然后是单独的Slider 元素，用于控制 X 和 Y 坐标的波形大小。最后一个控件是Switch ，用于启用电云效果。

WigglyEffect {
    id: wigglyEffect
    source: sourceItem
    anchors.fill: sourceItem
    timeRunning: true
    wigglyAmountX: wigglyAmountXSlider.value
    wigglyAmountY: wigglyAmountYSlider.value
    electricCloudColor.a: electricSwitch.checked ? 1.0 : 0.0
    wigglyShadows: 0.5
}

该 WigglyEffect 应用于之前定义的sourceItem 。代码将timeRunning 设置为 true，以实现动画效果。最后，它将一些着色器效果属性连接到控制组件。

您也可以查看WigglyEffect.qml 文件，了解效果的详细信息。但该文件是由 QQEM 工具创建的，因此通常不应手动修改。相反，请按照下一节的说明使用Qt Quick Effect Maker 。

在 QQEM 中修改效果

如上所述，WigglyEffect是使用Qt Quick Effect Maker 创建的。有关 QQEM 安装的更多信息，请参阅安装 Qt Quick Effect Maker 文档。

修改特效

在 QQEM 工具中打开特效项目文件 (qep)。
修改特效节点、属性或着色器代码，并查看实时预览。
准备就绪后，将修改后的效果导出到应用程序中。

在 QQEM 中打开WigglyEffect/WigglyEffect.qep 项目后，您会看到类似下面的内容：

在左侧，您可以看到带有该效果不同节点的Node view 。右上角显示的是Property view ，其中包含效果的属性（API）。右下角显示效果的Live view ，以及当前选择的预览源项。要查看带有实际内容的实时预览，请将sourceItem 的图像添加到Edit >Preferences 的源列表中，然后从预览工具栏弹出列表中选择该图像。

要修改摇摆效果的着色器代码，请双击Wiggly节点或选中它，然后从DESIGN 模式切换到CODE 模式。然后选择VERT 选项卡，查看顶点着色器，大部分效果代码都在这里：

@mesh 63, 1
out vec3 wigglyColor;

float rainbowColor(float phase) {
    return abs(sin(texCoord.x * 2.0 + iTime + phase));
}

@main
{
    float wave = sin(vertCoord.x * 0.01 + iTime * 3.0);
    vertCoord.x += wigglyAmountX * wave;
    vertCoord.y += wigglyAmountY * wave;
    const float tau = 6.28318530718;
    wigglyColor.r = rainbowColor(0.0);
    wigglyColor.g = rainbowColor(1.0/3.0 * tau);
    wigglyColor.b = rainbowColor(2.0/3.0 * tau);
    float shadowAmount = (wigglyAmountX + wigglyAmountY) * wave;
    wigglyColor.rgb += shadowAmount * wigglyShadows * 0.01;
}

第一行设置了ShaderEffect 网格大小。这是必要的，因为默认情况下只有边角有顶点，而摇摆效果需要更多移动顶点。然后，设置顶点着色器输出wigglyColor 变量，该变量稍后将用于片段着色器，以应用一些阴影。接下来，引入一个名为rainbowColor 的函数，该函数返回相位的单通道颜色。

在主方法中，代码首先设置vertCoord ，以正弦波移动顶点位置。接下来的几行设置了摇摆彩虹的红色、绿色和蓝色通道。最后两行在波浪后应用一些阴影。

接下来，选择FRAG 选项卡，查看片段着色器代码：

@main
{
    fragColor.rgb *= wigglyColor * fragColor.a;
}

片段着色器非常简单，只是将当前源颜色与从顶点着色器接收到的wigglyColor 相乘。

更多的处理本可以在片段着色器一侧完成，但由于顶点的数量明显少于片段（像素）的数量，因此在顶点着色器上编写代码通常性能更高。有些工具（如Shaderertoy）只允许编写片段着色器。但由于Qt Quick 和 QQEM 也支持自定义顶点着色器，因此应尽量利用它们。

修改这些着色器后，Live view 的输出会立即发生变化。要在示例程序中使用修改后的着色器，请从菜单中选择File >Export 。

现在，您可以更多地使用 QQEM 功能。例如，添加新节点、更改或添加新属性、在着色器代码中使用这些属性等等。以下是LedScreen 节点添加到节点图开头后的效果示例：

文件：

将 Shadertoy 效果移植到Qt Quick Effect Maker

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.