Qt Quick 3D - Beispiel für einen benutzerdefinierten Effekt

Das Beispiel implementiert eigene benutzerdefinierte Nachbearbeitungseffekte, die anschließend über „ SceneEnvironment::effects “ auf die Szene angewendet werden. Es demonstriert sowohl die einfachste Art von Effekten, die nur einen Fragment-Shader enthalten, als auch den fortgeschritteneren Fall, bei dem sowohl ein Vertex- als auch ein Fragment-Shader vorhanden sind und Daten zwischen beiden ausgetauscht werden.

Der einfache Effekt verwendet nur einen einzigen Fragment-Shader und fügt eine Textur aus einer Bilddatei hinzu:

Effect {
    id: eff1
    property TextureInput tex: TextureInput {
        id: qtLogo
        texture: Texture { source: "qt_logo_rect.png" }
    }
    passes: Pass {
        shaders: Shader {
            id: fs1
            stage: Shader.Fragment
            shader: "effect.frag"
        }
    }
}

Dieser Effekt verwendet einen sehr einfachen Fragment-Shader, der lediglich die Eingabetextur mit der Szene übernimmt und diese mit der Bildtextur multipliziert:

void MAIN()
{
    vec4 c = texture(tex, TEXTURE_UV);
    FRAGCOLOR = c * texture(INPUT, INPUT_UV);
}

Die Shader-Ausschnitte in den Dateien „ .vert “ und „ .frag “ sind unter Verwendung der integrierten Schlüsselwörter geschrieben, wie in der Dokumentation unter Effect beschrieben. Benutzerdefinierte Eigenschaften mit Grundtypen sowie Eigenschaften vom Typ „ TextureInput “ werden den Shadern automatisch als Uniforms und Sampler zur Verfügung gestellt.

Der zweite Effekt ist komplexer. Er legt sowohl einen Vertex- als auch einen Fragment-Shader fest sowie zwei Eigenschaften: „ uRed “ und „ uGreen “, mit einer Animation unter uRed:

Effect {
    id: eff2
    property real uRed: 0.0
    SequentialAnimation {
        running: radioEff2.checked || radioEff3.checked
        loops: Animation.Infinite
        NumberAnimation { target: eff2; property: "uRed"; from: 0; to: 1; duration: 2000 }
        NumberAnimation { target: eff2; property: "uRed"; from: 1; to: 0; duration: 2000 }
    }
    property real uGreen: 1.0
    Shader {
        id: vs2
        stage: Shader.Vertex
        shader: "effect2.vert"
    }
    Shader {
        id: fs2
        stage: Shader.Fragment
        shader: "effect2.frag"
    }
    passes: Pass {
        shaders: [ vs2, fs2 ]
    }
}

Der Fragment-Shader für diesen Effekt erzeugt eine Verzerrung, indem er die Abtastkoordinaten modifiziert. Die Berechnung verwendet „ center_vec “, ein vom Vertex-Shader gesetztes „VARYING“, das den im Seitenverhältnis korrigierten Vektor von der Bildschirmmitte zum aktuellen Fragment enthält. Schließlich passt der Shader die Farbe mithilfe der Uniforms „ uRed “ und „ uGreen “ an. Beachten Sie, dass diese Uniforms nicht im Shader deklariert werden müssen:

VARYING vec2 center_vec;

void MAIN()
{
    float radius = 0.25;
    float dist_to_center = length(center_vec) / radius;
    vec2 texcoord = INPUT_UV;
    if (dist_to_center <= 1.0) {
        float rotation_amount = (1.0 - dist_to_center) * (1.0 - dist_to_center);
        float r = radians(360.0) * rotation_amount / 4.0 * FRAMEBUFFER_Y_UP;
        float cos_r = cos(r);
        float sin_r = sin(r);
        mat2 rotation = mat2(cos_r, sin_r, -sin_r, cos_r);
        texcoord = vec2(0.5, 0.5) + rotation * (INPUT_UV - vec2(0.5, 0.5));
    }
    vec4 c = texture(INPUT, texcoord);
    c.r *= uRed;
    c.g *= uGreen;
    FRAGCOLOR = c;
}

Beispielprojekt @ code.qt.io