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-05-30 10:37:04 +09:00
parent 7de068c429
commit 2d2b9e7a3f
12 changed files with 118 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,14 +18,15 @@ type ImageEffectorFxParamDefs = Record<string, {
default: any; default: any;
}>; }>;
export function defineImageEffectorFx<ID extends string, P extends ImageEffectorFxParamDefs>(fx: ImageEffectorFx<ID, P>) { export function defineImageEffectorFx<ID extends string, P extends ImageEffectorFxParamDefs, U extends string[]>(fx: ImageEffectorFx<ID, P, U>) {
return fx; return fx;
} }
export type ImageEffectorFx<ID extends string, P extends ImageEffectorFxParamDefs> = { export type ImageEffectorFx<ID extends string = string, P extends ImageEffectorFxParamDefs = any, U extends string[] = string[]> = {
id: ID; id: ID;
name: string; name: string;
shader: string; shader: string;
uniforms: U;
params: P, params: P,
main: (ctx: { main: (ctx: {
gl: WebGL2RenderingContext; gl: WebGL2RenderingContext;
@ -33,7 +34,7 @@ export type ImageEffectorFx<ID extends string, P extends ImageEffectorFxParamDef
params: { params: {
[key in keyof P]: ParamTypeToPrimitive[P[key]['type']]; [key in keyof P]: ParamTypeToPrimitive[P[key]['type']];
}; };
preTexture: WebGLTexture; u: Record<U[number], WebGLUniformLocation>;
width: number; width: number;
height: number; height: number;
watermark?: { watermark?: {
@ -69,7 +70,7 @@ export class ImageEffector {
private shaderCache: Map<string, WebGLProgram> = new Map(); private shaderCache: Map<string, WebGLProgram> = new Map();
private perLayerResultTextures: Map<string, WebGLTexture> = new Map(); private perLayerResultTextures: Map<string, WebGLTexture> = new Map();
private perLayerResultFrameBuffers: Map<string, WebGLFramebuffer> = new Map(); private perLayerResultFrameBuffers: Map<string, WebGLFramebuffer> = new Map();
private fxs: ImageEffectorFx<string, any>[]; private fxs: ImageEffectorFx[];
constructor(options: { constructor(options: {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
@ -77,7 +78,7 @@ export class ImageEffector {
height: number; height: number;
originalImage: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement; originalImage: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement;
layers: ImageEffectorLayer[]; layers: ImageEffectorLayer[];
fxs: ImageEffectorFx<string, any>[]; fxs: ImageEffectorFx[];
}) { }) {
this.canvas = options.canvas; this.canvas = options.canvas;
this.canvas.width = options.width; this.canvas.width = options.width;
@ -332,8 +333,13 @@ export class ImageEffector {
gl.useProgram(shaderProgram); gl.useProgram(shaderProgram);
const u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution'); const in_resolution = gl.getUniformLocation(shaderProgram, 'in_resolution');
gl.uniform2fv(u_resolution, [this.renderWidth, this.renderHeight]); gl.uniform2fv(in_resolution, [this.renderWidth, this.renderHeight]);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, preTexture);
const in_texture = gl.getUniformLocation(shaderProgram, 'in_texture');
gl.uniform1i(in_texture, 0);
fx.main({ fx.main({
gl: gl, gl: gl,
@ -343,7 +349,7 @@ export class ImageEffector {
return [key, layer.params[key] ?? param.default]; return [key, layer.params[key] ?? param.default];
}), }),
) as any, ) as any,
preTexture: preTexture, u: Object.fromEntries(fx.uniforms.map(u => [u, gl.getUniformLocation(shaderProgram, 'u_' + u)!])),
width: this.renderWidth, width: this.renderWidth,
height: this.renderHeight, height: this.renderHeight,
watermark: watermark, watermark: watermark,

27
packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts
View File

@ -10,8 +10,8 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
out vec4 out_color; out vec4 out_color;
uniform float u_amount; uniform float u_amount;
uniform float u_start; uniform float u_start;
@ -23,7 +23,7 @@ void main() {
float g_strength = 1.5; float g_strength = 1.5;
float b_strength = 2.0; float b_strength = 2.0;
vec2 size = vec2(u_resolution.x, u_resolution.y); vec2 size = vec2(in_resolution.x, in_resolution.y);
vec4 accumulator = vec4(0.0); vec4 accumulator = vec4(0.0);
float normalisedValue = length((in_uv - 0.5) * 2.0); float normalisedValue = length((in_uv - 0.5) * 2.0);
@ -37,13 +37,13 @@ void main() {
vec2 bOffset = -vector * strength * (u_amount * b_strength); vec2 bOffset = -vector * strength * (u_amount * b_strength);
for (int i = 0; i < samples; i++) { for (int i = 0; i < samples; i++) {
accumulator.r += texture(u_texture, in_uv + rOffset).r; accumulator.r += texture(in_texture, in_uv + rOffset).r;
rOffset -= velocity / float(samples); rOffset -= velocity / float(samples);
accumulator.g += texture(u_texture, in_uv + gOffset).g; accumulator.g += texture(in_texture, in_uv + gOffset).g;
gOffset -= velocity / float(samples); gOffset -= velocity / float(samples);
accumulator.b += texture(u_texture, in_uv + bOffset).b; accumulator.b += texture(in_texture, in_uv + bOffset).b;
bOffset -= velocity / float(samples); bOffset -= velocity / float(samples);
} }
@ -55,6 +55,7 @@ export const FX_chromaticAberration = defineImageEffectorFx({
id: 'chromaticAberration' as const, id: 'chromaticAberration' as const,
name: i18n.ts._imageEffector._fxs.chromaticAberration, name: i18n.ts._imageEffector._fxs.chromaticAberration,
shader, shader,
uniforms: ['amount', 'start', 'normalize'] as const,
params: { params: {
normalize: { normalize: {
type: 'boolean' as const, type: 'boolean' as const,
@ -68,16 +69,8 @@ export const FX_chromaticAberration = defineImageEffectorFx({
step: 0.01, step: 0.01,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1f(u.amount, params.amount);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1i(u.normalize, params.normalize ? 1 : 0);
const u_texture = gl.getUniformLocation(program, 'u_texture');
gl.uniform1i(u_texture, 0);
const u_amount = gl.getUniformLocation(program, 'u_amount');
gl.uniform1f(u_amount, params.amount);
const u_normalize = gl.getUniformLocation(program, 'u_normalize');
gl.uniform1i(u_normalize, params.normalize ? 1 : 0);
}, },
}); });

21
packages/frontend/src/utility/image-effector/fxs/colorClamp.ts
View File

@ -10,14 +10,14 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform float u_max; uniform float u_max;
uniform float u_min; uniform float u_min;
out vec4 out_color; out vec4 out_color;
void main() { void main() {
vec4 in_color = texture(u_texture, in_uv); vec4 in_color = texture(in_texture, in_uv);
float r = min(max(in_color.r, u_min), u_max); float r = min(max(in_color.r, u_min), u_max);
float g = min(max(in_color.g, u_min), u_max); float g = min(max(in_color.g, u_min), u_max);
float b = min(max(in_color.b, u_min), u_max); float b = min(max(in_color.b, u_min), u_max);
@ -29,6 +29,7 @@ export const FX_colorClamp = defineImageEffectorFx({
id: 'colorClamp' as const, id: 'colorClamp' as const,
name: i18n.ts._imageEffector._fxs.colorClamp, name: i18n.ts._imageEffector._fxs.colorClamp,
shader, shader,
uniforms: ['max', 'min'] as const,
params: { params: {
max: { max: {
type: 'number' as const, type: 'number' as const,
@ -45,16 +46,8 @@ export const FX_colorClamp = defineImageEffectorFx({
step: 0.01, step: 0.01,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1f(u.max, params.max);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1f(u.min, 1.0 + params.min);
const u_texture = gl.getUniformLocation(program, 'u_texture');
gl.uniform1i(u_texture, 0);
const u_max = gl.getUniformLocation(program, 'u_max');
gl.uniform1f(u_max, params.max);
const u_min = gl.getUniformLocation(program, 'u_min');
gl.uniform1f(u_min, 1.0 + params.min);
}, },
}); });

37
packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts
View File

@ -10,8 +10,8 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform float u_rMax; uniform float u_rMax;
uniform float u_rMin; uniform float u_rMin;
uniform float u_gMax; uniform float u_gMax;
@ -21,7 +21,7 @@ uniform float u_bMin;
out vec4 out_color; out vec4 out_color;
void main() { void main() {
vec4 in_color = texture(u_texture, in_uv); vec4 in_color = texture(in_texture, in_uv);
float r = min(max(in_color.r, u_rMin), u_rMax); float r = min(max(in_color.r, u_rMin), u_rMax);
float g = min(max(in_color.g, u_gMin), u_gMax); float g = min(max(in_color.g, u_gMin), u_gMax);
float b = min(max(in_color.b, u_bMin), u_bMax); float b = min(max(in_color.b, u_bMin), u_bMax);
@ -33,6 +33,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
id: 'colorClampAdvanced' as const, id: 'colorClampAdvanced' as const,
name: i18n.ts._imageEffector._fxs.colorClampAdvanced, name: i18n.ts._imageEffector._fxs.colorClampAdvanced,
shader, shader,
uniforms: ['rMax', 'rMin', 'gMax', 'gMin', 'bMax', 'bMin'] as const,
params: { params: {
rMax: { rMax: {
type: 'number' as const, type: 'number' as const,
@ -77,28 +78,12 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({
step: 0.01, step: 0.01,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1f(u.rMax, params.rMax);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1f(u.rMin, 1.0 + params.rMin);
const u_texture = gl.getUniformLocation(program, 'u_texture'); gl.uniform1f(u.gMax, params.gMax);
gl.uniform1i(u_texture, 0); gl.uniform1f(u.gMin, 1.0 + params.gMin);
gl.uniform1f(u.bMax, params.bMax);
const u_rMax = gl.getUniformLocation(program, 'u_rMax'); gl.uniform1f(u.bMin, 1.0 + params.bMin);
gl.uniform1f(u_rMax, params.rMax);
const u_rMin = gl.getUniformLocation(program, 'u_rMin');
gl.uniform1f(u_rMin, 1.0 + params.rMin);
const u_gMax = gl.getUniformLocation(program, 'u_gMax');
gl.uniform1f(u_gMax, params.gMax);
const u_gMin = gl.getUniformLocation(program, 'u_gMin');
gl.uniform1f(u_gMin, 1.0 + params.gMin);
const u_bMax = gl.getUniformLocation(program, 'u_bMax');
gl.uniform1f(u_bMax, params.bMax);
const u_bMin = gl.getUniformLocation(program, 'u_bMin');
gl.uniform1f(u_bMin, 1.0 + params.bMin);
}, },
}); });

31
packages/frontend/src/utility/image-effector/fxs/distort.ts
View File

@ -10,8 +10,8 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform float u_phase; uniform float u_phase;
uniform float u_frequency; uniform float u_frequency;
uniform float u_strength; uniform float u_strength;
@ -23,8 +23,8 @@ void main() {
sin(u_phase + in_uv.y * u_frequency) * u_strength : sin(u_phase + in_uv.y * u_frequency) * u_strength :
sin(u_phase + in_uv.x * u_frequency) * u_strength; sin(u_phase + in_uv.x * u_frequency) * u_strength;
vec4 in_color = u_direction == 0 ? vec4 in_color = u_direction == 0 ?
texture(u_texture, vec2(in_uv.x + v, in_uv.y)) : texture(in_texture, vec2(in_uv.x + v, in_uv.y)) :
texture(u_texture, vec2(in_uv.x, in_uv.y + v)); texture(in_texture, vec2(in_uv.x, in_uv.y + v));
out_color = in_color; out_color = in_color;
} }
`; `;
@ -33,6 +33,7 @@ export const FX_distort = defineImageEffectorFx({
id: 'distort' as const, id: 'distort' as const,
name: i18n.ts._imageEffector._fxs.distort, name: i18n.ts._imageEffector._fxs.distort,
shader, shader,
uniforms: ['phase', 'frequency', 'strength', 'direction'] as const,
params: { params: {
direction: { direction: {
type: 'number:enum' as const, type: 'number:enum' as const,
@ -61,22 +62,10 @@ export const FX_distort = defineImageEffectorFx({
step: 0.01, step: 0.01,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1f(u.phase, params.phase / 10);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1f(u.frequency, params.frequency);
const u_texture = gl.getUniformLocation(program, 'u_texture'); gl.uniform1f(u.strength, params.strength);
gl.uniform1i(u_texture, 0); gl.uniform1i(u.direction, params.direction);
const u_phase = gl.getUniformLocation(program, 'u_phase');
gl.uniform1f(u_phase, params.phase / 10);
const u_frequency = gl.getUniformLocation(program, 'u_frequency');
gl.uniform1f(u_frequency, params.frequency);
const u_strength = gl.getUniformLocation(program, 'u_strength');
gl.uniform1f(u_strength, params.strength);
const u_direction = gl.getUniformLocation(program, 'u_direction');
gl.uniform1i(u_direction, params.direction);
}, },
}); });

27
packages/frontend/src/utility/image-effector/fxs/glitch.ts
View File

@ -11,8 +11,8 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform int u_amount; uniform int u_amount;
uniform float u_shiftStrengths[128]; uniform float u_shiftStrengths[128];
uniform float u_shiftOrigins[128]; uniform float u_shiftOrigins[128];
@ -29,10 +29,10 @@ void main() {
} }
} }
float r = texture(u_texture, vec2(in_uv.x + (v * (1.0 + u_channelShift)), in_uv.y)).r; float r = texture(in_texture, vec2(in_uv.x + (v * (1.0 + u_channelShift)), in_uv.y)).r;
float g = texture(u_texture, vec2(in_uv.x + v, in_uv.y)).g; float g = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).g;
float b = texture(u_texture, vec2(in_uv.x + (v * (1.0 + (u_channelShift / 2.0))), in_uv.y)).b; float b = texture(in_texture, vec2(in_uv.x + (v * (1.0 + (u_channelShift / 2.0))), in_uv.y)).b;
float a = texture(u_texture, vec2(in_uv.x + v, in_uv.y)).a; float a = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).a;
out_color = vec4(r, g, b, a); out_color = vec4(r, g, b, a);
} }
`; `;
@ -41,6 +41,7 @@ export const FX_glitch = defineImageEffectorFx({
id: 'glitch' as const, id: 'glitch' as const,
name: i18n.ts._imageEffector._fxs.glitch, name: i18n.ts._imageEffector._fxs.glitch,
shader, shader,
uniforms: ['amount', 'channelShift'] as const,
params: { params: {
amount: { amount: {
type: 'number' as const, type: 'number' as const,
@ -75,17 +76,9 @@ export const FX_glitch = defineImageEffectorFx({
default: 100, default: 100,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, program, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1i(u.amount, params.amount);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1f(u.channelShift, params.channelShift);
const u_texture = gl.getUniformLocation(program, 'u_texture');
gl.uniform1i(u_texture, 0);
const u_amount = gl.getUniformLocation(program, 'u_amount');
gl.uniform1i(u_amount, params.amount);
const u_channelShift = gl.getUniformLocation(program, 'u_channelShift');
gl.uniform1f(u_channelShift, params.channelShift);
const rnd = seedrandom(params.seed.toString()); const rnd = seedrandom(params.seed.toString());

13
packages/frontend/src/utility/image-effector/fxs/grayscale.ts
View File

@ -10,8 +10,8 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
out vec4 out_color; out vec4 out_color;
float getBrightness(vec4 color) { float getBrightness(vec4 color) {
@ -19,7 +19,7 @@ float getBrightness(vec4 color) {
} }
void main() { void main() {
vec4 in_color = texture(u_texture, in_uv); vec4 in_color = texture(in_texture, in_uv);
float brightness = getBrightness(in_color); float brightness = getBrightness(in_color);
out_color = vec4(brightness, brightness, brightness, in_color.a); out_color = vec4(brightness, brightness, brightness, in_color.a);
} }
@ -29,12 +29,9 @@ export const FX_grayscale = defineImageEffectorFx({
id: 'grayscale' as const, id: 'grayscale' as const,
name: i18n.ts._imageEffector._fxs.grayscale, name: i18n.ts._imageEffector._fxs.grayscale,
shader, shader,
uniforms: [] as const,
params: { params: {
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, params }) => {
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, preTexture);
const u_texture = gl.getUniformLocation(program, 'u_texture');
gl.uniform1i(u_texture, 0);
}, },
}); });

35
packages/frontend/src/utility/image-effector/fxs/invert.ts
View File

@ -10,20 +10,19 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform bool u_r; uniform bool u_r;
uniform bool u_g; uniform bool u_g;
uniform bool u_b; uniform bool u_b;
uniform bool u_a;
out vec4 out_color; out vec4 out_color;
void main() { void main() {
vec4 in_color = texture(u_texture, in_uv); vec4 in_color = texture(in_texture, in_uv);
out_color.r = u_r ? 1.0 - in_color.r : in_color.r; out_color.r = u_r ? 1.0 - in_color.r : in_color.r;
out_color.g = u_g ? 1.0 - in_color.g : in_color.g; out_color.g = u_g ? 1.0 - in_color.g : in_color.g;
out_color.b = u_b ? 1.0 - in_color.b : in_color.b; out_color.b = u_b ? 1.0 - in_color.b : in_color.b;
out_color.a = u_a ? 1.0 - in_color.a : in_color.a; out_color.a = in_color.a;
} }
`; `;
@ -31,6 +30,7 @@ export const FX_invert = defineImageEffectorFx({
id: 'invert' as const, id: 'invert' as const,
name: i18n.ts._imageEffector._fxs.invert, name: i18n.ts._imageEffector._fxs.invert,
shader, shader,
uniforms: ['r', 'g', 'b'] as const,
params: { params: {
r: { r: {
type: 'boolean' as const, type: 'boolean' as const,
@ -44,27 +44,10 @@ export const FX_invert = defineImageEffectorFx({
type: 'boolean' as const, type: 'boolean' as const,
default: true, default: true,
}, },
a: {
type: 'boolean' as const,
default: false,
},
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1i(u.r, params.r ? 1 : 0);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1i(u.g, params.g ? 1 : 0);
const u_texture = gl.getUniformLocation(program, 'u_texture'); gl.uniform1i(u.b, params.b ? 1 : 0);
gl.uniform1i(u_texture, 0);
const u_r = gl.getUniformLocation(program, 'u_r');
gl.uniform1i(u_r, params.r ? 1 : 0);
const u_g = gl.getUniformLocation(program, 'u_g');
gl.uniform1i(u_g, params.g ? 1 : 0);
const u_b = gl.getUniformLocation(program, 'u_b');
gl.uniform1i(u_b, params.b ? 1 : 0);
const u_a = gl.getUniformLocation(program, 'u_a');
gl.uniform1i(u_a, params.a ? 1 : 0);
}, },
}); });

21
packages/frontend/src/utility/image-effector/fxs/mirror.ts
View File

@ -10,8 +10,8 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform int u_h; uniform int u_h;
uniform int u_v; uniform int u_v;
out vec4 out_color; out vec4 out_color;
@ -30,7 +30,7 @@ void main() {
if (u_v == 1 && in_uv.y < 0.5) { if (u_v == 1 && in_uv.y < 0.5) {
uv.y = 1.0 - uv.y; uv.y = 1.0 - uv.y;
} }
out_color = texture(u_texture, uv); out_color = texture(in_texture, uv);
} }
`; `;
@ -38,6 +38,7 @@ export const FX_mirror = defineImageEffectorFx({
id: 'mirror' as const, id: 'mirror' as const,
name: i18n.ts._imageEffector._fxs.mirror, name: i18n.ts._imageEffector._fxs.mirror,
shader, shader,
uniforms: ['h', 'v'] as const,
params: { params: {
h: { h: {
type: 'number:enum' as const, type: 'number:enum' as const,
@ -50,16 +51,8 @@ export const FX_mirror = defineImageEffectorFx({
default: 0, default: 0,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1i(u.h, params.h);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1i(u.v, params.v);
const u_texture = gl.getUniformLocation(program, 'u_texture');
gl.uniform1i(u_texture, 0);
const u_h = gl.getUniformLocation(program, 'u_h');
gl.uniform1i(u_h, params.h);
const u_v = gl.getUniformLocation(program, 'u_v');
gl.uniform1i(u_v, params.v);
}, },
}); });

25
packages/frontend/src/utility/image-effector/fxs/threshold.ts
View File

@ -10,15 +10,15 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform float u_r; uniform float u_r;
uniform float u_g; uniform float u_g;
uniform float u_b; uniform float u_b;
out vec4 out_color; out vec4 out_color;
void main() { void main() {
vec4 in_color = texture(u_texture, in_uv); vec4 in_color = texture(in_texture, in_uv);
float r = in_color.r < u_r ? 0.0 : 1.0; float r = in_color.r < u_r ? 0.0 : 1.0;
float g = in_color.g < u_g ? 0.0 : 1.0; float g = in_color.g < u_g ? 0.0 : 1.0;
float b = in_color.b < u_b ? 0.0 : 1.0; float b = in_color.b < u_b ? 0.0 : 1.0;
@ -30,6 +30,7 @@ export const FX_threshold = defineImageEffectorFx({
id: 'threshold' as const, id: 'threshold' as const,
name: i18n.ts._imageEffector._fxs.threshold, name: i18n.ts._imageEffector._fxs.threshold,
shader, shader,
uniforms: ['r', 'g', 'b'] as const,
params: { params: {
r: { r: {
type: 'number' as const, type: 'number' as const,
@ -53,19 +54,9 @@ export const FX_threshold = defineImageEffectorFx({
step: 0.01, step: 0.01,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform1f(u.r, params.r);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1f(u.g, params.g);
const u_texture = gl.getUniformLocation(program, 'u_texture'); gl.uniform1f(u.b, params.b);
gl.uniform1i(u_texture, 0);
const u_r = gl.getUniformLocation(program, 'u_r');
gl.uniform1f(u_r, params.r);
const u_g = gl.getUniformLocation(program, 'u_g');
gl.uniform1f(u_g, params.g);
const u_b = gl.getUniformLocation(program, 'u_b');
gl.uniform1f(u_b, params.b);
}, },
}); });

55
packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts
View File

@ -9,9 +9,9 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture_src; uniform sampler2D in_texture;
uniform vec2 in_resolution;
uniform sampler2D u_texture_watermark; uniform sampler2D u_texture_watermark;
uniform vec2 u_resolution_src;
uniform vec2 u_resolution_watermark; uniform vec2 u_resolution_watermark;
uniform float u_scale; uniform float u_scale;
uniform float u_angle; uniform float u_angle;
@ -23,12 +23,12 @@ uniform int u_fitMode; // 0: contain, 1: cover
out vec4 out_color; out vec4 out_color;
void main() { void main() {
vec4 in_color = texture(u_texture_src, in_uv); vec4 in_color = texture(in_texture, in_uv);
bool contain = u_fitMode == 0; bool contain = u_fitMode == 0;
float x_ratio = u_resolution_watermark.x / u_resolution_src.x; float x_ratio = u_resolution_watermark.x / in_resolution.x;
float y_ratio = u_resolution_watermark.y / u_resolution_src.y; float y_ratio = u_resolution_watermark.y / in_resolution.y;
float aspect_ratio = contain ? float aspect_ratio = contain ?
(min(x_ratio, y_ratio) / max(x_ratio, y_ratio)) : (min(x_ratio, y_ratio) / max(x_ratio, y_ratio)) :
@ -70,6 +70,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
id: 'watermarkPlacement' as const, id: 'watermarkPlacement' as const,
name: '(internal)', name: '(internal)',
shader, shader,
uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'fitMode'] as const,
params: { params: {
cover: { cover: {
type: 'boolean' as const, type: 'boolean' as const,
@ -98,46 +99,22 @@ export const FX_watermarkPlacement = defineImageEffectorFx({
step: 0.01, step: 0.01,
}, },
}, },
main: ({ gl, program, params, preTexture, width, height, watermark }) => { main: ({ gl, u, params, watermark }) => {
if (watermark == null) { if (watermark == null) {
return; return;
} }
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, preTexture);
const u_texture_src = gl.getUniformLocation(program, 'u_texture_src');
gl.uniform1i(u_texture_src, 0);
gl.activeTexture(gl.TEXTURE1); gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, watermark.texture); gl.bindTexture(gl.TEXTURE_2D, watermark.texture);
const u_texture_watermark = gl.getUniformLocation(program, 'u_texture_watermark'); gl.uniform1i(u.texture_watermark, 1);
gl.uniform1i(u_texture_watermark, 1);
const u_resolution_src = gl.getUniformLocation(program, 'u_resolution_src'); gl.uniform2fv(u.resolution_watermark, [watermark.width, watermark.height]);
gl.uniform2fv(u_resolution_src, [width, height]); gl.uniform1f(u.scale, params.scale);
gl.uniform1f(u.opacity, params.opacity);
const u_resolution_watermark = gl.getUniformLocation(program, 'u_resolution_watermark'); gl.uniform1f(u.angle, 0.0);
gl.uniform2fv(u_resolution_watermark, [watermark.width, watermark.height]); gl.uniform1i(u.repeat, params.repeat ? 1 : 0);
gl.uniform1i(u.alignX, params.align.x === 'left' ? 0 : params.align.x === 'right' ? 2 : 1);
const u_scale = gl.getUniformLocation(program, 'u_scale'); gl.uniform1i(u.alignY, params.align.y === 'top' ? 0 : params.align.y === 'bottom' ? 2 : 1);
gl.uniform1f(u_scale, params.scale); gl.uniform1i(u.fitMode, params.cover ? 1 : 0);
const u_opacity = gl.getUniformLocation(program, 'u_opacity');
gl.uniform1f(u_opacity, params.opacity);
const u_angle = gl.getUniformLocation(program, 'u_angle');
gl.uniform1f(u_angle, 0.0);
const u_repeat = gl.getUniformLocation(program, 'u_repeat');
gl.uniform1i(u_repeat, params.repeat ? 1 : 0);
const u_alignX = gl.getUniformLocation(program, 'u_alignX');
gl.uniform1i(u_alignX, params.align.x === 'left' ? 0 : params.align.x === 'right' ? 2 : 1);
const u_alignY = gl.getUniformLocation(program, 'u_alignY');
gl.uniform1i(u_alignY, params.align.y === 'top' ? 0 : params.align.y === 'bottom' ? 2 : 1);
const u_fitMode = gl.getUniformLocation(program, 'u_fitMode');
gl.uniform1i(u_fitMode, params.cover ? 1 : 0);
}, },
}); });

37
packages/frontend/src/utility/image-effector/fxs/zoomLines.ts
View File

@ -10,8 +10,8 @@ const shader = `#version 300 es
precision mediump float; precision mediump float;
in vec2 in_uv; in vec2 in_uv;
uniform sampler2D u_texture; uniform sampler2D in_texture;
uniform vec2 u_resolution; uniform vec2 in_resolution;
uniform vec2 u_pos; uniform vec2 u_pos;
uniform float u_frequency; uniform float u_frequency;
uniform bool u_thresholdEnabled; uniform bool u_thresholdEnabled;
@ -21,7 +21,7 @@ uniform bool u_black;
out vec4 out_color; out vec4 out_color;
void main() { void main() {
vec4 in_color = texture(u_texture, in_uv); vec4 in_color = texture(in_texture, in_uv);
float angle = atan(-u_pos.y + (in_uv.y), -u_pos.x + (in_uv.x)); float angle = atan(-u_pos.y + (in_uv.y), -u_pos.x + (in_uv.x));
float t = (1.0 + sin(angle * u_frequency)) / 2.0; float t = (1.0 + sin(angle * u_frequency)) / 2.0;
if (u_thresholdEnabled) t = t > u_threshold ? 1.0 : 0.0; if (u_thresholdEnabled) t = t > u_threshold ? 1.0 : 0.0;
@ -40,6 +40,7 @@ export const FX_zoomLines = defineImageEffectorFx({
id: 'zoomLines' as const, id: 'zoomLines' as const,
name: i18n.ts._imageEffector._fxs.zoomLines, name: i18n.ts._imageEffector._fxs.zoomLines,
shader, shader,
uniforms: ['pos', 'frequency', 'thresholdEnabled', 'threshold', 'maskSize', 'black'] as const,
params: { params: {
x: { x: {
type: 'number' as const, type: 'number' as const,
@ -85,28 +86,12 @@ export const FX_zoomLines = defineImageEffectorFx({
default: false, default: false,
}, },
}, },
main: ({ gl, program, params, preTexture }) => { main: ({ gl, u, params }) => {
gl.activeTexture(gl.TEXTURE0); gl.uniform2f(u.pos, (1.0 + params.x) / 2.0, (1.0 + params.y) / 2.0);
gl.bindTexture(gl.TEXTURE_2D, preTexture); gl.uniform1f(u.frequency, params.frequency);
const u_texture = gl.getUniformLocation(program, 'u_texture'); gl.uniform1i(u.thresholdEnabled, params.thresholdEnabled ? 1 : 0);
gl.uniform1i(u_texture, 0); gl.uniform1f(u.threshold, params.threshold);
gl.uniform1f(u.maskSize, params.maskSize);
const u_pos = gl.getUniformLocation(program, 'u_pos'); gl.uniform1i(u.black, params.black ? 1 : 0);
gl.uniform2f(u_pos, (1.0 + params.x) / 2.0, (1.0 + params.y) / 2.0);
const u_frequency = gl.getUniformLocation(program, 'u_frequency');
gl.uniform1f(u_frequency, params.frequency);
const u_thresholdEnabled = gl.getUniformLocation(program, 'u_thresholdEnabled');
gl.uniform1i(u_thresholdEnabled, params.thresholdEnabled ? 1 : 0);
const u_threshold = gl.getUniformLocation(program, 'u_threshold');
gl.uniform1f(u_threshold, params.threshold);
const u_maskSize = gl.getUniformLocation(program, 'u_maskSize');
gl.uniform1f(u_maskSize, params.maskSize);
const u_black = gl.getUniformLocation(program, 'u_black');
gl.uniform1i(u_black, params.black ? 1 : 0);
}, },
}); });