Porting Shadertoy effects to Qt Quick Effect Maker

Qt Quick Effect Maker Documentation.

Article lu fois.

L'auteur

The Qt Company Ltd.

Publié le 14 février 2024 - Mis à jour le 14 février 2024

You can use effects created in Shadertoy in Qt Quick Effect Maker. When you use Shadertoy effects, consider the following:

Qt Quick Effect Maker doesn't support the following Shadertoy features:
- Multipass effects (Buffer tabs)
- Audio
- Cube maps
- 3D textures
Shadertoy supports only fragment shaders and built-in textures. To improve the effect performance in Qt Quick Effect Maker, move some calculations to the vertex shader and use custom images to simplify the shader code.
The coordinate system differs between Shadertoy and Qt Quick Effect Maker. In Shadertoy, the origin (0,0) is located in the lower-left corner while Qt Quick Effect Maker has the origin in the upper-left corner.

To use a Shadertoy effect in Qt Quick Effect Maker:

In Qt Quick Effect Maker, create a new effect.
In the node editor, select Add node and then, under Common, select Custom. This creates an empty node.
In Shadertoy, copy all the code from the Image tab.
In Qt Quick Effect Maker, double-click the Custom node in the node editor. This opens the code editor.
Paste the Shadertoy code to the Frag tab.
Find the Main function in the code, it looks something like:
Sélectionnez
```
void mainImage( out vec4 fragColor, in vec2 fragCoord )
```
Replace this line with:
Sélectionnez
```
@main
```
You can't have @main and the following { on the same line.
Optional. If the effect depends on the coordinate system, it appears flipped upside down. To solve this, you need to flip the y-coordinate:
1. Go to the Vert tab.
2. In the drop-down menu, select Main.
3. Find the fragCoord line, it should look something like:
  Sélectionnez
```
fragCoord = qt_Vertex.xy;
```
4. Replace this line with:
  Sélectionnez
```
fragCoord = vec2(qt_Vertex.x, iResolution.y - qt_Vertex.y);
```
5. Similarly, you might need to adjust texCoord and iMouse.

Now, the effect runs and looks the same as the Shadertoy effect.

Wiggly >

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :