Matrix3: Added 2D transform methods (#24985)

* Added 2D transform methods

* Clean up

docs/api/en/math/Matrix3.html

@@ -129,7 +129,45 @@ zAxis = (c, f, i)
 0, 1, 0
 0, 0, 1
 		</code>
+		</p>
+
+		<h3>[method:this makeRotation]( [param:Float theta] )</h3>
+		<p>
+		[page:Float theta] — Rotation angle in radians. Positive values rotate counterclockwise.<br /><br />
+
+		Sets this matrix as a 2D rotational transformation by [page:Float theta] radians.
+		The resulting matrix will be:
+		<code>
+cos(&theta;) -sin(&theta;) 0
+sin(&theta;) cos(&theta;)  0
+0      0       1
+		</code>
+		</p>
 
+		<h3>[method:this makeScale]( [param:Float x], [param:Float y] )</h3>
+		<p>
+		[page:Float x] - the amount to scale in the X axis.<br />
+		[page:Float y] - the amount to scale in the Y axis.<br />
+
+		Sets this matrix as a 2D scale transform:
+		<code>
+x, 0, 0,
+0, y, 0,
+0, 0, 1
+		</code>
+		</p>
+
+		<h3>[method:this makeTranslation]( [param:Float x], [param:Float y] )</h3>
+		<p>
+		[page:Float x] - the amount to translate in the X axis.<br />
+		[page:Float y] - the amount to translate in the Y axis.<br />
+
+		Sets this matrix as a 2D translation transform:
+		<code>
+1, 0, x,
+0, 1, y,
+0, 0, 1
+		</code>
 		</p>
 
 		<h3>[method:this multiply]( [param:Matrix3 m] )</h3>
@@ -173,7 +211,7 @@ zAxis = (c, f, i)
 		[page:Float ty] - offset y<br />
 		[page:Float sx] - repeat x<br />
 		[page:Float sy] - repeat y<br />
-		[page:Float rotation] - rotation (in radians)<br />
+		[page:Float rotation] - rotation, in radians. Positive values rotate counterclockwise<br />
 		[page:Float cx] - center x of rotation<br />
 		[page:Float cy] - center y of rotation<br /><br />
 

src/math/Matrix3.js

@@ -231,12 +231,11 @@ class Matrix3 {
 
 	}
 
-	scale( sx, sy ) {
+	//
 
-		const te = this.elements;
+	scale( sx, sy ) {
 
-		te[ 0 ] *= sx; te[ 3 ] *= sx; te[ 6 ] *= sx;
-		te[ 1 ] *= sy; te[ 4 ] *= sy; te[ 7 ] *= sy;
+		this.premultiply( _m3.makeScale( sx, sy ) );
 
 		return this;
 
@@ -244,37 +243,71 @@ class Matrix3 {
 
 	rotate( theta ) {
 
+		this.premultiply( _m3.makeRotation( - theta ) );
+
+		return this;
+
+	}
+
+	translate( tx, ty ) {
+
+		this.premultiply( _m3.makeTranslation( tx, ty ) );
+
+		return this;
+
+	}
+
+	// for 2D Transforms
+
+	makeTranslation( x, y ) {
+
+		this.set(
+
+			1, 0, x,
+			0, 1, y,
+			0, 0, 1
+
+		);
+
+		return this;
+
+	}
+
+	makeRotation( theta ) {
+
+		// counterclockwise
+
 		const c = Math.cos( theta );
 		const s = Math.sin( theta );
 
-		const te = this.elements;
-
-		const a11 = te[ 0 ], a12 = te[ 3 ], a13 = te[ 6 ];
-		const a21 = te[ 1 ], a22 = te[ 4 ], a23 = te[ 7 ];
+		this.set(
 
-		te[ 0 ] = c * a11 + s * a21;
-		te[ 3 ] = c * a12 + s * a22;
-		te[ 6 ] = c * a13 + s * a23;
+			c, - s, 0,
+			s, c, 0,
+			0, 0, 1
 
-		te[ 1 ] = - s * a11 + c * a21;
-		te[ 4 ] = - s * a12 + c * a22;
-		te[ 7 ] = - s * a13 + c * a23;
+		);
 
 		return this;
 
 	}
 
-	translate( tx, ty ) {
+	makeScale( x, y ) {
 
-		const te = this.elements;
+		this.set(
 
-		te[ 0 ] += tx * te[ 2 ]; te[ 3 ] += tx * te[ 5 ]; te[ 6 ] += tx * te[ 8 ];
-		te[ 1 ] += ty * te[ 2 ]; te[ 4 ] += ty * te[ 5 ]; te[ 7 ] += ty * te[ 8 ];
+			x, 0, 0,
+			0, y, 0,
+			0, 0, 1
+
+		);
 
 		return this;
 
 	}
 
+	//
+
 	equals( matrix ) {
 
 		const te = this.elements;
@@ -330,4 +363,6 @@ class Matrix3 {
 
 }
 
+const _m3 = /*@__PURE__*/ new Matrix3();
+
 export { Matrix3 };