使用着色器更改纹理的某些片段的颜色

Question

声明性编程语言QML允许在着色器程序描述中将元素及其属性与通用变量相连接。出于这些目的，例如有ShaderEffectItem这样的元素。例如，我们在此定义某个图像image.jpg。在source属性中，我们只设置此图像将在图像中发生任何变化，并且此属性在片段着色器程序描述fragmentShader中已经设置为均匀sampler2D源。 qt_TexCoord0定义纹理的初始坐标。我们在所有纹理标量积上得到灰色的颜色lowp float gray = dot（textureColor，vec4（0.299,0.587,0.114,0.0））;我们还在输出变量gl_FragColor中安装片段的颜色。

....
Item {
    id: main
    Image {
         id: img
         source: "images/image.jpg"
      }

    ShaderEffectItem {
       id: effect
       property real ratio: 1.0
        property variant source: ShaderEffectSource {            
             sourceItem: img;
             hideSource: true
        }

        fragmentShader:
          "
          varying highp vec2 qt_TexCoord0;
          uniform sampler2D source;
          uniform highp float ratio;
          void main(void)
          {
            lowp vec4 textureColor = texture2D(source, qt_TexCoord0.st);
            lowp float gray = dot(textureColor, vec4(0.299, 0.587, 0.114, 0.0));
            gl_FragColor = vec4(gray * ratio + textureColor.r * (1.0 - ratio), gray * ratio + textureColor.g * (1.0 - ratio), gray * ratio + textureColor.b * (1.0 - ratio), textureColor.a);
         }
         "
    }

        SequentialAnimation on ratio {
            id: ratioAnimation
            running: true
            loops: Animation.Infinite
            NumberAnimation {
                easing.type: Easing.Linear
                to: 0.0
                duration: 500
            }
            PauseAnimation {
                duration: 500
            }
            NumberAnimation {
                easing.type: Easing.Linear
                to: 1.0
                duration: 500
            }
            PauseAnimation {
                duration: 500
            }
        }
    }

在纹理（图片）的性能颜色逐渐完全以灰色传递之后，然后所有颜色都反转，它在无限循环中完成。现在：

实际上这里的问题是什么：我可以改变纹理的一部分（我的图片images / image.jpg）的任何明确性的颜色，即任何特定的部分。例如，我将在QML中定义两个变量xColor，yColor，我们类似地比较着色器描述，然后例如纹理将仅在具有坐标左上角[xColor - 10，yColor - 10]和[ xColor + 10，yColor + 10] - 右下角。我想要：

我知道它可以实施。如何更好地制作？我想在哪个方向思考？是否有类似的例子？添加混合颜色（本节中红色到灰色）会很不错。

Answer 1

对于矩形，您需要检查纹理坐标：

1. 将输入纹理坐标转换为像素：

   highp vec2 pix_coords = qt_TexCoord0.st * image_size; //你需要将image_size变量传递给着色器

2. 检查矩形的边界：

   if（（pix_coords.x＆gt; rect_bottom_left.x）＆amp;＆amp;（pix_coords.y＆gt; rect_bottom_left.y）＆amp;＆amp;（pix_coords.x＆lt; rect_top_right.x）＆amp;＆amp;（pix_coords。 y＆lt; rect_top_right.y））

   {     //制作灰度 }

   否则

   {     //标准颜色查找 }

对于优化，最好将矩形转换为纹理空间并检查未转换的纹理坐标。