Need Help Converting A UV Texture Into UV Coordinates

Help Shaders
,
1

Godot Version

4.4.1

Question

` Hello, I’m currently trying to incorporate UV textures (I’m unsure the technical term) into some mini-projects for learning. I’m going for an effect that looks similar to this:
uv-deform-example

Currently this is the UV texture I’m working with:

bubbles
bubbles1024×1024 56.2 KB

Right now I’m trying to convert them into UV coordinates so that the canvas item texture will distort the texture according to that UV texture above.

Currently this is what my shader looks like:

shader_type canvas_item;

uniform sampler2D uv_source;

void fragment()
{
	
	vec4 input_texture = texture(uv_source, UV);
	
	float u = input_texture.r / 255.0;
	float v = input_texture.g / 255.0;
	
	COLOR = texture(TEXTURE, vec2(u,v));
}

I tried converting the red and green values into the values for UV but it seems to be performing very erratically. Sometimes it’ll just be a single color and other times it’ll be incredibly dark with dark red and green highlights. I feel like I’m misunderstanding something about how it works but I’m not sure what it is or where to start.

Any help would be highly appreciated!

`

2

I think it’s that in your displacement map the values of 0..255 correspond to -1..+1 range, and the value of 127 should be mapped to no displacement, not 0.
Honestly, in our blessed times of AI doing everything for you, you can just type “godot how to distortion shader using 2d displacement map” into google and it will generate a shader with explanations.