use a geometry shader to render rectangles

res/sh.geom.glsl

@@ -0,0 +1,25 @@
+#version 330 core
+layout(points) in;
+layout(triangle_strip, max_vertices = 4) out; // output the vertices of this rectangle
+
+void push_vert(float x, float y) {
+	gl_Position = vec4(x, y, 0.0F, 1.0F);
+	EmitVertex();
+}
+
+void main() {
+	// position data is stored as (x,y,w,h)
+	vec4 rect_a = gl_in[0].gl_Position; // get the rectangle data which will be our first point of the rectangle
+	vec2 rect_d = vec2(                 // compute point D
+		rect_a.x + rect_a.z,
+		rect_a.y - rect_a.w);
+
+	// A---B
+	// C---D
+	// triangle_strip will use the last two vertices to create a triangle
+	push_vert(rect_a.x, rect_a.y); // A
+	push_vert(rect_d.x, rect_a.y); // B
+	push_vert(rect_a.x, rect_d.y); // C
+	push_vert(rect_d.x, rect_d.y); // D
+	EndPrimitive();
+}

res/sh.vert.glsl

@@ -1,7 +1,22 @@
 #version 330 core
+layout(location = 0) in ivec4 rect; // rectangle data
+uniform ivec2 screen;               // current screen dimensions
 
-layout(location = 0) in vec4 pos;
-
+/* this vertex shader takes in unsigned integers formatted as (x,y,w,h), which denote rectangles
+ * the shader is responsible to output the data for this rectangle in the same format,
+ * but transformed to match the OpenGL coördinate space.
+ * I found the formula `(x-0.5*l)/0.5*l` to work well for scaling an axis to fit within the -1—1 coördinate space.
+ * And for transforming width/height, you just divide by the length of the corresponding axis.
+ * I demonstrate this here: https://www.desmos.com/calculator/ptwuyiv6bh */
 void main() {
-	gl_Position = vec4(pos.x, pos.y, 0.0F, 1.0F);
+	// divide the screen x and y coördinates by 2
+	// using bit shift because I don't trust the compiler optimiser since I've got less control.
+	int w_2 = screen.x >> 1;
+	int h_2 = screen.y >> 1;
+
+	gl_Position = vec4(
+		(rect.x - w_2) / float(w_2),            // scale the rect X point
+		(screen.y - rect.y - h_2) / float(h_2), // scale the rect Y point and invert the axis for top left alignment
+		rect.z / float(w_2),                    // scale the rect width
+		rect.w / float(h_2));                   // scale the rect height
 }