把自定义着色器应用到矩形。 更多...
| import 语句： | import QtQuick 2.2 |
| 继承： | Item |
The ShaderEffect type applies a custom vertex and fragment (pixel) shader to a rectangle. It allows adding effects such as drop shadow, blur, colorize and page curl into the QML scene.
注意：
Depending on the Qt Quick scenegraph backend in use, the ShaderEffect type may not be supported. For example, with the
software
backend effects will not be rendered at all.
In Qt 5, effects were provided in form of GLSL (OpenGL Shading Language) source code, often embedded as strings into QML. Starting with Qt 5.8, referring to files, either local ones or in the Qt resource system, became possible as well.
In Qt 6, Qt Quick has support for graphics APIs, such as Vulkan, Metal, and Direct3D 11 as well. Therefore, working with GLSL source strings is no longer feasible. Rather, the new shader pipeline is based on compiling Vulkan-compatible GLSL code into
SPIR-V
, followed by gathering reflection information and translating into other shading languages, such as HLSL, the Metal Shading Language, and various GLSL versions. The resulting assets are packed together into a single package, typically stored in files with an extension of
.qsb
. This process is done offline or at application build time at latest. At run time, the scene graph and the underlying graphics abstraction consumes these
.qsb
files. Therefore, ShaderEffect expects file (local or qrc) references in Qt 6 in place of inline shader code.
vertexShader
and
fragmentShader
properties are URLs in Qt 6, and work very similarly to
Image.source
, for example. Only the
file
and
qrc
schemes are supported with ShaderEffect, however. It is also possible to omit the
file
scheme, allowing to specify a relative path in a convenient way. Such a path is resolved relative to the component's (the
.qml
file's) location.
There are two types of input to the vertexShader : uniforms and vertex inputs.
The following inputs are predefined:
注意：
It is only the vertex input location that matters in practice. The names are freely changeable, while the location must always be
0
for vertex position,
1
for texture coordinates. However, be aware that this applies to vertex inputs only, and is not necessarily true for output variables from the vertex shader that are then used as inputs in the fragment shader (typically, the interpolated texture coordinates).
The following uniforms are predefined:
注意：
Vulkan-style GLSL has no separate uniform variables. Instead, shaders must always use a uniform block with a binding point of
0
.
注意：
The uniform block layout qualifier must always be
std140
.
注意： Unlike vertex inputs, the predefined names (qt_Matrix, qt_Opacity) must not be changed.
In addition, any property that can be mapped to a GLSL type can be made available to the shaders. The following list shows how properties are mapped:
w
.
Samplers are still declared as separate uniform variables in the shader code. The shaders are free to choose any binding point for these, except for
0
because that is reserved for the uniform block.
Some shading languages and APIs have a concept of separate image and sampler objects. Qt Quick always works with combined image sampler objects in shaders, as supported by SPIR-V. Therefore shaders supplied for ShaderEffect should always use
layout(binding = 1) uniform sampler2D tex;
style sampler declarations. The underlying abstraction layer and the shader pipeline takes care of making this work for all the supported APIs and shading languages, transparently to the applications.
The QML scene graph back-end may choose to allocate textures in texture atlases. If a texture allocated in an atlas is passed to a ShaderEffect, it is by default copied from the texture atlas into a stand-alone texture so that the texture coordinates span from 0 to 1, and you get the expected wrap modes. However, this will increase the memory usage. To avoid the texture copy, set supportsAtlasTextures for simple shaders using qt_MultiTexCoord0, or for each "uniform sampler2D <name>" declare a "uniform vec4 qt_SubRect_<name>" which will be assigned the texture's normalized source rectangle. For stand-alone textures, the source rectangle is [0, 1]x[0, 1]. For textures in an atlas, the source rectangle corresponds to the part of the texture atlas where the texture is stored. The correct way to calculate the texture coordinate for a texture called "source" within a texture atlas is "qt_SubRect_source.xy + qt_SubRect_source.zw * qt_MultiTexCoord0".
The output from the fragmentShader should be premultiplied. If blending is enabled, source-over blending is used. However, additive blending can be achieved by outputting zero in the alpha channel.
|
import QtQuick 2.0 Rectangle { width: 200; height: 100 Row { Image { id: img; sourceSize { width: 100; height: 100 } source: "qt-logo.png" } ShaderEffect { width: 100; height: 100 property variant src: img vertexShader: "myeffect.vert.qsb" fragmentShader: "myeffect.frag.qsb" } } } |
The example assumes
myeffect.vert
and
myeffect.frag
contain Vulkan-style GLSL code, processed by the
qsb
tool in order to generate the
.qsb
文件。
#version 440
layout(location = 0) in vec4 qt_Vertex;
layout(location = 1) in vec2 qt_MultiTexCoord0;
layout(location = 0) out vec2 coord;
layout(std140, binding = 0) uniform buf {
mat4 qt_Matrix;
float qt_Opacity;
};
void main() {
coord = qt_MultiTexCoord0;
gl_Position = qt_Matrix * qt_Vertex;
}
#version 440
layout(location = 0) in vec2 coord;
layout(location = 0) out vec4 fragColor;
layout(std140, binding = 0) uniform buf {
mat4 qt_Matrix;
float qt_Opacity;
};
layout(binding = 1) uniform sampler2D src;
void main() {
vec4 tex = texture(src, coord);
fragColor = vec4(vec3(dot(tex.rgb, vec3(0.344, 0.5, 0.156))), tex.a) * qt_Opacity;
}
注意： Scene Graph textures have origin in the top-left corner rather than bottom-left which is common in OpenGL.
Specifying both vertexShader and fragmentShader is not mandatory. Many ShaderEffect implementations will want to provide a fragment shader only in practice, while relying on the default, built-in vertex shader.
The default vertex shader passes the texture coordinate along to the fragment shader as
vec2 qt_TexCoord0
at location
0
.
The default fragment shader expects the texture coordinate to be passed from the vertex shader as
vec2 qt_TexCoord0
at location
0
, and it samples from a sampler2D named
source
at binding point
1
.
警告： When only one of the shaders is specified, the writer of the shader must be aware of the uniform block layout expected by the default shaders: qt_Matrix must always be at offset 0, followed by qt_Opacity at offset 64. Any custom uniforms must be placed after these two. This is mandatory even when the application-provided shader does not use the matrix or the opacity, because at run time there is one single uniform buffer that is exposed to both the vertex and fragment shader.
警告：
Unlike with vertex inputs, passing data between the vertex and fragment shader may, depending on the underlying graphics API, require the same names to be used, a matching location is not always sufficient. Most prominently, when specifying a fragment shader while relying on the default, built-in vertex shader, the texture coordinates are passed on as
qt_TexCoord0
at location
0
, and therefore it is strongly advised that the fragment shader declares the input with the same name (qt_TexCoord0). Failing to do so may lead to issues on some platforms, for example when running with a non-core profile OpenGL context where the underlying GLSL shader source code has no location qualifiers and matching is based on the variable names during to shader linking process.
The ShaderEffect type can be combined with layered items .
Layer with effect disabled
|
Layer with effect enabled
|
Item { id: layerRoot layer.enabled: true layer.effect: ShaderEffect { fragmentShader: "effect.frag.qsb" } }
#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;
};
layout(binding = 1) uniform sampler2D source;
void main() {
vec4 p = texture(source, qt_TexCoord0);
float g = dot(p.xyz, vec3(0.344, 0.5, 0.156));
fragColor = vec4(g, g, g, p.a) * qt_Opacity;
}
|
It is also possible to combine multiple layered items:
|
Rectangle {
id: gradientRect;
width: 10
height: 10
gradient: Gradient {
GradientStop { position: 0; color: "white" }
GradientStop { position: 1; color: "steelblue" }
}
visible: false; // should not be visible on screen.
layer.enabled: true;
layer.smooth: true
}
Text {
id: textItem
font.pixelSize: 48
text: "Gradient Text"
anchors.centerIn: parent
layer.enabled: true
// This item should be used as the 'mask'
layer.samplerName: "maskSource"
layer.effect: ShaderEffect {
property var colorSource: gradientRect;
fragmentShader: "mask.frag.qsb"
}
}
#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;
};
layout(binding = 1) uniform sampler2D colorSource;
layout(binding = 2) uniform sampler2D maskSource;
void main() {
fragColor = texture(colorSource, qt_TexCoord0)
* texture(maskSource, qt_TexCoord0).a
* qt_Opacity;
}
|
By default, the ShaderEffect consists of four vertices, one for each corner. For non-linear vertex transformations, like page curl, you can specify a fine grid of vertices by specifying a mesh resolution.
For Qt 5 applications with ShaderEffect items the migration to Qt 6 involves:
.vert
and
.frag
files,
qsb
tool on them,
.qsb
files in the executable with the Qt resource system,
作为描述在
Qt Shader Tools
module some of these steps can be automated by letting CMake invoke the
qsb
tool at build time. See
Qt Shader Tools 构建系统集成
for more information and examples.
When it comes to updating the shader code, below is an overview of the commonly required changes.
| Vertex shader in Qt 5 | Vertex shader in Qt 6 |
|---|---|
attribute highp vec4 qt_Vertex;
attribute highp vec2 qt_MultiTexCoord0;
varying highp vec2 coord;
uniform highp mat4 qt_Matrix;
void main() {
coord = qt_MultiTexCoord0;
gl_Position = qt_Matrix * qt_Vertex;
}
|
#version 440
layout(location = 0) in vec4 qt_Vertex;
layout(location = 1) in vec2 qt_MultiTexCoord0;
layout(location = 0) out vec2 coord;
layout(std140, binding = 0) uniform buf {
mat4 qt_Matrix;
float qt_Opacity;
};
void main() {
coord = qt_MultiTexCoord0;
gl_Position = qt_Matrix * qt_Vertex;
}
|
The conversion process mostly involves updating the code to be compatible with GL_KHR_vulkan_glsl . It is worth noting that Qt Quick uses a subset of the features provided by GLSL and Vulkan, and therefore the conversion process for typical ShaderEffect shaders is usually straightforward.
version
directive should state
440
or
450
, although specifying other GLSL version may work too, because the
GL_KHR_vulkan_glsl
extension is written for GLSL 140 and higher.
in
and
out
keywords. In addition, specifying a location is required. The input and output location namespaces are separate, and therefore assigning locations starting from 0 for both is safe.
0
for vertex position (traditionally named
qt_Vertex
) and location
1
for texture coordinates (traditionally named
qt_MultiTexCoord0
).
vec4
output at location 0 (typically called
fragColor
). For maximum portability, vertex outputs and fragment inputs should use both the same location number and the same name. When specifying only a fragment shader, the texture coordinates are passed in from the built-in vertex shader as
vec2 qt_TexCoord0
at location
0
, as shown in the example snippets above.
0
.
qt_Matrix
and
qt_Opacity
at the top of the uniform block. (more precisely, at offset 0 and 64, respectively) As a general rule, always include these as the first and second members in the block.
buf
. This name can be changed freely, but must match between the shaders. Using an instance name, such as
layout(...) uniform buf { ... } instance_name;
is optional. When specified, all accesses to the members must be qualified with instance_name.
| Fragment shader in Qt 5 | Fragment shader in Qt 6 |
|---|---|
varying highp vec2 coord;
uniform lowp float qt_Opacity;
uniform sampler2D src;
void main() {
lowp vec4 tex = texture2D(src, coord);
gl_FragColor = vec4(vec3(dot(tex.rgb,
vec3(0.344, 0.5, 0.156))),
tex.a) * qt_Opacity;
}
|
#version 440
layout(location = 0) in vec2 coord;
layout(location = 0) out vec4 fragColor;
layout(std140, binding = 0) uniform buf {
mat4 qt_Matrix;
float qt_Opacity;
};
layout(binding = 1) uniform sampler2D src;
void main() {
vec4 tex = texture(src, coord);
fragColor = vec4(vec3(dot(tex.rgb,
vec3(0.344, 0.5, 0.156))),
tex.a) * qt_Opacity;
}
|
lowp
,
mediump
,
highp
) are not currently used.
texture()
而不是
texture2D()
.
另请参阅 项层 , QSB 手册 ，和 Qt Shader Tools 构建系统集成 .
| blending : bool |
If this property is true, the output from the fragmentShader is blended with the background using source-over blend mode. If false, the background is disregarded. Blending decreases the performance, so you should set this property to false when blending is not needed. The default value is true.
| cullMode : enumeration |
This property defines which sides of the item should be visible.
The default is NoCulling.
| fragmentShader : url |
This property contains a reference to a file with the preprocessed fragment shader package, typically with an extension of
.qsb
. The value is treated as a
URL
, similarly to other QML types, such as Image. It must either be a local file or use the qrc scheme to access files embedded via the Qt resource system. The URL may be absolute, or relative to the URL of the component.
另请参阅 vertexShader .
| log : string |
This property holds a log of warnings and errors from the latest attempt at compiling the shaders. It is updated at the same time status is set to Compiled or Error.
注意： In Qt 6, the shader pipeline promotes compiling and translating the Vulkan-style GLSL shaders offline, or at build time at latest. This does not necessarily mean there is no shader compilation happening at run time, but even if there is, ShaderEffect is not involved in that, and syntax and similar errors should not occur anymore at that stage. Therefore the value of this property is typically empty.
另请参阅 status .
| mesh : variant |
This property defines the mesh used to draw the ShaderEffect . It can hold any GridMesh object. If a size value is assigned to this property, the ShaderEffect implicitly uses a GridMesh with the value as mesh resolution . By default, this property is the size 1x1.
另请参阅 GridMesh .
| status : enumeration |
This property tells the current status of the shaders.
When setting the fragment or vertex shader source code, the status will become Uncompiled. The first time the ShaderEffect is rendered with new shader source code, the shaders are compiled and linked, and the status is updated to Compiled or Error.
When runtime compilation is not in use and the shader properties refer to files with bytecode, the status is always Compiled. The contents of the shader is not examined (apart from basic reflection to discover vertex input elements and constant buffer data) until later in the rendering pipeline so potential errors (like layout or root signature mismatches) will only be detected at a later point.
另请参阅 log .
| [since QtQuick 2.4] supportsAtlasTextures : bool |
Set this property true to confirm that your shader code doesn't rely on qt_MultiTexCoord0 ranging from (0,0) to (1,1) relative to the mesh. In this case the range of qt_MultiTexCoord0 will rather be based on the position of the texture within the atlas. This property currently has no effect if there is less, or more, than one sampler uniform used as input to your shader.
This differs from providing qt_SubRect_<name> uniforms in that the latter allows drawing one or more textures from the atlas in a single ShaderEffect item, while supportsAtlasTextures allows multiple instances of a ShaderEffect component using a different source image from the atlas to be batched in a single draw. Both prevent a texture from being copied out of the atlas when referenced by a ShaderEffect .
默认值为 false。
This property was introduced in QtQuick 2.4.
| vertexShader : url |
This property contains a reference to a file with the preprocessed vertex shader package, typically with an extension of
.qsb
. The value is treated as a
URL
, similarly to other QML types, such as Image. It must either be a local file or use the qrc scheme to access files embedded via the Qt resource system. The URL may be absolute, or relative to the URL of the component.
另请参阅 fragmentShader .