rotating and changing size of albedo texture in 2d

nodeg

Hello, I'm trying to dive into learning shaders and am trying to create a shader on a colorRect that masks out a texture(sampler2d) (which I managed). Now I want to be able to resize the texture so that it can shrink down to nothing or expand so that the entire colorRect is transparent. The second thing I want to do is have the mask rotate. Can anyone point me in the right direction?

shader_type canvas_item;
render_mode unshaded;

uniform float cutoff : hint_range(0.0, 1.0) = 0.5;
uniform sampler2D mask : hint_albedo;


void fragment()
{
	float value = texture(mask, UV).r;

	if (value < cutoff) {
		COLOR = vec4(COLOR.rgb, 0.0);
	}
	else {
		COLOR = vec4(COLOR.rgb, 1.0);
	}

}

I'm trying to achieve a transition similar to this video at 16:08:

Basically a transition between scenes but with a rotating logo instead of a circle.

TwistedTwigleg

I think, and I could be completely wrong about this, but you can manipulate the UV coordinates to scale and rotate the final result. I think it's probably best to do it in the vertex function, since then you can manipulate it per-vertex rather than per-pixel in the fragment function.

To scale the UV, I think something like this would work:

uniform vec2 scale_uniform;
void vertex() {
	UV = UV * scale_uniform;
}

Then to rotate the UV, it looks like this QA post has several snippets of example code: simple texture rotation shader

nodeg

I actually saw the link you posted before, but when I try implementing it the best I can get is the entire colorRect spinning with a pivot in the top-left corner instead of the centre. The code snippit you put down is neat, but it basically increases the amount of the sampled image. For example a scale_uniform of 2,2 will show two rows and two columns of the image.

cybereality

You have to adjust the texture repeat, in your case probably setting it to clamp would work (that way it is black on the sides and doesn't repeat the texture).

TwistedTwigleg

@nodeg said: I actually saw the link you posted before, but when I try implementing it the best I can get is the entire colorRect spinning with a pivot in the top-left corner instead of the centre. The code snippit you put down is neat, but it basically increases the amount of the sampled image. For example a scale_uniform of 2,2 will show two rows and two columns of the image.

Ah, not sure on the rotating then. For the scaling, setting the texture not to repeat would be needed, I forgot that UV maps repeat by default :lol:

If you only need to zoom the texture in, rather than zoom it out, you could try multiplying by a smaller number, like 0.5 for example.

cybereality

In order to have it scale from the middle, I think you would have to minus half the UV, scale, and than add the half back. Otherwise it will just scale from the corner.

    uniform vec2 scale_uniform;
    vec2 half_uv = vec2(0.5, 0.5)
    void vertex() {
        UV = (UV - half_uv) * scale_uniform + half_uv;
    }

At least I think that should work, the code is untested but maybe will give you an idea.

Megalomaniak

@nodeg said: I actually saw the link you posted before, but when I try implementing it the best I can get is the entire colorRect spinning with a pivot in the top-left corner instead of the centre. The code snippit you put down is neat, but it basically increases the amount of the sampled image. For example a scale_uniform of 2,2 will show two rows and two columns of the image.

2D objects have pivot/origin points, by default often at top left. That might explain it. Try changing the pivot location. With the node selected there should be an option/tool for this in the viewport header.