GLSL : Rotating non square textures with out distortion?

Hey everyone!

I’ve pieced together some stuff off of shadertoy and managed to get a working example of a texture being rotated using glsl.

Problem for me is that the texture will not always be square, and I need to figure out the maths to calculate, and where to insert it to maintain the textures aspect/distortion at it’s default. (at 0 degrees)

I’ve included a working file that shows my predicament.

  • Red square is the texture as is, at 0 degrees.
  • Green square is that same texture, being rotated, albeit with distortion.

Any ideas? any help would be much appreciated!

uniform float iGlobalTime; 
uniform vec2 iResolution;
vec4 color;
vec4 colorA;
vec4 colorB;
float rot;
vec2 uv;
float mixer;

out vec4 fragColor;
void main()
{	
	// RED SQUARE 
	
	rot = radians(0.); // set to static rotation of 0 degrees
	uv = vUV.st; // get copy of uvs
	uv-=.5; // offset uvs by half for rotation around center.
	uv *= mat2(cos(rot),-sin(rot),sin(rot),cos(rot)); // rotate uvs with matrix.
	uv+=.5; // offset uvs back by half.
	colorA = texture(sTD2DInputs[0], uv.st); // map the texture using the modified uvs.
	
	// GREEN SQUARE
	
	rot = radians(iGlobalTime * 45.0); // animate rotation in degrees.
	uv = vUV.st; // get copy of uvs
	uv-=.5; // offset uvs by half for rotation around center.
	uv *= mat2(cos(rot),-sin(rot),sin(rot),cos(rot)); // rotate uvs with matrix.
	uv+=.5; // offset uvs back by half.
	colorB = texture(sTD2DInputs[1], uv.st); // map the texture using the modified uvs.

	// BLEND RED/GREEN TOGETHER  
	
	mixer = .5; // 50% blend.
	color = mix(colorA, colorB, mixer); // blend it.
	fragColor = color; // output color to TOP.
}

also forgot to include the file - here it is!
GLSL_rotatingNonSquareTextures.2.toe (4.35 KB)

Been troubleshooting and trying new things via the facebook group, newest file with some permutations attached below.

Basically, I think I’m close, I realize that I need to pre distort the image coming in somehow, Or do a texture lookup, then another lookup on that lookup?

Is this possible? Or the right way to go about it?
GLSL_rotatingNonSquareTextures.7.toe (4.82 KB)

Ahhh so big thanks to Matthew Ragan and Mike Walczyk on helping to get this solved!

For those of you interested, solution is live here:
[url]https://github.com/raganmd/learningGLSL/blob/master/toxFiles/glslTOPs/base_rotation_of_non_square_aspect_glsl_099.tox[/url]

1 Like

@lucasm Thanks for posting your solution! I just went through the same struggle you did.

Still curious why this works on Shadertoy but not in Touch (after porting properly of course).