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

声明式编程语言QML允许在着色器程序描述中使用通用变量连接元素及其属性。为了这些目的，例如有ShaderEffectItem等元素。在这里，例如，我们定义了某个图像image.jpg。并且在source属性中，我们只设置该图像将在图像中发生变化，并且此属性已经在片段着色器程序描述fragmentShader中设置为统一的sampler2D源。 qt_TexCoord0定义了纹理的初始坐标。我们在所有纹理标量产品上收到灰色颜色lowp float grey = 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 
      } 
     } 
    }

当一张纹理（图片）的效果颜色逐渐完全通过灰色后，所有都是反过来也是在无限循环中实现。现在：

enter image description here

实际上在这里的一个问题是什么：我可以改变纹理（我的照片图像/ image.jpg的），即任何某些部分的一部分的任何确定性的莫名其妙的颜色。例如，我将在QML中定义两个变量xColor，yColor，我们将它转换为类似比例的着色器描述，然后例如纹理将仅在具有左上角[xColor - 10，yColor - 10]和[ xColor + 10，yColor + 10] - 右下角。我想：

enter image description here

我知道，它可以实现。如何更优化地制作？我想要以什么方向思考？是否有类似的例子？这将是很好的添加混合颜色（本节中的红色到灰色）。

来源

2011-12-05 G-71

对于您需要检查纹理直角坐标：

转换输入纹理坐标像素：

highp VEC 2 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 < rect_top_right.x）& &（pix_coords.y < rect_top_right.y））

{ //使灰度 }

其他

{// 标准颜色查找 }

至于优化，这将是更好地改造成矩形纹理空间，并检查未转化的纹理坐标。

来源

2011-12-05 07:17:26 brigadir

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

回答

相关问题