Shader Elements

The default shader uses the source and renders it unmodified. Below, we first see the QML file with two ShaderEffect elements. One without any shaders specified, and one explicitly specifying default vertex and fragment shaders. We will look at the shaders shortly.

In the above example, we have a row of 3 images. The first is the real image. The second is rendered using the default shader and the third is rendered using the shader code for the fragment and vertex as shown below. Let’s have a look at the shaders.

The fragment shader takes the texture from the source 2D sampler, i.e. the texture, at the coordinate qt_TexCoord0 and multiplies it with the Qt opacity, to calculate the fragColor which is the color to be used for the pixel.

Notice that these two shaders can serve as the boilerplate code for your own shaders. The variables, locations and bindings, are what Qt expects. You can read more about the exact details of this on the Shader Effect Documentation (opens new window).

Before we can use the shaders, they need to be baked. If the shaders are a part of a larger Qt project and included as resources, this can be automated. However, when working with the shaders and a qml-file, we need to explicitly bake them by hand. This is done using the following two commands:

TIP

If you don’t want to see the source image and only the effected image you can set the Image to invisible (`` visible: false``). The shader effects will still use the image data just the Image element will not be rendered.

In the next examples, we will be playing around with some simple shader mechanics. First, we concentrate on the fragment shader and then we will come back to the vertex shader.