QML ShaderEffect(着色器效果)组件

ShaderEffect 是 QML 中用于实现自定义着色器效果的组件，允许开发者使用 GLSL 着色器语言创建图形效果。

核心属性

基本属性

属性	类型	默认值	说明
`fragmentShader`	string	`""`	片段着色器代码
`vertexShader`	string	`""`	顶点着色器代码
`blending`	bool	`true`	是否启用混合
`mesh`	variant	`Qt.size(1, 1)`	网格分辨率或自定义网格
`cullMode`	enumeration	`ShaderEffect.NoCulling`	面剔除模式
`log`	string	`""`	只读，着色器编译日志

着色器参数属性

属性	类型	说明
`property var <name>`	variant	声明着色器参数
`property real <name>`	real	声明实数参数
`property vector2d <name>`	vector2d	声明2D向量参数
`property vector3d <name>`	vector3d	声明3D向量参数
`property vector4d <name>`	vector4d	声明4D向量参数
`property color <name>`	color	声明颜色参数
`property rect <name>`	rect	声明矩形参数
`property point <name>`	point	声明点参数
`property size <name>`	size	声明尺寸参数
`property matrix4x4 <name>`	matrix4x4	声明4x4矩阵参数

CullMode 枚举值

值	说明
`ShaderEffect.NoCulling`	不剔除
`ShaderEffect.BackFaceCulling`	剔除背面
`ShaderEffect.FrontFaceCulling`	剔除正面

常用方法

方法	参数	返回值	说明
`setUniformValue(name, value)`	name: string value: variant	-	设置着色器参数值
`update()`	-	-	强制更新效果

常用信号

信号	参数	说明
`logChanged()`	-	着色器日志改变时触发

着色器特殊变量

顶点着色器可用变量

变量	类型	说明
`qt_Vertex`	vec4	顶点位置
`qt_MultiTexCoord0`	vec4	纹理坐标
`qt_ModelViewProjectionMatrix`	mat4	模型视图投影矩阵
`varying vec2 qt_TexCoord0`	vec2	传递给片段着色器的纹理坐标

片段着色器可用变量

变量	类型	说明
`varying vec2 qt_TexCoord0`	vec2	来自顶点着色器的纹理坐标
`uniform sampler2D source`	sampler2D	源纹理
`uniform float qt_Opacity`	float	不透明度

基本使用示例

1. 简单着色器效果

qml

import QtQuick 2.15ShaderEffect {width: 200; height: 200property color uColor: "red"fragmentShader: "uniform lowp vec4 uColor;void main() {gl_FragColor = uColor;}"
}

2. 纹理处理

qml

ShaderEffect {width: 200; height: 200property variant sourceproperty real uAmount: 0.5fragmentShader: "uniform sampler2D source;uniform float uAmount;varying vec2 qt_TexCoord0;void main() {vec4 color = texture2D(source, qt_TexCoord0);gl_FragColor = vec4(color.rgb * uAmount, color.a);}"
}

高级用法

1. 自定义网格

qml

ShaderEffect {width: 200; height: 200mesh: GridMesh {resolution: Qt.size(10, 10)}// 着色器代码...
}

2. 多纹理输入

qml

ShaderEffect {width: 200; height: 200property variant source1property variant source2property real uMixFactor: 0.5fragmentShader: "uniform sampler2D source1;uniform sampler2D source2;uniform float uMixFactor;varying vec2 qt_TexCoord0;void main() {vec4 color1 = texture2D(source1, qt_TexCoord0);vec4 color2 = texture2D(source2, qt_TexCoord0);gl_FragColor = mix(color1, color2, uMixFactor);}"
}

3. 动画效果

qml

ShaderEffect {width: 200; height: 200property variant sourceproperty real uTime: 0NumberAnimation on uTime {from: 0; to: 1duration: 1000loops: Animation.Infinite}fragmentShader: "uniform sampler2D source;uniform float uTime;varying vec2 qt_TexCoord0;void main() {vec2 uv = qt_TexCoord0;uv.x += sin(uTime * 10.0 + uv.y * 5.0) * 0.1;gl_FragColor = texture2D(source, uv);}"
}

性能优化技巧

减少uniform更新：避免频繁更新着色器参数
简化着色器：复杂着色器会影响性能
合理使用mesh：增加网格分辨率会降低性能
避免动态编译：预编译着色器
使用mipmap：对于缩小的纹理

常见着色器效果实现

1. 灰度效果

qml

fragmentShader: "uniform sampler2D source;varying vec2 qt_TexCoord0;void main() {vec4 color = texture2D(source, qt_TexCoord0);float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));gl_FragColor = vec4(vec3(gray), color.a);}
"

2. 边缘检测

qml

fragmentShader: "uniform sampler2D source;uniform float qt_Opacity;varying vec2 qt_TexCoord0;void main() {vec2 uv = qt_TexCoord0;vec2 step = vec2(1.0/width, 1.0/height);float gx = -1.0 * texture2D(source, uv + vec2(-step.x, -step.y)).r +-2.0 * texture2D(source, uv + vec2(-step.x, 0.0)).r +-1.0 * texture2D(source, uv + vec2(-step.x, step.y)).r +1.0 * texture2D(source, uv + vec2(step.x, -step.y)).r +2.0 * texture2D(source, uv + vec2(step.x, 0.0)).r +1.0 * texture2D(source, uv + vec2(step.x, step.y)).r;float gy = -1.0 * texture2D(source, uv + vec2(-step.x, -step.y)).r +-2.0 * texture2D(source, uv + vec2(0.0, -step.y)).r +-1.0 * texture2D(source, uv + vec2(step.x, -step.y)).r +1.0 * texture2D(source, uv + vec2(-step.x, step.y)).r +2.0 * texture2D(source, uv + vec2(0.0, step.y)).r +1.0 * texture2D(source, uv + vec2(step.x, step.y)).r;float edge = sqrt(gx*gx + gy*gy);gl_FragColor = vec4(vec3(edge), qt_Opacity);}
"