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

【问题标题】：Changing the color of some fragment of a texture using shaders使用着色器更改纹理的某些片段的颜色
【发布时间】：2012-01-12 23:19:39
【问题描述】：

声明性编程语言 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
            }
        }
    }

一个纹理（图片）的表现颜色逐渐完全变灰，然后一切反转，也是在一个无限循环中完成。现在：

一个问题实际上是什么：我可以以某种方式改变纹理的一部分（我的图片图像/image.jpg）的任何确定性的颜色，即任何特定部分。例如，我将在 QML 中定义两个变量 xColor、yColor，我们以类似方式将其传递给着色器描述，然后例如纹理将仅在坐标为左上角 [xColor - 10, yColor - 10] 和 [ xColor + 10, yColor + 10] - 右下角。我要：

我知道它可以实现。如何更优化？我该往什么方向思考？有没有类似的例子？最好添加混合颜色（本节中为红色到灰色）。

【问题讨论】：

标签： opengl opengl-es qml shader

【解决方案1】：

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

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

highp vec2 pix_coords = qt_TexCoord0.st * image_size; // 你需要将 image_size 变量传递给着色器
检查矩形的边界：

if ((pix_coords.x > rect_bottom_left.x) && (pix_coords.y > rect_bottom_left.y) && (pix_coords.x

{ // 制作灰度 }

其他

{ // 标准颜色查找 }

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

【讨论】：