Qt6 QML Book/图形效果/着色器元素

Shader Elements

着色器元素

For programming shaders, Qt Quick provides two elements. The ShaderEffectSource and the ShaderEffect. The shader effect applies custom shaders and the shader effect source renders a QML item into a texture and renders it. As shader effect can apply custom shaders to its rectangular shape and can use sources for the shader operation. A source can be an image, which is used as a texture or a shader effect source.

对于编程着色器，Qt Quick提供了两个元素类型。ShaderEffectSource和ShaderEffect。着色器效果应用自定义着色器，着色器效果源将QML项目渲染到纹理中并进行渲染。着色器效果可以将自定义着色器应用于其矩形形状，并可以使用源进行着色器操作。源可以是用作纹理或着色器效果源的图像。

The default shader uses the source and renders it unmodified. Below, we first see the QML file with two ShaderEffect elements. One without any shaders specified, and one explicitly specifying default vertex and fragment shaders. We will look at the shaders shortly.

默认着色器使用源并未经修改地渲染它。下面，我们首先看到带有两个ShaderEffect元素类型的QML文件。一个未指定任何着色器，另一个显式指定默认顶点和片段着色器。我们将很快查看着色器。

import QtQuick

Rectangle {
    width: 480; height: 240
    color: '#1e1e1e'

    Row {
        anchors.centerIn: parent
        spacing: 20
        Image {
            id: sourceImage
            width: 80; height: width
            source: '../assets/tulips.jpg'
        }
        ShaderEffect {
            id: effect
            width: 80; height: width
            property variant source: sourceImage
        }
        ShaderEffect {
            id: effect2
            width: 80; height: width
            property variant source: sourceImage
            vertexShader: "default.vert.qsb"
            fragmentShader: "default.frag.qsb"
        }
    }
}

In the above example, we have a row of 3 images. The first is the real image. The second is rendered using the default shader and the third is rendered using the shader code for the fragment and vertex as shown below. Let's have a look at the shaders.

在上面的例子中，我们有一行3张图片。第一个是真实的图像。第二个渲染使用默认着色器，第三个渲染使用片段和顶点的着色器代码，如下所示。让我们看看着色器。

The vertex shader takes the texture coordinate, qt_MultiTexCoord0, and propagates it to the qt_TexCoord0 variable. It also takes the qt_Vertex position and multiplies it with Qt's transformation matrix, ubuf.qt_Matrix, and returns it through the gl_Position variable. This leaves the texture and vertex position on the screen unmodified.

顶点着色器获取纹理坐标qt_MultiTexCoord0，并将其传播到qt_TexCoord0变量。它还获取qt_Vertex位置，并将其与qt的变换矩阵ubuf.qt_Matrix相乘，并通过gl_Position返回它。这会使屏幕上的纹理和顶点位置保持不变。

#version 440

layout(location=0) in vec4 qt_Vertex;
layout(location=1) in vec2 qt_MultiTexCoord0;

layout(location=0) out vec2 qt_TexCoord0;

layout(std140, binding=0) uniform buf {
    mat4 qt_Matrix;
    float qt_Opacity;
} ubuf;

out gl_PerVertex { 
    vec4 gl_Position;
};

void main() {
    qt_TexCoord0 = qt_MultiTexCoord0;
    gl_Position = ubuf.qt_Matrix * qt_Vertex;
}

The fragment shader takes the texture from the source 2D sampler, i.e. the texture, at the coordinate qt_TexCoord0 and multiplies it with the Qt opacity, ubuf.qt_Opacity to calculate the fragColor which is the color to be used for the pixel.

片段着色器在坐标qt_TexCoord0处从source2D采样器获取纹理，即纹理，并将其与qt不透明度ubuf.qt_Opacity相乘。用于计算fragColor，它是用于像素的颜色。

#version 440

layout(location=0) in vec2 qt_TexCoord0;

layout(location=0) out vec4 fragColor;

layout(std140, binding=0) uniform buf {
    mat4 qt_Matrix;
    float qt_Opacity;
} ubuf;

layout(binding=1) uniform sampler2D source;

void main() {
    fragColor = texture(source, qt_TexCoord0) * ubuf.qt_Opacity;
}

Notice that these two shaders can serve as the boilerplate code for your own shaders. The variables, locations and bindings, are what Qt expects. You can read more about the exact details of this on the Shader Effect Documentation.

​请注意，这两个着色器可以作为您自己的着色器的样板代码。变量、位置和绑定是Qt所期望的。你可以在Shader Effect文档中阅读更多关于这方面的详细信息。

Before we can use the shaders, they need to be baked. If the shaders are a part of a larger Qt project and included as resources, this can be automated. However, when working with the shaders and a qml-file, we need to explicitly bake them by hand. This is done using the following two commands:

在我们使用着色器之前，它们需要烘焙。如果着色器是更大的Qt项目的一部分，并作为资源包含，则可以自动执行此操作。但是，在使用着色器和qml文件时，我们需要手动显式烘焙它们。这是使用以下两个命令完成的：

qsb --glsl 100es,120,150 --hlsl 50 --msl 12    -o default.frag.qsb default.frag 
qsb --glsl 100es,120,150 --hlsl 50 --msl 12 -b -o default.vert.qsb default.vert

The qsb tool is located in the bin directory of your Qt 6 installation.

qsb工具位于Qt 6安装的bin目录中。

TIP

注

If you don’t want to see the source image and only the effected image you can set the Image to invisible (`` visible: false``). The shader effects will still use the image data just the Image element will not be rendered.

如果不想看到源图像，而只想看到受影响的图像，可以将图像设置为“不可见”（`visible:false`）。着色器效果仍将使用图像数据，只是图像元素不会被渲染。

In the next examples, we will be playing around with some simple shader mechanics. First, we concentrate on the fragment shader and then we will come back to the vertex shader.

 在接下来的示例中，我们将介绍一些简单的着色器机制。首先，我们关注片段着色器，然后我们将回到顶点着色器。

示例源码下载