Needle trailing color/glow effect using Shader Effect on Qt6 QML

[DeepakVishak]

Re: QML Circular Gauge Styling - Needle trailing colour/glow

@timday , Thank you providing the shader code for needle trailing glow effect

In Qt5, I successfully executed the code by changing the atan2 to atan. as per the suggestion made by @mranger90 (Thank you for that)

I am currently trying to implement the same on Qt6.

For Qt6, we need to write the shader code as Vulcan-compatible GLSL as mentioned on qt6book-with-frontpage page no: 379.

I tried to convert the code and executed it i got an error like

Failed to build graphics pipeline state
Failed to link shader program: error: uniform `ubuf' declared as type `buf' and type `buf'

This is my Main.qml

import QtQuick

Window {
    id:root
    width: 512
    height: 512
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id:rect
        width: 512
        height: 512
        color: 'black'

        // Put some text in the background just to check opacity
        Text {
            x: rect.width/6.0-0.5*contentWidth
            y: rect.height/2.0-0.5*contentHeight
            text: '30'
            color: 'white'
        }
        Text {
            x: rect.width/2.0-0.5*contentWidth
            y: rect.height/6.0-0.5*contentHeight
            text: '60'
            color: 'white'
        }
        Text {
            x: 5.0*rect.width/6.0-0.5*contentWidth
            y: rect.height/2.0-0.5*contentHeight
            text: '90'
            color: 'white'
        }

        // Shader effect to provide gradient-based gauge
        ShaderEffect {
            id: gauge
            anchors.fill: parent

            opacity: 0.75  // Making it totally opaque on leading edge obscures the number!

            visible: true

            // Angles measured clockwise from up, in range -pi to pi
            property real angleBase: -pi*0.75
            property real angle

            readonly property real pi: 3.1415926535897932384626433832795

            vertexShader: "needletrail.vert.qsb"

            fragmentShader: "needletrail.frag.qsb"
        }

        // Animate the gauge position
        SequentialAnimation {
            running: true
            loops: Animation.Infinite
            NumberAnimation {
                from: gauge.angleBase
                to: gauge.angleBase+1.5*gauge.pi
                duration: 5000
                target: gauge
                property: 'angle'
                easing.type: Easing.InOutSine
            }
            NumberAnimation {
                from: gauge.angleBase+1.5*gauge.pi
                to: gauge.angleBase
                duration: 5000
                target: gauge
                property: 'angle'
                easing.type: Easing.InOutSine
            }
        }

    }
}

This is my needletrail.vert

#version 440

layout(location=0) in vec4 qt_Vertex;
layout(location=1) in vec2 qt_MultiTexCoord0;
layout(location=0) out vec2 qt_TexCoord0;

layout(std140, binding=0) uniform buf {
	mat4 qt_Matrix;
} ubuf;

out gl_PerVertex {
	vec4 gl_Position;
};

void main() {
   qt_TexCoord0 = qt_MultiTexCoord0;
   gl_Position = ubuf.qt_Matrix * qt_Vertex;
}

This is my needletrail.frag

#version 440

layout(location = 0) out vec4 fragColor;
layout(location = 0) in vec2 qt_TexCoord0;

layout(std140, binding = 0) uniform buf {
    float qt_Opacity;
    float angleBase;
    float angle;
} ubuf;


void main() 
{
	fragColor = vec4(0.0,0.0,0.0,0.0);
	vec2 d= 2.0*qt_TexCoord0-vec2(1.0,1.0);
	float r=length(d);
	if (0.25<=r && r<=0.75) 
	{
		float a = atan(d.x,-d.y);
		if (ubuf.angleBase <= a && a <= ubuf.angle) 
		{
			float p = (a-ubuf.angleBase)/(ubuf.angle-ubuf.angleBase);
			fragColor = vec4(0.0,0.0,p,p) * ubuf.qt_Opacity;
		}
	}
}

This is my CMakeLists.txt

cmake_minimum_required(VERSION 3.16)

project(NeedleTrailAnimationShaderEffects VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick ShaderTools)

qt_standard_project_setup()

qt_add_executable(appNeedleTrailAnimationShaderEffects
    main.cpp
)

qt_add_qml_module(appNeedleTrailAnimationShaderEffects
    URI NeedleTrailAnimationShaderEffects
    VERSION 1.0
    QML_FILES Main.qml
    RESOURCES needletrail.vert.qsb needletrail.frag.qsb
)

qt6_add_shaders(appNeedleTrailAnimationShaderEffects "appNeedleTrailAnimationShaderEffects"
    BATCHABLE
    PREFIX
        "/"
    FILES
        "needletrail.vert"
        "needletrail.frag"
)

# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.
# If you are developing for iOS or macOS you should consider setting an
# explicit, fixed bundle identifier manually though.
set_target_properties(appNeedleTrailAnimationShaderEffects PROPERTIES
#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appNeedleTrailAnimationShaderEffects
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(appNeedleTrailAnimationShaderEffects
    PRIVATE Qt6::Quick
    PRIVATE Qt6::ShaderTools
)

include(GNUInstallDirs)
install(TARGETS appNeedleTrailAnimationShaderEffects
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

I am new to shadereffect and all i think most probability made an error on shader code
So any body please help

[Lord_Naikon]

The error you get is the shader compiler telling you that you have two uniforms defined, with the same name, but with two different types (that happen to have the same name).

In this case it's probably easiest to merge both definitions, so that they are the same.

layout(std140, binding = 0) uniform buf {
    mat4 qt_Matrix;
    float qt_Opacity;
    float angleBase;
    float angle;
} ubuf;

Then, adjust your updateUniformData() implementation to match the new offsets.

[DeepakVishak]

Yea exactly @Lord_Naikon thank you for your support I just made two uniform buf with same set of data as mentioned now its working. Thank you soo much