usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
syuilo 2025-06-15 09:25:57 +09:00
parent b33eeb1366
commit 3dbfd80d65
3 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/frontend/src/components/MkImageEffectorDialog.Layer.vue
View File

@ -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>

2
packages/frontend/src/utility/image-effector/ImageEffector.ts
View File

@ -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>) {

49
packages/frontend/src/utility/image-effector/fxs/colorAdjust.ts
View File

@ -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);
},
});