Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Shader effect displayed as 1/4 of screen


  • Qt Champions 2020

    Hi all.

    I want to implement a (Dizzy) shader effect, taken from the 'AMD RenderMonkey' utility.
    A source code of that shaders are:

    == vertex ==

    varying vec2 vTexCoord;
    void main(void)
    {
       // Clean up inaccuracies
       vec2 Position;
       Position.xy = sign(gl_Vertex.xy);
       gl_Position = vec4(Position.xy, 0.0, 1.0);
       vTexCoord = Position.xy;
    }
    

    == fragment ==

    // Basic idea:
    // Rings = sin(radius)
    // Spiral = slow offset according to angle, so sin(angle + radius)
    // Add time for animation
    uniform float exponent;
    uniform float speed;
    uniform float rings;
    uniform float time_0_X;
    varying vec2 vTexCoord;
    
    void main(void)
    {
       float ang = atan( vTexCoord.y / vTexCoord.x );
       float rad = pow( dot( vTexCoord, vTexCoord ), exponent );
       vec4 value =  vec4( sin( ang + rings * rad + speed * time_0_X ) );
       value = vec4( 0.5, 0.5, 0.5, 0.5 ) * ( vec4( 1.0, 1.0, 1.0, 1.0 ) + value );
       if( vTexCoord.x < 0.0 ) 
       {   
          value = 1.0 - value;
       }
       gl_FragColor = value;
    }
    

    I have modified this code to the my QML application with a shader effect item:

    ShaderEffect {
            ...
            ...
            blending: false
    
            vertexShader: "
                uniform highp mat4 qt_Matrix;
                attribute highp vec4 qt_Vertex;
                attribute highp vec2 qt_MultiTexCoord0;
                varying highp vec2 qt_TexCoord0;
                void main() {
                    qt_TexCoord0 = qt_MultiTexCoord0;
                    gl_Position = qt_Matrix * qt_Vertex;
                }"
    
            fragmentShader: "
                // Basic idea:
                // Rings = sin(radius)
                // Spiral = slow offset according to angle, so sin(angle + radius)
                // Add time for animation
    
                uniform float exponent;
                uniform float speed;
                uniform float rings;
                uniform float time_0_X;
                uniform highp mat4 qt_Matrix;
                varying vec2 qt_TexCoord0;
    
                void main(void)
                {
                   float ang = atan( qt_TexCoord0.y / qt_TexCoord0.x );
                   float rad = pow( dot( qt_TexCoord0, qt_TexCoord0 ), exponent );
                   vec4 value =  vec4( sin( ang + rings * rad + speed * time_0_X ) );
                   value = vec4( 0.5, 0.5, 0.5, 0.5 ) * ( vec4( 1.0, 1.0, 1.0, 1.0 ) + value );
                   if( qt_TexCoord0.x < 0.0 )
                   {
                      value = 1.0 - value;
                   }
                   gl_FragColor = value;
                }
            "
            ...
            ...
    }
    

    But, in my case, the QML's effect show an 1/4 of original dizzy. I suspect that a reason can be in a different coordinates mesh in qt (where are 0.0 ... 1.0) and in OpenGL (where are -1.0 ... 1.0). But I'm not an expert, and I don't know how to fix my shaders according to original dizzy example.

    Could someone help me?

    Original

    My


  • Qt Champions 2020

    Ahh... need just to add an offset (-0.5, -0.5) to the vertex shader:

    qt_TexCoord0 = qt_MultiTexCoord0 + vec2(-0.5, -0.5);
    

Log in to reply