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

wip

This commit is contained in:
syuilo 2025-06-03 19:16:21 +09:00
parent 3bbba7356c
commit cc09a4bf91
6 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,6 +31,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<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>

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

@ -12,6 +12,7 @@ type ParamTypeToPrimitive = {
'align': { x: 'left' | 'center' | 'right'; y: 'top' | 'center' | 'bottom'; };
'seed': number;
'texture': { type: 'text'; text: string | null; } | { type: 'url'; url: string | null; } | null;
'color': [r: number, g: number, b: number];
};
type ImageEffectorFxParamDefs = Record<string, {

18
packages/frontend/src/utility/image-effector/fxs/checker.ts
View File

@ -18,7 +18,7 @@ uniform sampler2D in_texture;
uniform vec2 in_resolution;
uniform float u_angle;
uniform float u_scale;
uniform bool u_black;
uniform vec3 u_color;
uniform float u_opacity;
out vec4 out_color;
@ -38,9 +38,9 @@ void main() {
float fin = max(sign(fmodResult), 0.0);
out_color = vec4(
mix(in_color.r, u_black ? 0.0 : 1.0, fin * u_opacity),
mix(in_color.g, u_black ? 0.0 : 1.0, fin * u_opacity),
mix(in_color.b, u_black ? 0.0 : 1.0, fin * u_opacity),
mix(in_color.r, u_color.r, fin * u_opacity),
mix(in_color.g, u_color.g, fin * u_opacity),
mix(in_color.b, u_color.b, fin * u_opacity),
in_color.a
);
}
@ -50,7 +50,7 @@ export const FX_checker = defineImageEffectorFx({
id: 'checker' as const,
name: i18n.ts._imageEffector._fxs.checker,
shader,
uniforms: ['angle', 'scale', 'black', 'opacity'] as const,
uniforms: ['angle', 'scale', 'color', 'opacity'] as const,
params: {
angle: {
type: 'number' as const,
@ -66,9 +66,9 @@ export const FX_checker = defineImageEffectorFx({
max: 10.0,
step: 0.1,
},
black: {
type: 'boolean' as const,
default: false,
color: {
type: 'color' as const,
default: [1, 1, 1],
},
opacity: {
type: 'number' as const,
@ -81,7 +81,7 @@ export const FX_checker = defineImageEffectorFx({
main: ({ gl, u, params }) => {
gl.uniform1f(u.angle, params.angle / 2);
gl.uniform1f(u.scale, params.scale * params.scale);
gl.uniform1i(u.black, params.black ? 1 : 0);
gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]);
gl.uniform1f(u.opacity, params.opacity);
},
});

24
packages/frontend/src/utility/image-effector/fxs/polkadot.ts
View File

@ -23,7 +23,7 @@ uniform float u_major_opacity;
uniform float u_minor_divisions;
uniform float u_minor_radius;
uniform float u_minor_opacity;
uniform bool u_black;
uniform vec3 u_color;
out vec4 out_color;
void main() {
@ -48,9 +48,9 @@ void main() {
length(vec2((1.0 / u_scale) - major_modX, (1.0 / u_scale) - major_modY)) < major_threshold
) {
out_color = vec4(
mix(in_color.r, u_black ? 0.0 : 1.0, u_major_opacity),
mix(in_color.g, u_black ? 0.0 : 1.0, u_major_opacity),
mix(in_color.b, u_black ? 0.0 : 1.0, u_major_opacity),
mix(in_color.r, u_color.r, u_major_opacity),
mix(in_color.g, u_color.g, u_major_opacity),
mix(in_color.b, u_color.b, u_major_opacity),
in_color.a
);
return;
@ -66,9 +66,9 @@ void main() {
length(vec2((1.0 / u_scale / u_minor_divisions) - minor_modX, (1.0 / u_scale / u_minor_divisions) - minor_modY)) < minor_threshold
) {
out_color = vec4(
mix(in_color.r, u_black ? 0.0 : 1.0, u_minor_opacity),
mix(in_color.g, u_black ? 0.0 : 1.0, u_minor_opacity),
mix(in_color.b, u_black ? 0.0 : 1.0, u_minor_opacity),
mix(in_color.r, u_color.r, u_minor_opacity),
mix(in_color.g, u_color.g, u_minor_opacity),
mix(in_color.b, u_color.b, u_minor_opacity),
in_color.a
);
return;
@ -82,7 +82,7 @@ export const FX_polkadot = defineImageEffectorFx({
id: 'polkadot' as const,
name: i18n.ts._imageEffector._fxs.polkadot,
shader,
uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'black'] as const,
uniforms: ['angle', 'scale', 'major_radius', 'major_opacity', 'minor_divisions', 'minor_radius', 'minor_opacity', 'color'] as const,
params: {
angle: {
type: 'number' as const,
@ -133,9 +133,9 @@ export const FX_polkadot = defineImageEffectorFx({
max: 1.0,
step: 0.01,
},
black: {
type: 'boolean' as const,
default: false,
color: {
type: 'color' as const,
default: [1, 1, 1],
},
},
main: ({ gl, u, params }) => {
@ -145,7 +145,7 @@ export const FX_polkadot = defineImageEffectorFx({
gl.uniform1f(u.major_opacity, params.majorOpacity);
gl.uniform1f(u.minor_divisions, params.minorDivisions);
gl.uniform1f(u.minor_radius, params.minorRadius);
gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]);
gl.uniform1f(u.minor_opacity, params.minorOpacity);
gl.uniform1i(u.black, params.black ? 1 : 0);
},
});

18
packages/frontend/src/utility/image-effector/fxs/stripe.ts
View File

@ -20,7 +20,7 @@ uniform float u_angle;
uniform float u_frequency;
uniform float u_phase;
uniform float u_threshold;
uniform bool u_black;
uniform vec3 u_color;
uniform float u_opacity;
out vec4 out_color;
@ -40,9 +40,9 @@ void main() {
float value = (1.0 + sin((rotatedUV.x * u_frequency - HALF_PI) + phase)) / 2.0;
value = value < u_threshold ? 1.0 : 0.0;
out_color = vec4(
mix(in_color.r, u_black ? 0.0 : 1.0, value * u_opacity),
mix(in_color.g, u_black ? 0.0 : 1.0, value * u_opacity),
mix(in_color.b, u_black ? 0.0 : 1.0, value * u_opacity),
mix(in_color.r, u_color.r, value * u_opacity),
mix(in_color.g, u_color.g, value * u_opacity),
mix(in_color.b, u_color.b, value * u_opacity),
in_color.a
);
}
@ -52,7 +52,7 @@ export const FX_stripe = defineImageEffectorFx({
id: 'stripe' as const,
name: i18n.ts._imageEffector._fxs.stripe,
shader,
uniforms: ['angle', 'frequency', 'phase', 'threshold', 'black', 'opacity'] as const,
uniforms: ['angle', 'frequency', 'phase', 'threshold', 'color', 'opacity'] as const,
params: {
angle: {
type: 'number' as const,
@ -75,9 +75,9 @@ export const FX_stripe = defineImageEffectorFx({
max: 1.0,
step: 0.01,
},
black: {
type: 'boolean' as const,
default: false,
color: {
type: 'color' as const,
default: [1, 1, 1],
},
opacity: {
type: 'number' as const,
@ -92,7 +92,7 @@ export const FX_stripe = defineImageEffectorFx({
gl.uniform1f(u.frequency, params.frequency * params.frequency);
gl.uniform1f(u.phase, 0.0);
gl.uniform1f(u.threshold, params.threshold);
gl.uniform1i(u.black, params.black ? 1 : 0);
gl.uniform3f(u.color, params.color[0], params.color[1], params.color[2]);
gl.uniform1f(u.opacity, params.opacity);
},
});

12
packages/frontend/src/utility/watermark.ts
View File

@ -39,7 +39,7 @@ export type WatermarkPreset = {
angle: number;
frequency: number;
threshold: number;
black: boolean;
color: [r: number, g: number, b: number];
opacity: number;
} | {
id: string;
@ -51,14 +51,14 @@ export type WatermarkPreset = {
minorDivisions: number;
minorRadius: number;
minorOpacity: number;
black: boolean;
color: [r: number, g: number, b: number];
opacity: number;
} | {
id: string;
type: 'checker';
angle: number;
scale: number;
black: boolean;
color: [r: number, g: number, b: number];
opacity: number;
})[];
};
@ -126,7 +126,7 @@ export class WatermarkRenderer {
angle: layer.angle,
frequency: layer.frequency,
threshold: layer.threshold,
black: layer.black,
color: layer.color,
opacity: layer.opacity,
},
};
@ -142,7 +142,7 @@ export class WatermarkRenderer {
minorDivisions: layer.minorDivisions,
minorRadius: layer.minorRadius,
minorOpacity: layer.minorOpacity,
black: layer.black,
color: layer.color,
opacity: layer.opacity,
},
};
@ -153,7 +153,7 @@ export class WatermarkRenderer {
params: {
angle: layer.angle,
scale: layer.scale,
black: layer.black,
color: layer.color,
opacity: layer.opacity,
},
};