Is it possible to access a frag shader in design studio?

[Joe McGuchan]

I have the following example.

I add a .frag shader to my project by adding the following lines to .qmlproject.

    Files {
        filter: "*"
        directory: "shader"
    }

I then add a .qml file that loads this shader.

content/ColourWheel.qml

Item {
    ShaderEffect {
        id: wheelShader

        property int pixelRadius: width / 2
        property real hsvValue: 1.0

        anchors.fill: parent
        fragmentShader: "../shader/colour_wheel.frag"
    }

    ShaderEffectSource {
        id: wheelShaderEffect

        anchors.fill : wheelShader

        sourceItem: wheelShader
        hideSource: true
        live: false
    }
}

However, no matter what variation of the fragmentShader property I use, I cannot get one that can access the fragment shader file. Even when I write out the full path to the shader explicitly, it doesn't seem to be able to see the .frag file.

I suspect that I am either doing something wrong in my .qmlproject file, or what I am trying to acheive is impossible. Unfortunately I cannot find any documentation to show me one way or the other. Would anyone be able to provide some advice, or a working example of a .frag file being loaded in design studio?

All best,
Joe

[Joe McGuchan]

Bumping this topic, does anyone have any advice here?

[Joe McGuchan]

I'll bump this one last time. Can anyone confirm if what I am doing is even sensible?

[fcarney]

@Joe-McGuchan said in Is it possible to access a frag shader in design studio?:

fragmentShader: "../shader/colour_wheel.frag"

Put the fragment shader in a resource attached to the executable. It is pretty much guaranteed that the test environment path and the runtime path will be different. Using the shader is a resource solves this issue.

I don't use design studio so I have no idea if your approach is fine or not. But if it is not finding the file because of path issues then at least you can eliminate this issue. Are you getting error messages in your "Application Output" panel?

[Joe McGuchan]

Thank you for your response fcarney

This is the result from attemping to run the design studio project

QOpenGLShader::compile(Fragment): ERROR: 4:1: '.' : syntax error syntax error

*** Problematic Fragment shader source code ***
#version 110
#ifdef GL_KHR_blend_equation_advanced
#extension GL_ARB_fragment_coord_conventions : enable
#extension GL_KHR_blend_equation_advanced : enable
#endif
#define lowp
#define mediump
#define highp
#line 1
../shader/colour_wheel.frag
***

I do not know exactly what you mean by "Put the fragment shader in a resource attached to the executable" could you specify the steps?

One thing worth adding is that design studio is a qml-only peice of software, at least from the project I am using. It doesn't have a c++ main function or a .qrc for me to edit. This is why I'm not certain if what I am doing is possible. I think it would be strange is design studio had no way to use fragment shaders, but there is so little documentation on Design Studio it's hard to know.

[fcarney]

It is interpreting the file path as a shader program. Change the file path to: "file:../shader/colour_wheel.frag". It should now treat that string as a local file path.

In order to use the resource system you will need to read up about it. https://doc.qt.io/qt-5/resources.html I am unsure if this is compatible with a design studio project.

[Joe McGuchan]

Thank you for the help, it now tries to load the file, but it still outputs an error, and all black.

ShaderEffect: Failed to read colour_wheel.frag
QQuickOpenGLShaderEffect: 'source' does not have a matching property!

[fcarney]

@Joe-McGuchan The path is not relative to the source code directory. It is probably creating a shadow directory next to the directory that houses the code. This is why I am suggesting learning the resource system. It gets around all that shenanigans.

[Joe McGuchan]

Thank you, I've got it working with an absolute path. I'd been avoiding using a resource system because I wasn't sure if design studio supported such a thing, it looks like you can set up a resource system for design studio, however, so that is the next step.

[Joe McGuchan]

For the purpouse of people who might search for an find this forum post, I put in a request with QT support and received the following.

Hi Joe,

Thank you for contacting Qt Support and for providing your sample project.

There are 2 broad ways to specify the fragmentShader property, depending on which version of Qt you want to target:

• The Qt 5 way is to specify the shader's source code as a string.
• The Qt 6 way is to pre-compile your shader source code into a .qsb file, and specify a URL to that .qsb file

See:

• https://doc.qt.io/qt-5/qml-qtquick-shadereffect.html#fragmentShader-prop
• https://doc.qt.io/qt-6/qml-qtquick-shadereffect.html#fragmentShader-prop

To do it the Qt 5 way, the easiest approach is to copy the contents of your .frag file and paste it as a string literal (surrounded by quotation marks) to the RHS of the "fragmentShader" property.

To do it the Qt 6 way, run the QSB tool to compile your shader source code. Unfortunately, the code of colour_wheel.frag is too old to be supported by QSB (for example, the "varying" keyword was deprecated long ago, and even removed for ES profiles)

See:

• https://doc.qt.io/qt-6/qtshadertools-overview.html
• https://doc.qt.io/qt-6/qtshadertools-qsb.html

I hope this helps.