Applies custom shaders to a rectangle 更多...
| import 语句： | import QtQuick 2.7 |
| 继承： | Item |
The ShaderEffect type applies a custom vertex and fragment (pixel) shader to a rectangle. It allows you to write effects such as drop shadow, blur, colorize and page curl directly in QML.
注意： Depending on the Qt Quick scenegraph backend in use, the ShaderEffect type may not be supported (for example, with the software backend), or may use a different shading language with rules and expectations different from OpenGL and GLSL.
There are two types of input to the vertexShader : uniform variables and attributes. Some are predefined:
In addition, any property that can be mapped to an OpenGL Shading Language (GLSL) type is available as a uniform variable. The following list shows how properties are mapped to GLSL uniform variables:
w
.
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: " uniform highp mat4 qt_Matrix; attribute highp vec4 qt_Vertex; attribute highp vec2 qt_MultiTexCoord0; varying highp vec2 coord; void main() { coord = qt_MultiTexCoord0; gl_Position = qt_Matrix * qt_Vertex; }" fragmentShader: " varying highp vec2 coord; uniform sampler2D src; uniform lowp float qt_Opacity; 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; }" } } } |
注意： Scene Graph textures have origin in the top-left corner rather than bottom-left which is common in OpenGL.
For information about the GLSL version being used, see QtQuick::GraphicsInfo .
Starting from Qt 5.8
ShaderEffect
also supports reading the GLSL source code from files. Whenever the
fragmentShader
or
vertexShader
property value is a URL with the
file
or
qrc
schema, it is treated as a file reference and the source code is read from the specified file.
Direct3D backends provide ShaderEffect support with HLSL. The Direct3D 12 backend requires using at least Shader Model 5.0 both for vertex and pixel shaders. When necessary, GraphicsInfo .shaderType can be used to decide at runtime what kind of value to assign to fragmentShader or vertexShader .
All concepts described above for OpenGL and GLSL apply to Direct3D and HLSL as well. There are however a number of notable practical differences, which are the following:
Instead of uniforms, HLSL shaders are expected to use a single constant buffer, assigned to register
b0
. The special names
qt_Matrix
,
qt_Opacity
，和
qt_SubRect_<name>
function the same way as with GLSL. All other members of the buffer are expected to map to properties in the
ShaderEffect
项。
注意：
The buffer layout must be compatible for both shaders. This means that application-provided shaders must make sure
qt_Matrix
and
qt_Opacity
are included in the buffer, starting at offset 0, when custom code is provided for one type of shader only, leading to
ShaderEffect
providing the other shader. This is due to
ShaderEffect
's built-in shader code declaring a constant buffer containing
float4x4 qt_Matrix; float qt_Opacity;
.
Unlike GLSL's attributes, no names are used for vertex input elements. Therefore qt_Vertex and qt_MultiTexCoord0 are not relevant. Instead, the standard Direct3D semantics,
POSITION
and
TEXCOORD
(或
TEXCOORD0
) are used for identifying the correct input layout.
Unlike GLSL's samplers, texture and sampler objects are separate in HLSL. Shaders are expected to expect 2D, non-array, non-multisample textures. Both the texture and sampler binding points are expected to be sequential and start from 0 (meaning registers
t0, t1, ...
，和
s0, s1, ...
, respectively). Unlike with OpenGL, samplers are not mapped to Qt Quick item properties and therefore the name of the sampler is not relevant. Instead, it is the textures that map to properties referencing
Image
or
ShaderEffectSource
项。
Unlike OpenGL, backends for modern APIs will typically prefer offline compilation and shipping pre-compiled bytecode with applications instead of inlined shader source strings. In this case the string properties for vertex and fragment shaders are treated as URLs referring to local files or files shipped via the Qt resource system.
To check at runtime what is supported, use the GraphicsInfo .shaderSourceType and GraphicsInfo .shaderCompilationType properties. Note that these are bitmasks, because some backends may support multiple approaches.
In case of Direct3D 12, all combinations are supported. If the
vertexShader
and
fragmentShader
properties form a valid URL with the
file
or
qrc
schema, the bytecode or HLSL source code is read from the specified file. The type of the file contents is detected automatically. Otherwise, the string is treated as HLSL source code and is compiled at runtime, assuming Shader Model 5.0 and an entry point of
"main"
. This allows dynamically constructing shader strings. However, whenever the shader source code is static, it is strongly recommended to pre-compile to bytecode using the
fxc
tool and refer to these files from QML. This will be a lot more efficient at runtime and allows catching syntax errors in the shaders at compile time.
Unlike OpenGL, the Direct3D backend is able to perform runtime shader compilation on dedicated threads. This is managed transparently to the applications, and means that ShaderEffect items that contain HLSL source strings do not block the rendering or other parts of the application until the bytecode is ready.
Using files with bytecode is more flexible also when it comes to the entry point name (it can be anything, not limited to
main
) and the shader model (it can be something newer than 5.0, for instance 5.1).
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 fragmentShader: "qrc:/effect_ps.cso" } } } |
where
effect_ps.cso
is the compiled bytecode for the following HLSL shader:
cbuffer ConstantBuffer : register(b0) { float4x4 qt_Matrix; float qt_Opacity; }; Texture2D src : register (t0); SamplerState srcSampler : register (s0); float4 ExamplePixelShader(float4 position : SV_POSITION , float2 coord : TEXCOORD0) : SV_TARGET { float4 tex = src . Sample(srcSampler , coord); float3 col = dot(tex . rgb , float3( 0.344 , 0.5 , 0.156 )); return float4(col , tex . a) * qt_Opacity; } |
The above is equivalent to the OpenGL example presented earlier. The vertex shader is provided implicitly by
ShaderEffect
. Note that the output of the pixel shader is using premultiplied alpha and that
qt_Matrix
is present in the constant buffer at offset 0, even though the pixel shader does not use the value.
If desired, the HLSL source code can be placed directly into the QML source, similarly to how its done with GLSL. The only difference in this case is the entry point name, which must be
main
when using inline source strings.
Alternatively, we could also have referred to a file containing the source of the effect instead of the compiled bytecode version.
Some effects will want to provide a vertex shader as well. Below is a similar effect with both the vertex and fragment shader provided by the application. This time the colorization factor is provided by the QML item instead of hardcoding it in the shader. This can allow, among others, animating the value using QML's and Qt Quick's standard facilities.
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 property variant color: Qt.vector3d(0.344, 0.5, 0.156) vertexShader: "qrc:/effect_vs.cso" fragmentShader: "qrc:/effect_ps.cso" } } } |
where
effect_vs.cso
and
effect_ps.cso
are the compiled bytecode for
ExampleVertexShader
and
ExamplePixelShader
. The source code is presented as one snippet here, the shaders can however be placed in separate source files as well.
cbuffer ConstantBuffer : register(b0) { float4x4 qt_Matrix; float qt_Opacity; float3 color; }; Texture2D src : register (t0); SamplerState srcSampler : register (s0); struct PSInput { float4 position : SV_POSITION; float2 coord : TEXCOORD0; }; PSInput ExampleVertexShader(float4 position : POSITION , float2 coord : TEXCOORD0) { PSInput result; result . 位置 = mul(qt_Matrix , position); result . coord = coord; return result; } float4 ExamplePixelShader(PSInput input) : SV_TARGET { float4 tex = src . Sample(srcSampler , coord); float3 col = dot(tex . rgb , color); return float4(col , tex . a) * qt_Opacity; } |
注意：
With OpenGL the
y
coordinate runs from bottom to top whereas with Direct 3D it goes top to bottom. For shader effect sources Qt Quick hides the difference by treating
QtQuick::ShaderEffectSource::textureMirroring
as appropriate, meaning texture coordinates in HLSL version of the shaders will not need any adjustments compared to the equivalent GLSL code.
Some applications will want to be functional with multiple accelerated graphics backends. This has consequences for ShaderEffect items because the supported shading languages may vary from backend to backend.
There are two approaches to handle this: either write conditional property values based on GraphicsInfo .shaderType, or use file selectors. In practice the latter is strongly recommended as it leads to more concise and cleaner application code. The only case it is not suitable is when the source strings are constructed dynamically.
import QtQuick 2.8 // for GraphicsInfo 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 property variant color: Qt.vector3d(0.344, 0.5, 0.156) fragmentShader: GraphicsInfo.shaderType === GraphicsInfo.GLSL ? "varying highp vec2 coord; uniform sampler2D src; uniform lowp float qt_Opacity; 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;" : GraphicsInfo.shaderType === GraphicsInfo.HLSL ? "cbuffer ConstantBuffer : register(b0) { float4x4 qt_Matrix; float qt_Opacity; }; Texture2D src : register(t0); SamplerState srcSampler : register(s0); float4 ExamplePixelShader(float4 position : SV_POSITION, float2 coord : TEXCOORD0) : SV_TARGET { float4 tex = src.Sample(srcSampler, coord); float3 col = dot(tex.rgb, float3(0.344, 0.5, 0.156)); return float4(col, tex.a) * qt_Opacity; }" : "" } } } |
This is the first approach based on
GraphicsInfo
. Note that the value reported by
GraphicsInfo
is not up-to-date until the
ShaderEffect
item gets associated with a
QQuickWindow
. Before that, the reported value is
GraphicsInfo
.UnknownShadingLanguage. The alternative is to place the GLSL source code and the compiled D3D bytecode into the files
shaders/effect.frag
and
shaders/+hlsl/effect.frag
, include them in the Qt resource system, and let the
ShaderEffect
's internal
QFileSelector
do its job. The selector-less version is the GLSL source, while the
hlsl
selector is used when running on the D3D12 backend. The file under
+hlsl
can then contain either HLSL source code or compiled bytecode from the
fxc
tool. Additionally, when using a version 3.2 or newer core profile context with OpenGL, GLSL sources with a core profile compatible syntax can be placed under
+glslcore
.
import QtQuick 2.8 // for GraphicsInfo 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 property variant color : Qt . vector3d ( 0.344 , 0.5 , 0.156 ) fragmentShader : "qrc:shaders/effect.frag" // selects the correct variant automatically } } } |
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: " uniform lowp sampler2D source; // this item uniform lowp float qt_Opacity; // inherited opacity of this item varying highp vec2 qt_TexCoord0; void main() { lowp vec4 p = texture2D(source, qt_TexCoord0); lowp float g = dot(p.xyz, vec3(0.344, 0.5, 0.156)); gl_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: "
uniform lowp sampler2D colorSource;
uniform lowp sampler2D maskSource;
uniform lowp float qt_Opacity;
varying highp vec2 qt_TexCoord0;
void main() {
gl_FragColor =
texture2D(colorSource, qt_TexCoord0)
* texture2D(maskSource, qt_TexCoord0).a
* qt_Opacity;
}
"
}
}
|
默认情况下， 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.
The Qt Graphical Effects module contains several ready-made effects for using with Qt Quick applications.
另请参阅 项层 .
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.
This property defines which sides of the item should be visible.
The default is NoCulling.
This property holds the fragment (pixel) shader's source code or a reference to the pre-compiled bytecode. Some APIs, like OpenGL, always support runtime compilation and therefore the traditional Qt Quick way of inlining shader source strings is functional. Qt Quick backends for other APIs may however limit support to pre-compiled bytecode like SPIR-V or D3D shader bytecode. There the string is simply a filename, which may be a file in the filesystem or bundled with the executable via Qt's resource system.
With GLSL the default shader expects the texture coordinate to be passed from the vertex shader as
varying highp vec2 qt_TexCoord0
, and it samples from a sampler2D named
source
. With HLSL the texture is named
source
, while the vertex shader is expected to provide
float2 coord : TEXCOORD0
in its output in addition to
float4 position : SV_POSITION
(names can differ since linking is done based on the semantics).
另请参阅 vertexShader and GraphicsInfo .
This property holds a log of warnings and errors from the latest attempt at compiling and linking the OpenGL shader program. It is updated at the same time status is set to Compiled or Error.
另请参阅 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 .
This property tells the current status of the OpenGL shader program.
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 .
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 QML property was introduced in QtQuick 2.4.
This property holds the vertex shader's source code or a reference to the pre-compiled bytecode. Some APIs, like OpenGL, always support runtime compilation and therefore the traditional Qt Quick way of inlining shader source strings is functional. Qt Quick backends for other APIs may however limit support to pre-compiled bytecode like SPIR-V or D3D shader bytecode. There the string is simply a filename, which may be a file in the filesystem or bundled with the executable via Qt's resource system.
With GLSL the default shader passes the texture coordinate along to the fragment shader as
varying highp vec2 qt_TexCoord0
. With HLSL it is enough to use the standard
TEXCOORD0
semantic, for example
float2 coord : TEXCOORD0
.
另请参阅 fragmentShader and GraphicsInfo .