I've been messing around with OpenGL/ModernGL in Python/Pygame, and after getting my images rendered to the screen, I have been having issues rotating them.

I'm aware of the order that I need to translate, rotate and then scale, which works fine, however my problem stems from the scaling of images being a percentage of the screen resolution. My approach has been to create a shader that spans the screen and then when I need my image to fit, I scale it down to lets say 0.2 (aspect ratio) on the X and 0.1 on the Y.

When the image is rotated by 0 degrees (i.e. horizontal) that 0.1 on the y-axis makes the image 0.1 of the height of the screen, however when it is rotated by 90 degrees (vertical) the same value of 0.1 now scales the image by 0.1 of the width of the screen instead. Due to this, when I rotate a square by 90 degrees it becomes stretched horizontally.

Some attached images showing the problems below. The image used is just a start button from another old project of mine. The button is scaled to (0.5, 0.5) and initially rotated 0, then 90 degrees.

rotated 0 degrees	rotated 90 degrees

I'm not quite sure if there is a common way to fix this or if my approach to rendering images is wrong.

Below is the relevant code:

Inside of vbo.py:

class SurfaceVBO(BaseVBO):
    def __init__(self, app, context):
        super().__init__(app, context)
        self.format = '2f 2f'
        self.attribs = ['in_uv', 'in_position']

    def getVertexData(self):
        #aspect_ratio = self.app.height / self.app.width
        aspect_ratio = 1

        vertices = [((-1 * aspect_ratio),-1),((1 * aspect_ratio),-1),((1 * aspect_ratio),1),((-1 * aspect_ratio),1)]
        indices = [(0,2,3),(0,1,2)]
        
        tex_coord = [(0,0), (1,0), (1,1), (0,1)]
        tex_coord_indices = [(0,2,3),(0,1,2)]

        vertex_data = self.getData(vertices, indices)
        tex_coord_data = self.getData(tex_coord, tex_coord_indices)
        vertex_data = np.hstack([tex_coord_data, vertex_data])

        return vertex_data

Inside of surface.vert:

#version 330 core

in vec2 in_uv;
in vec2 in_position;

out vec2 uv;

// m_ortho is just a orthographic projection matrix spanning (-1, -1), (1, 1) with near 0, and far 10,000

uniform mat4 m_model;
uniform mat4 m_ortho;

void main()
{
    uv = in_uv;
    gl_Position = m_ortho * m_model * vec4(in_position.xy, 0, 1.0);
}

Inside of button.py:

import pygame
import math as m
import glm

class BaseButton:
    def __init__(self, game, vao_name='surface', tex_id='game_menu', pos=(0,0), rot=0, scale=(1,1)):
        self.game = game
        self.pos = pos
        self.rot = glm.radians(rot)
        self.aspect_ratio = self.game.height / self.game.width
        #self.aspect_ratio = 1
        self.original_scale = (scale[0], scale[1])
        self.scale = (self.aspect_ratio * (self.original_scale[0]), (self.original_scale[1]))
        self.m_model = self.getModelMatrix()
        self.vao_name = vao_name
        self.tex_id = tex_id
        self.vao = game.mesh.vao.vaos[vao_name]
        self.program = self.vao.program
        self.image = self.getPygameImage(path=f'images/{tex_id}.png')
        self.rect = self.image.get_rect(center = (((self.pos[0] + 1) / 2) * self.game.width, ((-self.pos[1] + 1) / 2) * self.game.height))
        self.texture = self.get2DTexture(image=self.image)
        self.tint = 1
        self.rend = False

    def update(self): ...

    def getModelMatrix(self):
        # identity matrix
        m_model = glm.mat4()
        # position
        m_model = glm.translate(m_model, (*self.pos, 0))
        #print(1, "\n", m_model)
        # rotation
        m_model = glm.rotate(m_model, self.rot, glm.vec3(0,0,1))
        #print(2, "\n", m_model)
        # scaling
        m_model = glm.scale(m_model, (*self.scale, 1))
        #print(3, "\n", m_model)
        return m_model
    
    def getPygameImage(self, path):
        image = pygame.image.load(path).convert_alpha()
        image = pygame.transform.flip(image, flip_x=False, flip_y=True)
        image = pygame.transform.scale(image, (self.scale[0] * self.game.width, self.scale[1] * self.game.height))
        return image

    def get2DTexture(self, image):
        texture = self.game.context.texture(size=image.get_size(), components=4,data=pygame.image.tostring(image, 'RGBA'))
        return texture
    
    def render(self):
        self.update()
        if self.rend:
            self.vao.render()
            # print(f'DEBUG - rendering {self}')

The code runs at 60 fps, and for every frame it updates each image, and renders each image to the screen.