---------------------------------------------------Qt quick 2d shader effect---------------------------------------------------概念    着色器和普通的图像处理程序不同，它只针对一个点做运算，它包括：        vertext shader: 顶点着色器，主要用于处理位置，要求输出当前点的新位置。        fragment shader(pixel shader)：片段着色器（像素着色器），主要用于处理色彩。要求输出当前点的新色彩。    系统会自动处理循环，并行运算多个点，自动处理图像边界    主要有两类Shader程序: GLSL(OpenGL提供）, HLSL（DirectX提供）    注：好像时 5.6 版本后才支持directx，所以事情复杂了。现在Qt3D的shader就复杂无比.    GLSL（OpenGL Shader Language)    参数修饰词        uniform : 表示每次运算时参数值不变的        varying : 表示每次运算时参数值时变动的。如当前点的纹理坐标        lowp    : 表示低精度        highp   : 表示高精度    预定义参数        uniform mat4 qt_Matrix           : 变形矩阵- combined transformation matrix, the product of the matrices from the root item to this ShaderEffect, and an orthogonal projection.        uniform float qt_Opacity         : 透明度- combined opacity, the product of the opacities from the root item to this ShaderEffect.        attribute vec4 qt_Vertex         : 当前计算点的坐标        attribute vec2 qt_MultiTexCoord0 : 纹理坐标（输入的图片／item等）    输入参数类型映射        在ShaderEffect中定义的参数会自动映射到Shader里面去        bool, int, qreal -> bool, int, float        QColor -> vec4         : 注意色彩输入shader时会先做半透明预处理，如Qt.rgba(0.2, 0.6, 1.0, 0.5) 会转化为 vec4(0.1, 0.3, 0.5, 0.5)        QRect, QRectF -> vec4(x, y, w, h)        QPoint, QPointF, QSize, QSizeF -> vec2(x, y)        QVector3D -> vec3(x, y, z)        QVector4D -> vec4(x, y, w, w)        QTransform -> mat3        QMatrix4x4 -> mat4        QQuaternion -> vec4, scalar value is w.        Image -> sampler2D        ShaderEffectSource -> sampler2D    输出        vertext shader: 顶点着色器，主要用于处理位置，要求输出gl_Position参数。        fragment shader(pixel shader)：片段着色器（像素着色器），主要用于处理色彩。要求输出gl_FragColor参数。    常用方法        lowp vect4 text = texture2D(src, qt_TexCoord0);  // 取纹理色彩        abs/min/max/....    示例        ShaderEffect {          width: 200          height: 200          mesh: GridMesh { resolution: Qt.size(20, 20) }          property var source: Image {              source: "qt-logo.png"              sourceSize { width: 200; height: 200 }          }          vertexShader: "              uniform highp mat4 qt_Matrix;              attribute highp vec4 qt_Vertex;              attribute highp vec2 qt_MultiTexCoord0;              varying highp vec2 qt_TexCoord0;              uniform highp float width;              void main() {                  highp vec4 pos = qt_Vertex;                  highp float d = .5 * smoothstep(0., 1., qt_MultiTexCoord0.y);                  pos.x = width * mix(d, 1.0 - d, qt_MultiTexCoord0.x);                  gl_Position = qt_Matrix * pos;                  qt_TexCoord0 = qt_MultiTexCoord0;              }"        }HLSL(Direct3D)    blablabla，有很多不同，                示例        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"        }        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;        }跨平台的Shader写法    方法1（根据 GraphicsInfo.shaderType 判断）:          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;                  }"              : ""          }     方法2（自动选择）:          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" // 系统会自动选择 shaders/effect.frag 或 shaders/+hlsl/effect.frag          }               示例    // 去色    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;          }"    }        // 图层混合    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;          }      "    }    // 上下两边虚化    Flickable{       ....    }    ShaderEffectSource {        id: flickableAreaSource        sourceItem: flickableArea        hideSource: true        visible: false    }    ShaderEffect {        property variant src: flickableAreaSource        anchors.fill: flickableArea        fragmentShader: "            varying highp vec2 qt_TexCoord0;            uniform lowp float qt_Opacity;            uniform sampler2D src;            void main() {                lowp vec4 tex = texture2D(src, qt_TexCoord0);                lowp float dist = abs(qt_TexCoord0.y-0.5)*4.0;                tex*= min(1.0, (2.0 - dist));                gl_FragColor = tex * qt_Opacity;            }"    }