Use a matrix for !transform window nodes

Author: jonathanhogg

docs/shaders.md

@@ -155,8 +155,8 @@ if not specified.
 `downsample_passes=` *PASS_NUMBERS*
 : This specifies which (if any) passes to render with a smaller frame-buffer.
 It is specified as a vector of pass numbers, with the first pass being `0`.
-For example `1;2` would specify that the second and third pass. Default is
-`null`, i.e., all passes will be rendered with a `size` frame-buffer.
+For example `1;2` would specify the second and third pass. Default is `null`,
+i.e., all passes will be rendered with a `size` frame-buffer.
 
 `downsample=` *DIVISOR*
 : This specifies how much to reduce the size of the output frame-buffer for
@@ -254,13 +254,12 @@ which is implemented as a shader program. Each of these nodes, in common
 with the default [`!shader` program](#shader), accepts one or more child nodes
 which will be composited together with the blend function controlled with
 the `composite` attribute (default `:over`). All of the filters also support
-the standard shader `gamma` and `alpha` attributes.
+the standard shader `alpha` attribute.
 
 ### `!transform`
 
 Composites its input nodes and then scales, rotates and translates its output.
-This is similar to the `!translate` node in `!canvas` and `!canvas3d` with the
-exception that the order of operations is fixed: scale, rotate, translate. The
+This is similar to the `!translate` node in `!canvas` and `!canvas3d`. The
 origin for all of these operations is the *centre* of the image.
 
 `scale=` *SX*`;`*SY*
@@ -278,6 +277,9 @@ Areas "outside" the transformed image will be transparent by default. This can
 be controlled with the `border` and `repeat` attributes described above for
 [`!shader`](#shader).
 
+The order that the attributes are specified is important. Transforms are
+applied from the rightmost attribute (last) to the leftmost (first).
+
 ### `!vignette`
 
 A *very* simple vignette filter that (alpha-) fades out the edges of its output.

src/flitter/render/window/glsl/transform.frag

@@ -4,9 +4,7 @@ const float Tau = 6.283185307179586231995926937088370323181152343750;
 
 in vec2 coord;
 out vec4 color;
-uniform vec2 scale;
-uniform vec2 translate;
-uniform float rotate;
+uniform mat3 transform_matrix;
 uniform vec2 size;
 uniform float alpha;
 uniform bool flip_x;
@@ -19,10 +17,7 @@ uniform sampler2D ${name};
 
 void main() {
 % if child_textures:
-    float th = -rotate * Tau;
-    float cth = cos(th);
-    float sth = sin(th);
-    vec2 point = ((coord - 0.5) * size - translate) * mat2(cth, sth, -sth, cth) / scale / size + 0.5;
+    vec2 point = (transform_matrix * vec3((coord - 0.5) * size, 1.0)).xy / size + 0.5;
 %     for name in child_textures:
 %         if loop.index == 0:
     vec4 merged = texture(${name}, point);

src/flitter/render/window/shaders.py

@@ -4,14 +4,22 @@
 
 from . import ProgramNode
 from .glsl import TemplateLoader
-from ...model import null
+from ...model import null, Matrix33
 
 
 class Transform(ProgramNode):
     DEFAULT_FRAGMENT_SOURCE = TemplateLoader.get_template('transform.frag')
 
     def render(self, node, references, **kwargs):
-        super().render(node, references, scale=1, translate=0, rotate=0, **kwargs)
+        transform_matrix = Matrix33.identity()
+        for name, value in node.items():
+            if name == 'scale' and (matrix := Matrix33.scale(value)) is not None:
+                transform_matrix @= matrix
+            elif name == 'translate' and (matrix := Matrix33.translate(value)) is not None:
+                transform_matrix @= matrix
+            elif name == 'rotate' and (matrix := Matrix33.rotate(value)) is not None:
+                transform_matrix @= matrix
+        super().render(node, references, transform_matrix=transform_matrix.inverse(), **kwargs)
 
 
 class Vignette(ProgramNode):