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

Question

声明式编程语言 QML 允许将元素、它们的属性与着色器程序描述中的通用变量连接起来。例如，出于这些目的，有诸如ShaderEffectItem 之类的元素。在这里，例如，我们定义了一个特定的图像image.jpg。在source属性中，我们只设置此图像任何将在图像中更改，并且此属性已在片段着色器程序描述 f​​ragmentShader 中设置为统一的 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
            }
        }
    }

纹理（图片）的表现颜色逐渐完全转为灰色，然后全部反转，无限循环地完成。现在：

一个问题实际上在这里是什么：我可以以某种方式改变纹理的一部分（我的图片图像/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 > rect_bottom_left.x) && (pix_coords.y > rect_bottom_left.y) && (pix_coords.x < rect_top_right.x) && (pix_coords.y < rect_top_right.y))

   { // 灰度化 }

   别的

   { // 标准颜色查找 }

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