enhance(frontend/image-effector): tweak colorAdjust fx

2 files changed, 29 insertions, 22 deletions

diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts
index 85dc5d5266..1028c57f35 100644
--- a/packages/frontend/src/utility/image-effector/ImageEffector.ts
+++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts
@@ -19,6 +19,8 @@ type ParamTypeToPrimitive = {
 type ImageEffectorFxParamDefs = Record<string, {
 	type: keyof ParamTypeToPrimitive;
 	default: any;
+	label?: string;
+	toViewValue?: (v: any) => string;
 }>;
 
 export function defineImageEffectorFx<ID extends string, PS extends ImageEffectorFxParamDefs, US extends string[]>(fx: ImageEffectorFx<ID, PS, US>) {
diff --git a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts b/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts
index cbb874852d..c38490e198 100644
--- a/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts
+++ b/packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts
@@ -72,7 +72,7 @@ void main() {
 	vec3 color = in_color.rgb;
 
 	color = color * u_brightness;
-	color += vec3(clamp(u_lightness, 0.0, 2.0) - 1.0);
+	color += vec3(u_lightness);
 	color = (color - 0.5) * u_contrast + 0.5;
 
 	vec3 hsl = rgb2hsl(color);
@@ -92,45 +92,50 @@ export const FX_colorAdjust = defineImageEffectorFx({
 	params: {
 		lightness: {
 			type: 'number' as const,
-			default: 100,
-			min: 0,
-			max: 200,
-			step: 1,
+			default: 0,
+			min: -1,
+			max: 1,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		contrast: {
 			type: 'number' as const,
-			default: 100,
+			default: 1,
 			min: 0,
-			max: 200,
-			step: 1,
+			max: 4,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		hue: {
 			type: 'number' as const,
 			default: 0,
-			min: -360,
-			max: 360,
-			step: 1,
+			min: -1,
+			max: 1,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 180) + '°',
 		},
 		brightness: {
 			type: 'number' as const,
-			default: 100,
+			default: 1,
 			min: 0,
-			max: 200,
-			step: 1,
+			max: 4,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 		saturation: {
 			type: 'number' as const,
-			default: 100,
+			default: 1,
 			min: 0,
-			max: 200,
-			step: 1,
+			max: 4,
+			step: 0.01,
+			toViewValue: v => Math.round(v * 100) + '%',
 		},
 	},
 	main: ({ gl, u, params }) => {
-		gl.uniform1f(u.brightness, params.brightness / 100);
-		gl.uniform1f(u.contrast, params.contrast / 100);
-		gl.uniform1f(u.hue, params.hue / 360);
-		gl.uniform1f(u.lightness, params.lightness / 100);
-		gl.uniform1f(u.saturation, params.saturation / 100);
+		gl.uniform1f(u.brightness, params.brightness);
+		gl.uniform1f(u.contrast, params.contrast);
+		gl.uniform1f(u.hue, params.hue / 2);
+		gl.uniform1f(u.lightness, params.lightness);
+		gl.uniform1f(u.saturation, params.saturation);
 	},
 });