Qt World Summit: Register Today!

QML Shaders

  • I recently found out that though Animations do a great job super-cool stuffs in QML are done using shaders. Now I know nothing about this. "One eg I found out is here":http://ilkka.github.io/blog/2011/03/04/qtquick_2_scenegraph_glsl_fragment_shader_tutorial/.

    I would certainly like to add such effects to my project but I know nothing about shaders. However I've programmed in WPF3D - C# in the past on 3D modelling of real-world surfaces so I have some knowledge of mesh, geometry, texture etc. I want some advice on how do I start learning the usage of Shaders in QML. Do i need to study OpenGL 1st or some specific offerings of OpenGL or something called GLSL? Is there any other way i can have those effects (for eg the one in the link i posted)?

  • I suggest you try this simple "example":http://doc-snapshot.qt-project.org/qdoc/qml-qtquick-shadereffect.html first.

    and then try other examples.

    import QtQuick 2.0

    Rectangle {
    width: 200; height: 100
    Row {
    Image { id: img; sourceSize { width: 100; height: 100 } source: "qt-logo.png" }
    ShaderEffect {
    width: 100; height: 100
    property variant src: img
    vertexShader: "
    uniform highp mat4 qt_Matrix;
    attribute highp vec4 qt_Vertex;
    attribute highp vec2 qt_MultiTexCoord0;
    varying highp vec2 coord;
    void main() {
    coord = qt_MultiTexCoord0;
    gl_Position = qt_Matrix * qt_Vertex;
    fragmentShader: "
    varying highp vec2 coord;
    uniform sampler2D src;
    uniform lowp float qt_Opacity;
    void main() {
    lowp vec4 tex = texture2D(src, coord);
    gl_FragColor = vec4(vec3(dot(tex.rgb, vec3(0.344, 0.5, 0.156))), tex.a) * qt_Opacity;

Log in to reply