fix gradient

src/Main.ts

@@ -456,6 +456,18 @@ export class Main {
 		console.log(curve.evaluate(0.4));
 		console.log(curve.evaluate(0.5));
 
+		var g = new Tea.Gradient();
+		g.mode = Tea.GradientMode.Blend;
+		g.setKeys([
+			new Tea.GradientColorKey(Tea.Color.black, 0),
+			new Tea.GradientColorKey(Tea.Color.white, 1)
+		], [
+			new Tea.GradientAlphaKey(0, 0),
+			new Tea.GradientAlphaKey(1, 1)
+		]);
+		console.log("Gradient", g.evaluate(2));
+		console.log("Gradient", g.evaluate(0.1));
+
 
 		var textmesh = this.app.createTextMesh();
 		//var r = textmesh.getComponent(Tea.MeshRenderer);

src/tea/utils/Color.ts

@@ -168,14 +168,44 @@ export class Color extends Array<number> {
 		);
 	}
 
-	mul(value: number): Tea.Color {
+	add(value: Color): Color {
+		var color = this.clone();
+		color[0] += value[0];
+		color[1] += value[1];
+		color[2] += value[2];
+		color[3] += value[3];
+		return color;
+	}
+
+	add$(value: Color): Color {
+		this[0] += value[0];
+		this[1] += value[1];
+		this[2] += value[2];
+		this[3] += value[3];
+		return this;
+	}
+
+	mul(value: number, alpha?: boolean): Color {
 		var color = this.clone();
 		color[0] *= value;
 		color[1] *= value;
 		color[2] *= value;
+		if (alpha === true) {
+			color[3] *= value;
+		}
 		return color;
 	}
 
+	mul$(value: number, alpha?: boolean): Color {
+		this[0] *= value;
+		this[1] *= value;
+		this[2] *= value;
+		if (alpha === true) {
+			this[3] *= value;
+		}
+		return this;
+	}
+
 	toCssColor(): string {
 		if (this.a == 1) {
 			var r = Math.floor(this.r * 255).toString(16);

src/tea/utils/Gradient.ts

@@ -4,15 +4,28 @@ export class Gradient {
 	alphaKeys: Array<Tea.GradientAlphaKey>;
 	colorKeys: Array<Tea.GradientColorKey>;
 	mode: Tea.GradientMode;
+	protected _tmpColor: Tea.Color;
 
 	constructor() {
 		this.alphaKeys = this.createDefaultAlphaKeys();
 		this.colorKeys = this.createDefaultColorKeys();
 		this.mode = Tea.GradientMode.Blend;
+		this._tmpColor = new Tea.Color();
 	}
 
 	evaluate(time: number): Tea.Color {
-		return Tea.Color.white;
+		time = Tea.Mathf.clamp01(time);
+		var alphaKeys = this.findAlphaKeys(time);
+		var colorKeys = this.findColorKeys(time);
+		if (this.mode === Tea.GradientMode.Fixed) {
+			var color = colorKeys[1].color.clone();
+			color[3] = alphaKeys[1].alpha;
+			return color;
+		}
+		var alpha = this.evaluateAlphaKeys(time, alphaKeys);
+		var color = this.evaluateColorKeys(time, colorKeys);
+		color[3] = alpha;
+		return color;
 	}
 
 	setKeys(colorKeys: Array<Tea.GradientColorKey>, alphaKeys: Array<Tea.GradientAlphaKey>): void {
@@ -24,6 +37,10 @@ export class Gradient {
 		}
 		this.colorKeys = colorKeys;
 		this.alphaKeys = alphaKeys;
+		this.fillAlphaKeys();
+		this.fillColorKeys();
+		this.sortAlphaKeys();
+		this.sortColorKeys();
 	}
 
 	protected createDefaultAlphaKeys(): Array<Tea.GradientAlphaKey> {
@@ -41,6 +58,24 @@ export class Gradient {
 		return keys;
 	}
 
+	protected fillAlphaKeys(): void {
+		var count = 2 - this.alphaKeys.length;
+		for (var i = 0; i < count; i++) {
+			var key = new Tea.GradientAlphaKey(1.0, 1.0);
+			this.alphaKeys.push(key);
+		}
+	}
+
+	protected fillColorKeys(): void {
+		var count = 2 - this.colorKeys.length;
+		for (var i = 0; i < count; i++) {
+			var key = new Tea.GradientColorKey(
+				Tea.Color.white.clone(), 1.0
+			);
+			this.colorKeys.push(key);
+		}
+	}
+
 	protected sortAlphaKeys(): void {
 		this.alphaKeys.sort((a, b) => {
 			return a.time - b.time;
@@ -52,4 +87,64 @@ export class Gradient {
 			return a.time - b.time;
 		});
 	}
+
+	protected findAlphaKeys(time: number): Array<Tea.GradientAlphaKey> {
+		var key0: Tea.GradientAlphaKey;
+		var key1: Tea.GradientAlphaKey;
+		var length = this.alphaKeys.length;
+		for (var i = 0; i < length; i++) {
+			var key = this.alphaKeys[i];
+			if (time <= key.time) {
+				key0 = this.alphaKeys[i - 1];
+				key1 = this.alphaKeys[i];
+				break;
+			}
+		}
+		return [key0, key1];
+	}
+
+	protected findColorKeys(time: number): Array<Tea.GradientColorKey> {
+		var key0: Tea.GradientColorKey;
+		var key1: Tea.GradientColorKey;
+		var length = this.colorKeys.length;
+		for (var i = 0; i < length; i++) {
+			var key = this.colorKeys[i];
+			if (time <= key.time) {
+				key0 = this.colorKeys[i - 1];
+				key1 = this.colorKeys[i];
+				break;
+			}
+		}
+		return [key0, key1];
+	}
+
+	protected evaluateAlphaKeys(time: number, keys: Array<Tea.GradientAlphaKey>): number {
+		if (keys == null || keys.length < 2) {
+			return 0;
+		}
+		if (keys[0] == null) {
+			return keys[1].alpha;
+		}
+		var k0 = keys[0], k1 = keys[1];
+		var td = k1.time - k0.time;
+		var t = (time - k0.time) / td;
+		return k0.alpha * (1.0 - t) + k1.alpha * t;
+	}
+
+	protected evaluateColorKeys(time: number, keys: Array<Tea.GradientColorKey>): Tea.Color {
+		if (keys == null || keys.length < 2) {
+			return Tea.Color.black.clone();
+		}
+		if (keys[0] == null) {
+			return keys[1].color.clone();
+		}
+		var k0 = keys[0], k1 = keys[1];
+		var td = k1.time - k0.time;
+		var t = (time - k0.time) / td;
+		var c0 = k0.color.mul(1.0 - t);
+		var c1 = this._tmpColor;
+		c1.copy(k1.color);
+		c1.mul$(t);
+		return c0.add$(c1);
+	}
 }