From cd9322a8243b12632db2dd9a29a702d7531a5aa0 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 3 Jun 2025 19:18:29 +0900
Subject: feat(frontend): 画像編集機能 (#16121)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* wip

* wip

* wip

* Update watermarker.ts

* wip

* wip

* Update watermarker.ts

* Update MkUploaderDialog.vue

* wip

* Update ImageEffector.ts

* Update ImageEffector.ts

* wip

* wip

* wip

* wip

* wip

* wip

* Update MkRange.vue

* Update MkRange.vue

* wip

* wip

* Update MkImageEffectorDialog.vue

* Update MkImageEffectorDialog.Layer.vue

* wip

* Update zoomLines.ts

* Update zoomLines.ts

* wip

* wip

* Update ImageEffector.ts

* wip

* Update ImageEffector.ts

* wip

* Update ImageEffector.ts

* swip

* wip

* Update ImageEffector.ts

* wop

* Update MkUploaderDialog.vue

* Update ImageEffector.ts

* wip

* wip

* wip

* Update def.ts

* Update def.ts

* test

* test

* Update manager.ts

* Update manager.ts

* Update manager.ts

* Update manager.ts

* Update MkImageEffectorDialog.vue

* wip

* use WEBGL_lose_context

* wip

* Update MkUploaderDialog.vue

* Update drive.vue

* wip

* Update MkUploaderDialog.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip
---
 .../src/components/MkImageEffectorDialog.Layer.vue | 78 ++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 packages/frontend/src/components/MkImageEffectorDialog.Layer.vue

(limited to 'packages/frontend/src/components/MkImageEffectorDialog.Layer.vue')

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
new file mode 100644
index 0000000000..0312017d86
--- /dev/null
+++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
@@ -0,0 +1,78 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkFolder :defaultOpen="true" :canPage="false">
+	<template #label>{{ fx.name }}</template>
+	<template #footer>
+		<div class="_buttons">
+			<MkButton iconOnly @click="emit('del')"><i class="ti ti-trash"></i></MkButton>
+			<MkButton iconOnly @click="emit('swapUp')"><i class="ti ti-arrow-up"></i></MkButton>
+			<MkButton iconOnly @click="emit('swapDown')"><i class="ti ti-arrow-down"></i></MkButton>
+		</div>
+	</template>
+
+	<div :class="$style.root" class="_gaps">
+		<div v-for="[k, v] in Object.entries(fx.params)" :key="k">
+			<MkSwitch v-if="v.type === 'boolean'" v-model="layer.params[k]">
+				<template #label>{{ k }}</template>
+			</MkSwitch>
+			<MkRange v-else-if="v.type === 'number'" v-model="layer.params[k]" continuousUpdate :min="v.min" :max="v.max" :step="v.step">
+				<template #label>{{ k }}</template>
+			</MkRange>
+			<MkRadios v-else-if="v.type === 'number:enum'" v-model="layer.params[k]">
+				<template #label>{{ k }}</template>
+				<option v-for="item in v.enum" :value="item.value">{{ item.label }}</option>
+			</MkRadios>
+			<div v-else-if="v.type === 'seed'">
+				<MkRange v-model="layer.params[k]" continuousUpdate type="number" :min="0" :max="10000" :step="1">
+					<template #label>{{ k }}</template>
+				</MkRange>
+			</div>
+			<MkInput v-else-if="v.type === 'color'" :modelValue="`#${(layer.params[k][0] * 255).toString(16).padStart(2, '0')}${(layer.params[k][1] * 255).toString(16).padStart(2, '0')}${(layer.params[k][2] * 255).toString(16).padStart(2, '0')}`" type="color" @update:modelValue="v => { const c = v.slice(1).match(/.{2}/g)?.map(x => parseInt(x, 16) / 255); if (c) layer.params[k] = c; }">
+				<template #label>{{ k }}</template>
+			</MkInput>
+		</div>
+	</div>
+</MkFolder>
+</template>
+
+<script setup lang="ts">
+import { ref, useTemplateRef, watch, onMounted, onUnmounted } from 'vue';
+import type { ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
+import { i18n } from '@/i18n.js';
+import { ImageEffector } from '@/utility/image-effector/ImageEffector.js';
+import MkFolder from '@/components/MkFolder.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
+import MkRadios from '@/components/MkRadios.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkRange from '@/components/MkRange.vue';
+import FormSlot from '@/components/form/slot.vue';
+import MkPositionSelector from '@/components/MkPositionSelector.vue';
+import * as os from '@/os.js';
+import { selectFile } from '@/utility/drive.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { prefer } from '@/preferences.js';
+import { FXS } from '@/utility/image-effector/fxs.js';
+
+const layer = defineModel<ImageEffectorLayer>('layer', { required: true });
+const fx = FXS.find((fx) => fx.id === layer.value.fxId);
+if (fx == null) {
+	throw new Error(`Unrecognized effect: ${layer.value.fxId}`);
+}
+
+const emit = defineEmits<{
+	(e: 'del'): void;
+	(e: 'swapUp'): void;
+	(e: 'swapDown'): void;
+}>();
+</script>
+
+<style module>
+.root {
+
+}
+</style>
-- 
cgit v1.2.3-freya


From 95ea62f2228c69e547848e7e803069275eff0992 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 5 Jun 2025 22:25:49 +0900
Subject: enhance(frontend):
 画像エフェクトの操作でRangeをダブルクリックしたらデフォルトの値に戻るように
 (#16171)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): エフェクトの操作でRangeをダブルクリックしたらデフォルトの値に戻るように

* fix: trackの計算方法を修正

* remove unnecessary async
---
 .../src/components/MkImageEffectorDialog.Layer.vue | 68 +++++++++++++++++-----
 packages/frontend/src/components/MkRange.vue       | 59 ++++++++++++++++---
 2 files changed, 107 insertions(+), 20 deletions(-)

(limited to 'packages/frontend/src/components/MkImageEffectorDialog.Layer.vue')

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
index 0312017d86..ff3b9aff9b 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
@@ -16,22 +16,54 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div :class="$style.root" class="_gaps">
 		<div v-for="[k, v] in Object.entries(fx.params)" :key="k">
-			<MkSwitch v-if="v.type === 'boolean'" v-model="layer.params[k]">
+			<MkSwitch
+				v-if="v.type === 'boolean'"
+				v-model="layer.params[k]"
+			>
 				<template #label>{{ k }}</template>
 			</MkSwitch>
-			<MkRange v-else-if="v.type === 'number'" v-model="layer.params[k]" continuousUpdate :min="v.min" :max="v.max" :step="v.step">
+			<MkRange
+				v-else-if="v.type === 'number'"
+				v-model="layer.params[k]"
+				continuousUpdate
+				:min="v.min"
+				:max="v.max"
+				:step="v.step"
+				@thumbDoubleClicked="() => {
+					if (fx.params[k].default != null) {
+						layer.params[k] = fx.params[k].default;
+					} else {
+						layer.params[k] = v.min;
+					}
+				}"
+			>
 				<template #label>{{ k }}</template>
 			</MkRange>
-			<MkRadios v-else-if="v.type === 'number:enum'" v-model="layer.params[k]">
+			<MkRadios
+				v-else-if="v.type === 'number:enum'"
+				v-model="layer.params[k]"
+			>
 				<template #label>{{ k }}</template>
 				<option v-for="item in v.enum" :value="item.value">{{ item.label }}</option>
 			</MkRadios>
 			<div v-else-if="v.type === 'seed'">
-				<MkRange v-model="layer.params[k]" continuousUpdate type="number" :min="0" :max="10000" :step="1">
+				<MkRange
+					v-model="layer.params[k]"
+					continuousUpdate
+					type="number"
+					:min="0"
+					:max="10000"
+					:step="1"
+				>
 					<template #label>{{ k }}</template>
 				</MkRange>
 			</div>
-			<MkInput v-else-if="v.type === 'color'" :modelValue="`#${(layer.params[k][0] * 255).toString(16).padStart(2, '0')}${(layer.params[k][1] * 255).toString(16).padStart(2, '0')}${(layer.params[k][2] * 255).toString(16).padStart(2, '0')}`" type="color" @update:modelValue="v => { const c = v.slice(1).match(/.{2}/g)?.map(x => parseInt(x, 16) / 255); if (c) layer.params[k] = c; }">
+			<MkInput
+				v-else-if="v.type === 'color'"
+				:modelValue="getHex(layer.params[k])"
+				type="color"
+				@update:modelValue="v => { const c = getRgb(v); if (c != null) layer.params[k] = c; }"
+			>
 				<template #label>{{ k }}</template>
 			</MkInput>
 		</div>
@@ -40,22 +72,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script setup lang="ts">
-import { ref, useTemplateRef, watch, onMounted, onUnmounted } from 'vue';
 import type { ImageEffectorLayer } from '@/utility/image-effector/ImageEffector.js';
 import { i18n } from '@/i18n.js';
-import { ImageEffector } from '@/utility/image-effector/ImageEffector.js';
 import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkRadios from '@/components/MkRadios.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkRange from '@/components/MkRange.vue';
-import FormSlot from '@/components/form/slot.vue';
-import MkPositionSelector from '@/components/MkPositionSelector.vue';
-import * as os from '@/os.js';
-import { selectFile } from '@/utility/drive.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { prefer } from '@/preferences.js';
 import { FXS } from '@/utility/image-effector/fxs.js';
 
 const layer = defineModel<ImageEffectorLayer>('layer', { required: true });
@@ -69,6 +93,24 @@ const emit = defineEmits<{
 	(e: 'swapUp'): void;
 	(e: 'swapDown'): void;
 }>();
+
+function getHex(c: [number, number, number]) {
+	return `#${c.map(x => (x * 255).toString(16).padStart(2, '0')).join('')}`;
+}
+
+function getRgb(hex: string | number): [number, number, number] | null {
+	if (
+		typeof hex === 'number' ||
+		typeof hex !== 'string' ||
+		!/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)
+	) {
+		return null;
+	}
+
+	const m = hex.slice(1).match(/[0-9a-fA-F]{2}/g);
+	if (m == null) return [0, 0, 0];
+	return m.map(x => parseInt(x, 16) / 255) as [number, number, number];
+}
 </script>
 
 <style module>
diff --git a/packages/frontend/src/components/MkRange.vue b/packages/frontend/src/components/MkRange.vue
index 9a6a207c74..7a5848de48 100644
--- a/packages/frontend/src/components/MkRange.vue
+++ b/packages/frontend/src/components/MkRange.vue
@@ -12,10 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<slot name="prefix"></slot>
 		<div ref="containerEl" class="container">
 			<div class="track">
-				<div class="highlight right" :style="{ width: ((steppedRawValue - minRatio) * 100) + '%', left: (Math.abs(Math.min(0, min)) / (max + Math.abs(Math.min(0, min)))) * 100 + '%' }">
+				<div class="highlight right" :style="{ width: rightTrackWidth, left: rightTrackPosition }">
 					<div class="shine right"></div>
 				</div>
-				<div class="highlight left" :style="{ width: ((minRatio - steppedRawValue) * 100) + '%', left: (steppedRawValue) * 100 + '%' }">
+				<div class="highlight left" :style="{ width: leftTrackWidth, left: leftTrackPosition }">
 					<div class="shine left"></div>
 				</div>
 			</div>
@@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, defineAsyncComponent, onMounted, onUnmounted, onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';
 import { isTouchUsing } from '@/utility/touch.js';
 import * as os from '@/os.js';
 
@@ -58,13 +58,14 @@ const props = withDefaults(defineProps<{
 	continuousUpdate?: boolean;
 }>(), {
 	step: 1,
-	textConverter: (v) => v.toString(),
+	textConverter: (v: number) => (Math.round(v * 1000) / 1000).toString(),
 	easing: false,
 });
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: number): void;
 	(ev: 'dragEnded', value: number): void;
+	(ev: 'thumbDoubleClicked'): void;
 }>();
 
 const containerEl = useTemplateRef('containerEl');
@@ -73,7 +74,24 @@ const thumbEl = useTemplateRef('thumbEl');
 const maxRatio = computed(() => Math.abs(props.max) / (props.max + Math.abs(Math.min(0, props.min))));
 const minRatio = computed(() => Math.abs(Math.min(0, props.min)) / (props.max + Math.abs(Math.min(0, props.min))));
 
-const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
+const rightTrackWidth = computed(() => {
+	return Math.max(0, (steppedRawValue.value - minRatio.value) * 100) + '%';
+});
+const leftTrackWidth = computed(() => {
+	return Math.max(0, (minRatio.value - steppedRawValue.value) * 100) + '%';
+});
+const rightTrackPosition = computed(() => {
+	return (Math.abs(Math.min(0, props.min)) / (props.max + Math.abs(Math.min(0, props.min)))) * 100 + '%';
+});
+const leftTrackPosition = computed(() => {
+	return (Math.min(minRatio.value, steppedRawValue.value) * 100) + '%';
+});
+
+const calcRawValue = (value: number) => {
+	return (value - props.min) / (props.max - props.min);
+};
+
+const rawValue = ref(calcRawValue(props.modelValue));
 const steppedRawValue = computed(() => {
 	if (props.step) {
 		const step = props.step / (props.max - props.min);
@@ -103,6 +121,11 @@ const calcThumbPosition = () => {
 	}
 };
 watch([steppedRawValue, containerEl], calcThumbPosition);
+watch(() => props.modelValue, (newVal) => {
+	const newRawValue = calcRawValue(newVal);
+	if (rawValue.value === newRawValue) return;
+	rawValue.value = newRawValue;
+});
 
 let ro: ResizeObserver | undefined;
 
@@ -128,6 +151,12 @@ const steps = computed(() => {
 const tooltipForDragShowing = ref(false);
 const tooltipForHoverShowing = ref(false);
 
+onBeforeUnmount(() => {
+	// 何らかの問題で表示されっぱなしでもコンポーネントを離れたら消えるように
+	tooltipForDragShowing.value = false;
+	tooltipForHoverShowing.value = false;
+});
+
 function onMouseenter() {
 	if (isTouchUsing) return;
 
@@ -138,7 +167,7 @@ function onMouseenter() {
 		text: computed(() => {
 			return props.textConverter(finalValue.value);
 		}),
-		targetElement: thumbEl,
+		targetElement: thumbEl.value ?? undefined,
 	}, {
 		closed: () => dispose(),
 	});
@@ -148,6 +177,8 @@ function onMouseenter() {
 	}, { once: true, passive: true });
 }
 
+let lastClickTime: number | null = null;
+
 function onMousedown(ev: MouseEvent | TouchEvent) {
 	ev.preventDefault();
 
@@ -158,7 +189,7 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 		text: computed(() => {
 			return props.textConverter(finalValue.value);
 		}),
-		targetElement: thumbEl,
+		targetElement: thumbEl.value ?? undefined,
 	}, {
 		closed: () => dispose(),
 	});
@@ -203,6 +234,20 @@ function onMousedown(ev: MouseEvent | TouchEvent) {
 	window.addEventListener('touchmove', onDrag);
 	window.addEventListener('mouseup', onMouseup, { once: true });
 	window.addEventListener('touchend', onMouseup, { once: true });
+
+	if (lastClickTime == null) {
+		lastClickTime = Date.now();
+		return;
+	} else {
+		const now = Date.now();
+		if (now - lastClickTime < 300) { // 300ms以内のクリックはダブルクリックとみなす
+			lastClickTime = null;
+			emit('thumbDoubleClicked');
+			return;
+		} else {
+			lastClickTime = now;
+		}
+	}
 }
 </script>
 
-- 
cgit v1.2.3-freya


From 3dbfd80d65262bec24002c50cdfb2c1b962efcf5 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 15 Jun 2025 09:25:57 +0900
Subject: enhance(frontend/image-effector): tweak colorAdjust fx

---
 .../src/components/MkImageEffectorDialog.Layer.vue | 11 ++---
 .../src/utility/image-effector/ImageEffector.ts    |  2 +
 .../src/utility/image-effector/fxs/colorAdjust.ts  | 49 ++++++++++++----------
 3 files changed, 35 insertions(+), 27 deletions(-)

(limited to 'packages/frontend/src/components/MkImageEffectorDialog.Layer.vue')

diff --git a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
index ff3b9aff9b..d8466fa7ca 100644
--- a/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
+++ b/packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				v-if="v.type === 'boolean'"
 				v-model="layer.params[k]"
 			>
-				<template #label>{{ k }}</template>
+				<template #label>{{ fx.params[k].label ?? k }}</template>
 			</MkSwitch>
 			<MkRange
 				v-else-if="v.type === 'number'"
@@ -29,6 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				:min="v.min"
 				:max="v.max"
 				:step="v.step"
+				:textConverter="fx.params[k].toViewValue"
 				@thumbDoubleClicked="() => {
 					if (fx.params[k].default != null) {
 						layer.params[k] = fx.params[k].default;
@@ -37,13 +38,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 					}
 				}"
 			>
-				<template #label>{{ k }}</template>
+				<template #label>{{ fx.params[k].label ?? k }}</template>
 			</MkRange>
 			<MkRadios
 				v-else-if="v.type === 'number:enum'"
 				v-model="layer.params[k]"
 			>
-				<template #label>{{ k }}</template>
+				<template #label>{{ fx.params[k].label ?? k }}</template>
 				<option v-for="item in v.enum" :value="item.value">{{ item.label }}</option>
 			</MkRadios>
 			<div v-else-if="v.type === 'seed'">
@@ -55,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:max="10000"
 					:step="1"
 				>
-					<template #label>{{ k }}</template>
+					<template #label>{{ fx.params[k].label ?? k }}</template>
 				</MkRange>
 			</div>
 			<MkInput
@@ -64,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				type="color"
 				@update:modelValue="v => { const c = getRgb(v); if (c != null) layer.params[k] = c; }"
 			>
-				<template #label>{{ k }}</template>
+				<template #label>{{ fx.params[k].label ?? k }}</template>
 			</MkInput>
 		</div>
 	</div>
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);
 	},
 });
-- 
cgit v1.2.3-freya