Working with shader code in Effect Composer

This page contains tips, tricks, and best practices for working with shader code in the Effect Composer view.

To get started with the the Effect Composer view, see Effect Composer.

Shader code structure

The shader code structure for shaders of individual nodes in Qt Design Studio is as follows:

The main function content should be listed below the @main tag.
Other functions should be listed above the @main tag.

Note: The main shader code structure is different from the code structure of indivudal nodes. The main shader has a @nodes tag instead of a @main tag to indicate where the node specific main function content goes.

Example shader code

In this example, you can see a comparison of shader code that works in ShaderToy and shader code in Qt Design Studio:

Shadertoy

vec3 waveEffect(vec2 uv, float time) {
  float wave = sin(uv.x * 10.0 + time) * 0.1;
  return vec3(uv.y + wave, uv.y + wave, 1.0);
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  vec3 color = waveEffect(uv, iTime);
  fragColor = vec4(color, 1.0);
}

Qt Design Studio

vec3 waveEffect(vec2 uv, float time) {
  float wave = sin(uv.x * 10.0 + time) * 0.1;
  return vec3(uv.y + wave, uv.y + wave, 1.0);
}

@main
{
  vec2 uv = fragCoord / iResolution.xy;
  vec3 color = waveEffect(uv, iTime);
  fragColor = vec4(color, 1.0);
}

Built-in uniforms

In Qt Design Studio, you can use uniforms for shaders you build and also use custom shaders.

Inputs and outputs

Type	Name	Description
vec4	fragColor	Fragment shader's output for the color. The format is RGBA and is multiplied by default with the item opacity (qt_opacity).
vec2	texCoord	Normalized position of the fragment (0.0 - 1.0).
vec2	fragCoord	Position of the fragment in pixels (0.0 - iResolution.xy).
vec2	vertCoord	Position of the vertex in pixels (0.0 - iResolution.xy). Modify this in the vertex shader to move the vertices.
vec3	iResolution	Size of the source item or image in pixels. The z parameter is always 1.0.
float	iTime	Animated time in seconds.
int	iFrame	Animated frame number.
sampler2D	iSource	Texture sampler of the source item or image.

External resources

If you copy shader code from external resources, consider the following:

ShaderToy

ShaderToy is using the same naming as Qt Design Studio for uniforms.

The Book of Shaders

If you use shader code from The Book of Shaders, you need to rename the uniforms.

Example uniforms.

The Book of Shaders uniforms	In Qt Design Studio, rename to this
`uniform vec2 u_resolution;`	`iResolution`
`uniform float u_time;`	`iTime`

Controlling animations with iTime

If you are using iTime in your shader code, you can start and sop the animation with the timeRunning property in Qt Design Studio.

If you set timeRunning to false, you can freeze the effect to a specific point in the elapsed time of the animation by setting a value for the animatedTime property.

You can control these settings either from the Properties view or from code.

NorthernLights {
    id: northernLights
    animatedTime: 1
    timeRunning: false
}

Available under certain Qt licenses.
Find out more.