Scaling a UI tree from center of the screen

Question

I am trying to make a transition shader for UI interfaces. All the control nodes in the tree share the same shader material. The goal would be to have a shader that is capabe of scaling the whole tree from the center of the screen by a factor. Of course, just muplitplying the vertex coordinates by the factor doesn't work, because the 0,0 coordinates are actually on the top left of the screen, not the center. The latest attempt at it was this:

uniform vec2 screen_center;   //in pixels
uniform float factor;

vec2 scaled_around_center(vec2 vec, float amount) {
	return (vec - screen_center) * amount + screen_center;
}

void vertex() {
	VERTEX = scaled_around_center(VERTEX, factor);
}

This works for control nodes that take all of the viewport space, but fails when they are smaller. I guess the reason why is that I am working with local vertex coordinates instead of global. How would you do it?

(also, if you know of any kind of webside where you can get these kind of shaders please let me know ;)

Pennant

Answer 1

Transform the vertex to the world space, scale it there and then transform it back to local space

VERTEX = (WORLD_MATRIX * vec4(VERTEX, 0.0, 1.0)).xy;
VERTEX = scaled_around_center(VERTEX, factor);
VERTEX = (inverse(WORLD_MATRIX) * vec4(VERTEX, 0.0, 1.0)).xy;

Dower

Answer 2

@xyz said: Transform the vertex to the world space, scale it there and then transform it back to local space

VERTEX = (WORLD_MATRIX * vec4(VERTEX, 0.0, 1.0)).xy;
VERTEX = scaled_around_center(VERTEX, factor);
VERTEX = (inverse(WORLD_MATRIX) * vec4(VERTEX, 0.0, 1.0)).xy;

I don't quite understand what's going on. The vertices coordinates seem to change depending on how I pan the view. It's like there is some kind of parallax effect in the actual viewport: when the factor is small, the UI appears "sunken" into the background

Pennant

Answer 3

Of course, because you're scaling around a fixed screen space point. If an ui element's translation changes (relative to screen), it will appear as sort of parallax effect because it's always scaled around the same point. So if it's on the left of screen it'll scale to the right and vice versa.

Dower