Qt Quick Effect Maker

Introducing Qt Quick Effect Maker
Qt Quick Effect Maker简介

I’m super excited to finally talk about the project I have been working with during the past months: Qt Quick Effect Maker (QQEM). This blog post is an introduction into this new tool and more related posts are coming in the near future. So what is it? QQEM is a custom-made tool designed for a single purpose:

最后，我非常兴奋地谈到我在过去几个月一直在做的项目：Qt Quick Effect Maker（QQEM）。这篇博客文章是对这个新工具的介绍，不久将有更多相关文章发布。那是什么？QQEM是为单一目的而设计的定制工具：

Creating shader effects for Qt Quick with high productivity and performance.

为Qt Quick创建着色器效果，具有较高的生产率和性能。

As a picture is worth a thousand words and video is worth a lot more, here’s a short introduction video:

由于一张图片胜过千言万语，而视频价值更高，这里有一段简短的介绍视频：

https://youtu.be/5BQ_VDqL42o
The Approach
方法

Qt Quick Effect Maker is a hybrid editor, offering both a node editor and a code editor. This was the approach we selected early on as we wanted a tool that is both productive and easy to use, but also allows freely writing and tweaking the shader code. There are many “shader graph” node editors which allow making effects with just nodes. The no-code approach of these tools can be tempting as they allow doing complex effects without writing any shader code. But there are also drawbacks, like not being able to freely adjust and optimize the shaders and needing to learn the set of nodes which create the visual programming language. This can result into 80-20 rule, where the first 80% is easy but the last 20% seem impossible to achieve. For these reasons we proceeded with the hybrid approach and a simplified node editor. QQEM nodes are individual effect components, which are linked one after another, so they only have a single in and out connections. The shader source code of all the nodes, both custom nodes and built-in nodes, can be freely modified. The nodes are then combined, and Qt shader tools generates optimized binary shaders for all the RHI backends (OpenGL, Vulkan, Metal, Direct3D).

Qt Quick Effect Maker是一个混合编辑器，提供节点编辑器和代码编辑器。这是我们早期选择的方法，因为我们想要一个既高效又易于使用的工具，但也允许自由编写和调整着色器代码。有许多“着色器图形”节点编辑器，允许仅使用节点制作效果。这些工具的无代码方法非常诱人，因为它们允许在不编写任何着色器代码的情况下执行复杂效果。但也有缺点，例如无法自由调整和优化着色器，需要学习创建可视化编程语言的节点集。这可能导致80-20规则，其中前80%容易实现，后20%似乎不可能实现。由于这些原因，我们继续使用混合方法和简化的节点编辑器。QQEM节点是单独的效果组件，它们一个接一个地链接在一起，因此它们只有一个输入和输出连接。可以自由修改所有节点（自定义节点和内置节点）的着色器源代码。然后合并节点，Qt着色器工具为所有RHI后端（OpenGL、Vulkan、Metal、Direct3D）生成优化的二进制着色器。

The main target users for QQEM are developers and technical artists who understand some GLSL code. But even if you don’t, it can still be used to combine built-in effect nodes and modifying their properties. Switching between DESIGN (nodes editor) mode and CODE (source editor) mode while developing the effects is highly encouraged, no matter if you are more of a developer or a designer.

QQEM的主要目标用户是了解一些GLSL代码的开发人员和技术艺术家。但即使您不这样做，它仍然可以用于组合内置效果节点并修改其属性。无论您是开发人员还是设计师，都强烈建议在开发效果时在DESIGN（节点编辑器）模式和CODE（源编辑器）模式之间切换。
Main Features
主要特点

Here is a summary of the most notable QQEM features:

这里总结了最显著的QQEM特性：

Live preview: While editing the effect, shaders are automatically baked to RHI qsb and shown in live preview. When adjusting properties which don't require shader changes, preview is instant. Furthermore, changes to shaders are almost instant.
实时预览：编辑效果时，着色器将自动烘焙到RHI qsb并显示在实时预览中。调整不需要更改着色器的属性时，预览是即时的。此外，对着色器的更改几乎是即时的。
Node view: QQEM contains a node view to visually build shaders from components. These nodes include most of the Qt Graphical Effects. Currently over 30 nodes are provided which can be used as basis for custom effects, with more to come available in the future.
节点视图：QQEM包含一个节点视图，用于从组件可视化构建着色器。这些节点包括大多数Qt图形效果。目前提供了30多个节点，可以用作自定义效果的基础，将来还会有更多节点可用。
Shader code editor: QQEM is a "hybrid editor" meaning that it combines both nodes and code editor. All effect nodes shaders can be freely edited. Code editor contains GLSL syntax highlighting, auto indent, find etc. features for productivity.
着色器代码编辑器：QQEM是一个“混合编辑器”，意味着它结合了节点和代码编辑器。可以自由编辑所有效果节点着色器。代码编辑器包含GLSL语法高亮显示、自动缩进、查找等功能，以提高效率。
Multieffects: Compared to Qt Quick Graphical Effects, QQEM combines all the effects into a single shader. This avoids extra FBOs which is good for performance.
多重效果：与Qt Quick图形效果相比，QQEM将所有效果组合到单个着色器中。这避免了额外的FBO，这对性能有好处。
JSON file format: QQEM stores projects (qep) and nodes (qen) in JSON format. These files can be easily shared with others for productivity.
JSON文件格式：QQEM以JSON格式存储项目（qep）和节点（qen）。为了提高工作效率，可以轻松地与其他人共享这些文件。
Shadertoy compatibility: Variable naming in QQEM is mostly compatible with the Shadertoy, which means that shaders made with Shadertoy can be easily ported into QQEM and vice versa. Not all Shadertoy features are supported (like multipass, cubemaps, audio), but on the other hand QQEM supports some extra features (like vertex shaders, custom textures, properties) for increased performance.
​Shadertoy兼容性：QQEM中的变量命名主要与Shadertoy兼容，这意味着使用Shadertoy-制作的着色器可以轻松移植到QQEM-反之亦然。并非所有Shadertoy功能都受支持（如multipass、cubemaps、audio），但另一方面，QQEM支持一些额外功能（如顶点着色器、自定义纹理、属性）以提高性能。
Pure Qt Quick: QQEM itself is implemented with Qt Quick (no QWidgets) and Qt Quick Controls, so it helps us improving our desktop UI offering. Also, the whole usage flow has been designed for Qt Quick and Qt RHI, to be as integrated as possible.
纯Qt-Quick:QQEM本身是通过Qt-Quick（无QWidgets）和Qt-QuickControls实现的，因此它有助于我们改进桌面UI产品。此外，整个使用流程设计用于Qt-Quick和Qt-RHI，以尽可能集成。

There would be a much more to talk about, but let’s keep this blog post brief and to the point.

还有很多要谈的，但让我们保持这篇博客文章的简短和中肯。
Current Status and What’s Next?
当前状态和下一步是什么？

QQEM requires Qt 6.4 (or the dev branch) so install that first. Then you can build the latest QQEM directly from the source repository. This is still very much work in progress and there are no prebuilt binaries yet available, but we wanted to release QQEM source codes available now to start getting more users and feedback. So far we have used it internally in some customer projects and example projects, and the response has been very positive.

​QQEM需要Qt6.4（或dev分支），因此首先安装它。然后您可以直接从源代码存储库构建最新的QQEM。这仍然有很多工作在进行中，还没有预构建的二进制文件可用，但我们希望现在发布可用的QQEM源代码，以开始获得更多用户和反馈。到目前为止，我们已经在一些客户项目和示例项目中使用了它，并且得到了非常积极的响应。

Another thing we are currently working on is Qt Design Studio integration for the QQEM. This will allow opening QQEM projects directly from QDS, modify them in QQEM and get the exported components back into QDS project. This should be available in QDS builds by the end of the year.

我们目前正在研究的另一件事是Qt Design Studio与QQEM的集成。这将允许直接从QDS打开QQEM项目，在QQEM中修改它们，并将导出的组件返回到QDS项目中。这应该在年底之前在QDS版本中可用。

So please give QQEM a go and feel free to make tickets (component: “Quick: Effect Maker”) of all the found issues and feature requests. More blog posts to come later, so stay tuned!

​因此，请尝试QQEM，并随时为所有发现的问题和功能请求制作门票（组件：“Quick:Effect Maker”）。稍后会有更多博客帖子，敬请关注！