skew an object (2D)

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Stormbringer

Im triyng skew, like a vanish point, an object

like this

Perspective

I’ll try to do it with GDScript Transform2D and with shaders, but I’m failed both ways (little better result with shaders, but still can’t get it right)

my shader code:


shader_type canvas_item;
uniform float VchangeY = 0.5;

void vertex()
{
	float vertPosY = (-VERTEX.x * VchangeY) + VERTEX.y;
	VERTEX.y = vertPosY;
}

what I expected is the score number on top left(its a bogus image for reference)
what I get from dis shader is the larger one, a little below:

What can I do in my shader to reach the goal I expect? thanks

:bust_in_silhouette: Reply From: larrxi

I never do shaders before but here is my try:

enter image description here

shader_type canvas_item;
uniform float VchangeY = 25;

void vertex() {

	float vertPosX = cos(VERTEX.x) * 8.72f ;
	float vertPosY = sin(1f + VERTEX.y + VERTEX.x) * VchangeY;
    
	VERTEX.x += vertPosX;
	VERTEX.y += vertPosY;
}

I dont think cos and sin should be there.

Thank you…
My object is a label, i think doesn’t work like in a sprite… trying your shader:
without shader:

with your shader:

I’ll probably try another method… Im working now with another custon font and breaking my string into individual characters… and positioning and scale each one individually:

Is not the best way, but will work till I realize how use a shader properly

Stormbringer | 2020-11-07 12:59

Yes I am using label too… RichTextLabel.
I did https://godot-es-docs.readthedocs.io/en/latest/tutorials/viewports/using_viewport_as_texture.html

And instead of colorrect I put label in the viewport.
Apply the viewporttexture to a sprite or something and yayy the shader will work on the sprite.

Your method looks good. I think easiest is to draw the text in a 3d scene and then add a camera and viewport and add as a viewporttexture (like just did above). Then can move and rotate the 3D camera and make this effect.

Hopefully someone know the real way just with the shader :smiley:

larrxi | 2020-11-07 15:37

Added the project to github.
GitHub - Larrxi/godot-shader-skew-text

larrxi | 2020-11-07 15:55

Yes, thank you, your idea of using 3D and viewports is fantastic, problably I’ll use in future :smiley:

Stormbringer | 2020-11-07 20:27