建筑工程网是什么网站,贸易公司注册需要什么条件,河南做网站汉狮网络,抚州市做棋牌网站Qml-ShaderEffect的使用
ShaderEffect的概述 ShaderEffect使用自定义的顶点和片段着色器用于渲染一个矩形。用于在qml场景中添加阴影、模糊、着色和页面卷曲等效果。 Qt5和Qt6中ShaderEffect有一定区别#xff0c;在Qt6中由于支持不同的渲染API#xff0c;ShaderEffect是用…Qml-ShaderEffect的使用
ShaderEffect的概述 ShaderEffect使用自定义的顶点和片段着色器用于渲染一个矩形。用于在qml场景中添加阴影、模糊、着色和页面卷曲等效果。 Qt5和Qt6中ShaderEffect有一定区别在Qt6中由于支持不同的渲染APIShaderEffect是用统一的qsb文件来满足对不同的渲染API支持。使用Qt6提供的qsb.exe工具来将顶点着色器和片段着色器生成qsb文件。 在Shader的编写中顶点着色器默认输入有两个顶点 vec4 qt_Vertex 在location 0,顶点坐标 vec2 qt_MultiTexCoord0 在 location 1纹理坐标。 两个uniform变量 mat4 qt_Matrix组合变换矩阵从根项到该ShaderEffect的矩阵的乘积以及正交投影. float qt_Opacity:组合不透明度从根项到此ShaderEffect的不透明度的乘积 注意 unoform变量的名字不能改变ubo的布局是std140布局格式具体可查阅openGL的全局缓冲对象uniform buffer object相关使用 在ShaderEffect 中声明的属性可以映射到Shader中qml中类和Shader中类型映射关系如下 bool, int, qreal - bool, int, float QColor - vec4 QPoint, QPointF, QSize, QSizeF - vec2 QVector3D - vec3 QVector4D - vec4 QTransform - mat3 QMatrix4x4 - mat4 QQuaternion - vec4 Image - sampler2D ShaderEffectSource- sampler2D 注意本实例代码在Qt6.5版本中测试验证的。Qt6和Qt5有差异
ShaderEffect的实例代码
1.qml代码如下
import QtQuickRectangle {width: 240;height: 100Row {spacing: 20Image {id: img;sourceSize { width: 100; height: 100 }source: qrc:/qt/qml/text/qmlDemo/Resource/qtlogo.png //图片路径根据需要可做调整}ShaderEffect {width: 100; height: 100property variant src: img //定义一个属性属性名 src,值为Image,映射到Shader中是sampler2D;vertexShader: qrc:/qt/qml/text/qmlDemo/myeffect.vert.qsbfragmentShader: qrc:/qt/qml/text/qmlDemo/myeffect.frag.qsb}}
}顶点着色器代码如下
#version 440
//location 顶点位置
layout(location 0) in vec4 qt_Vertex;
layout(location 1) in vec2 qt_MultiTexCoord0;
layout(location 0) out vec2 coord;
//std140 使用std140内存布局std140有一套对齐规则 binding 0 将ubo 绑定到绑定点0
layout(std140, binding 0) uniform buf {mat4 qt_Matrix;float qt_Opacity;
};
void main() {coord qt_MultiTexCoord0;//gl_Position 是glsl 顶点着色器中内置变量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;
};
//src 是 qml中ShaderEffect 中映射进来Image对象当作纹理
layout(binding 1) uniform sampler2D src;
void main() {vec4 tex texture(src, coord); //对纹理采样//dot 是点剩即对采样出来的r*0.344 g*0.5 b*0.146灰度化。fragColor vec4(vec3(dot(tex.rgb, vec3(0.344, 0.5, 0.156))), tex.a) * qt_Opacity;
}
4.qsb命令 –glsl: OpenGL和OpenGLES --hlsl: DX11 -o :输出文件名 qsb --glsl 100 es,120,150 --hlsl 50 --msl 12 -o myeffect.frag.qsb myeffect.fragShaderEffect实例代码运行结果如下
1.个人理解ShaderEffect是用户自己写Shader对渲染进行控制可用于一些特效处理或者后期处理。 2.ShaderEffect可以和layer.effect结合做一些特殊处理。 3.在ShaderEffect中还可以使用单个Shader,比如只编写片段着色器对片段进行特殊处理。 4.ShaderEffect中涉及到很多OpenGL相关的知识和概念可以通过学习 learnOpengl 去了解更多OpenGL相关的知识和概率。 5.在Qt帮助文档中有用ShaderEffect 类处理渐变文本实例感兴趣小伙伴可以多研究下原理。
