Ändern der Farbe eines Fragments einer Textur mit Shadern

Question

Deklarative Programmiersprache QML ermöglicht es, die Elemente zu verbinden, ihre Eigenschaften mit universellen Variablen in Shader -Programmen Beschreibung. Für diese Zwecke gibt es Elemente wie ShadereffectItem, zum Beispiel. Hier definieren wir zum Beispiel ein bestimmtes Bild image.jpg. Und in der source Eigenschaft Wir haben nur festgelegt, dass sich dieses Bild im Bild ändert und diese Eigenschaft bereits in der Fragment Shader -Programmbeschreibung Fragmentshader als einheitliche Sampler2d -Quelle festgelegt wird. qt_TexCoord0 Definiert die erste Koordinate einer Textur. Wir erhalten dort graue Farbe auf allen Textur -Skalarprodukten Lowp Float Gray = Punkt (TextureColor, VEC4 (0,299, 0,587, 0,114, 0,0)); Außerdem installieren wir die Farbe eines Fragments in einem Ausgangsvariablen 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
            }
        }
    }

Nach der Leistung einer Textur (Bild) ist allmählich grau vergeht, und dann wird alles auch in einer unendlichen Schleife erfüllt. Jetzt:

Eine Frage hier in Was: Und ich kann irgendwie die Farbe einer Bestimmung eines Teils einer Textur (meine Bilderbilder/Bild.jpg) ändern, dh bestimmte Abschnitte. Zum Beispiel werde ich in QML zwei Variablen xcolor, ycolor definieren. xcolor + 10, ycolor + 10] - unten rechts Ecke. Ich will:

Ich weiß, dass es implementiert werden kann. Wie optimaler zu machen? In welche Richtung für mich zu denken? Ob es ähnliche Beispiele gibt? Es wäre schön, Mischfarbe hinzuzufügen (in diesem Abschnitt rot bis grau).

Answer 1

Für Rechteck müssen Sie Texturkoordinaten überprüfen:

1. Konvertieren Sie die Koordinaten der Eingabetextur in Pixel:

   Highp vec2 pix_coords = qt_texcoord0.st * Image_size; // Sie müssen die Variable image_size an Shader übergeben

2. Überprüfen Sie die Grenzen Ihres Rekts:

   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)))

   {// Greyscale} machen}

   anders

   {// Standard -Farb -Lookup}

Die Optimierung wäre besser, das Rechteck in den Texturraum zu verwandeln und nicht konvertierte Texturkoordinaten zu überprüfen.