[Solved]2D pseudo perspective sprite.

Question

I want to build a perspective effect by simple set the fov, rotation degree and offset. Just like this shader:
I want to add xy plane offset for perspective effect, but I'm not very understand how the shader works. I know the perspective divide and homogenous matrix, but it only works for vertex transformation, when I use it for uv , it just looks like this:
Because everything is inverted. Seems we need a inverse compute for that.
And seems centroid coordinates cannot get from godot shader, so I dont know how to use the perspective texture mapping correct.
Very appreciate for any advice!

Here is the code:

shader_type canvas_item;
uniform float x_rot : hint_range(-180, 180) = 0.0;
uniform vec2 offset = vec2(0.0);
uniform float n = 1.0;
const float PI = 3.14159;
varying vec3 p;
void vertex()
{
	float cosx = cos(x_rot/180.0 * PI);
	float sinx = sin(x_rot/180.0 * PI);
	mat3 mat_rot = mat3(
		vec3(1, 0, 0),
		vec3(0, cosx, -sinx),
		vec3(0, sinx, cosx)
		);
	p = mat_rot * vec3((UV - 0.5 + offset), 0);
	p.z -= n;
}
void fragment(){
	vec2 uv;
	uv = p.xy / p.z;
        COLOR = texture(TEXTURE, uv + 0.5 + offset);
        COLOR.a *= step(max(abs(uv.x), abs(uv.y)), 1.0);
}

Allwein

Answer 1

Seems like you are pretty close. Can you post your shader code? Make sure to post text code and not an image. You can type 3 tildes ~~~ on a line by themselves, directly above and directly below the code so it is formatted correctly.

Vaporimeter

Answer 2

I post the code in the answer

Allwein

Answer 3

It might be better if you used the full code from the example and just set y_rot to 0.0 if you don't need it.

Vaporimeter

Answer 4

I need a xy offset like this, so I must change the code to achieve that.

Allwein