Why does my shader work fine in the Godot editor, but not in runtime?

Question

I wrote a shader on a CanvasItem in Godot:

shader_type canvas_item;

void fragment() {
    vec2 distortedUV = UV;
    distortedUV.x += sin(distortedUV.y * 5.0 * TIME/100.0 + TIME) * 0.1;
    COLOR = texture(TEXTURE, distortedUV);
}

In the editor it looks like this:

However when I run the game, it just slowly moves back and forth with little amplitude and looks like this:

Why is this? Some more information about my settings: This is on a TextureRect that is a child of a Control node. It is a pixel game so setup as such. The window is 360x640 and scaled up to 720x1280 during runtime. Use GPU pixel snap == true. The sprite is a .png imported with the 2D Pixel texture preset.

Answer 1

Likely the engine was running for a while, and so it has values of TIME bigger than those observed in the game when launching it for testing.

So, in the game, you have a small value of TIME, but in the engine you - probably - had a big value of TIME.

Now consider the effect of a small value of TIME in this expression:

distortedUV.y * 5.0 * TIME/100.0 + TIME

The value of TIME/100.0 becomes near zero. So distortedUV.y * 5.0 * TIME/100.0 becomes near zero, and thus the effect of the vertical coordinate of distortedUV becomes negligible.

Answer 2

ok I am answering my own question: this happened because there are two calls to TIME in the shader code. This will render consistently between the editor and game. Not sure why the two TIME calls makes it this way but that's how it is.

shader_type canvas_item;

void fragment() {
    vec2 distortedUV = UV;
    distortedUV.x += sin(distortedUV.y * 5.0 + TIME) * 0.1;
    COLOR = texture(TEXTURE, distortedUV);
}