From 2d2b9e7a3fb79833cab789e032f16232a22548c8 Mon Sep 17 00:00:00 2001 From: syuilo <4439005+syuilo@users.noreply.github.com> Date: Fri, 30 May 2025 10:37:04 +0900 Subject: [PATCH] wip --- .../utility/image-effector/ImageEffector.ts | 22 +++++--- .../image-effector/fxs/chromaticAberration.ts | 27 ++++----- .../utility/image-effector/fxs/colorClamp.ts | 21 +++---- .../image-effector/fxs/colorClampAdvanced.ts | 37 ++++--------- .../src/utility/image-effector/fxs/distort.ts | 31 ++++------- .../src/utility/image-effector/fxs/glitch.ts | 27 ++++----- .../utility/image-effector/fxs/grayscale.ts | 13 ++--- .../src/utility/image-effector/fxs/invert.ts | 35 +++--------- .../src/utility/image-effector/fxs/mirror.ts | 21 +++---- .../utility/image-effector/fxs/threshold.ts | 25 +++------ .../image-effector/fxs/watermarkPlacement.ts | 55 ++++++------------- .../utility/image-effector/fxs/zoomLines.ts | 37 ++++--------- 12 files changed, 118 insertions(+), 233 deletions(-) diff --git a/packages/frontend/src/utility/image-effector/ImageEffector.ts b/packages/frontend/src/utility/image-effector/ImageEffector.ts index ce6bdef273..c75a0270b0 100644 --- a/packages/frontend/src/utility/image-effector/ImageEffector.ts +++ b/packages/frontend/src/utility/image-effector/ImageEffector.ts @@ -18,14 +18,15 @@ type ImageEffectorFxParamDefs = Record; -export function defineImageEffectorFx(fx: ImageEffectorFx) { +export function defineImageEffectorFx(fx: ImageEffectorFx) { return fx; } -export type ImageEffectorFx = { +export type ImageEffectorFx = { id: ID; name: string; shader: string; + uniforms: U; params: P, main: (ctx: { gl: WebGL2RenderingContext; @@ -33,7 +34,7 @@ export type ImageEffectorFx; width: number; height: number; watermark?: { @@ -69,7 +70,7 @@ export class ImageEffector { private shaderCache: Map = new Map(); private perLayerResultTextures: Map = new Map(); private perLayerResultFrameBuffers: Map = new Map(); - private fxs: ImageEffectorFx[]; + private fxs: ImageEffectorFx[]; constructor(options: { canvas: HTMLCanvasElement; @@ -77,7 +78,7 @@ export class ImageEffector { height: number; originalImage: ImageData | ImageBitmap | HTMLImageElement | HTMLCanvasElement; layers: ImageEffectorLayer[]; - fxs: ImageEffectorFx[]; + fxs: ImageEffectorFx[]; }) { this.canvas = options.canvas; this.canvas.width = options.width; @@ -332,8 +333,13 @@ export class ImageEffector { gl.useProgram(shaderProgram); - const u_resolution = gl.getUniformLocation(shaderProgram, 'u_resolution'); - gl.uniform2fv(u_resolution, [this.renderWidth, this.renderHeight]); + const in_resolution = gl.getUniformLocation(shaderProgram, 'in_resolution'); + 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({ gl: gl, @@ -343,7 +349,7 @@ export class ImageEffector { return [key, layer.params[key] ?? param.default]; }), ) as any, - preTexture: preTexture, + u: Object.fromEntries(fx.uniforms.map(u => [u, gl.getUniformLocation(shaderProgram, 'u_' + u)!])), width: this.renderWidth, height: this.renderHeight, watermark: watermark, diff --git a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts b/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts index 09109ac79f..82d7d883aa 100644 --- a/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts +++ b/packages/frontend/src/utility/image-effector/fxs/chromaticAberration.ts @@ -10,8 +10,8 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; out vec4 out_color; uniform float u_amount; uniform float u_start; @@ -23,7 +23,7 @@ void main() { float g_strength = 1.5; 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); float normalisedValue = length((in_uv - 0.5) * 2.0); @@ -37,13 +37,13 @@ void main() { vec2 bOffset = -vector * strength * (u_amount * b_strength); 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); - accumulator.g += texture(u_texture, in_uv + gOffset).g; + accumulator.g += texture(in_texture, in_uv + gOffset).g; 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); } @@ -55,6 +55,7 @@ export const FX_chromaticAberration = defineImageEffectorFx({ id: 'chromaticAberration' as const, name: i18n.ts._imageEffector._fxs.chromaticAberration, shader, + uniforms: ['amount', 'start', 'normalize'] as const, params: { normalize: { type: 'boolean' as const, @@ -68,16 +69,8 @@ export const FX_chromaticAberration = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - 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); + main: ({ gl, u, params }) => { + gl.uniform1f(u.amount, params.amount); + gl.uniform1i(u.normalize, params.normalize ? 1 : 0); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts b/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts index 5cc13d7900..5393d73df0 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts +++ b/packages/frontend/src/utility/image-effector/fxs/colorClamp.ts @@ -10,14 +10,14 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform float u_max; uniform float u_min; out vec4 out_color; 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 g = min(max(in_color.g, 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, name: i18n.ts._imageEffector._fxs.colorClamp, shader, + uniforms: ['max', 'min'] as const, params: { max: { type: 'number' as const, @@ -45,16 +46,8 @@ export const FX_colorClamp = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - 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); + main: ({ gl, u, params }) => { + gl.uniform1f(u.max, params.max); + gl.uniform1f(u.min, 1.0 + params.min); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts index 80b5b9f37e..c66d75a83f 100644 --- a/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts +++ b/packages/frontend/src/utility/image-effector/fxs/colorClampAdvanced.ts @@ -10,8 +10,8 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform float u_rMax; uniform float u_rMin; uniform float u_gMax; @@ -21,7 +21,7 @@ uniform float u_bMin; out vec4 out_color; 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 g = min(max(in_color.g, u_gMin), u_gMax); float b = min(max(in_color.b, u_bMin), u_bMax); @@ -33,6 +33,7 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({ id: 'colorClampAdvanced' as const, name: i18n.ts._imageEffector._fxs.colorClampAdvanced, shader, + uniforms: ['rMax', 'rMin', 'gMax', 'gMin', 'bMax', 'bMin'] as const, params: { rMax: { type: 'number' as const, @@ -77,28 +78,12 @@ export const FX_colorClampAdvanced = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - const u_texture = gl.getUniformLocation(program, 'u_texture'); - gl.uniform1i(u_texture, 0); - - const u_rMax = gl.getUniformLocation(program, 'u_rMax'); - 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); + main: ({ gl, u, params }) => { + gl.uniform1f(u.rMax, params.rMax); + gl.uniform1f(u.rMin, 1.0 + params.rMin); + gl.uniform1f(u.gMax, params.gMax); + gl.uniform1f(u.gMin, 1.0 + params.gMin); + gl.uniform1f(u.bMax, params.bMax); + gl.uniform1f(u.bMin, 1.0 + params.bMin); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/distort.ts b/packages/frontend/src/utility/image-effector/fxs/distort.ts index 03f6c2bddb..f91287c038 100644 --- a/packages/frontend/src/utility/image-effector/fxs/distort.ts +++ b/packages/frontend/src/utility/image-effector/fxs/distort.ts @@ -10,8 +10,8 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform float u_phase; uniform float u_frequency; 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.x * u_frequency) * u_strength; vec4 in_color = u_direction == 0 ? - texture(u_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 + v, in_uv.y)) : + texture(in_texture, vec2(in_uv.x, in_uv.y + v)); out_color = in_color; } `; @@ -33,6 +33,7 @@ export const FX_distort = defineImageEffectorFx({ id: 'distort' as const, name: i18n.ts._imageEffector._fxs.distort, shader, + uniforms: ['phase', 'frequency', 'strength', 'direction'] as const, params: { direction: { type: 'number:enum' as const, @@ -61,22 +62,10 @@ export const FX_distort = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - const u_texture = gl.getUniformLocation(program, 'u_texture'); - gl.uniform1i(u_texture, 0); - - 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); + main: ({ gl, u, params }) => { + gl.uniform1f(u.phase, params.phase / 10); + gl.uniform1f(u.frequency, params.frequency); + gl.uniform1f(u.strength, params.strength); + gl.uniform1i(u.direction, params.direction); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/glitch.ts b/packages/frontend/src/utility/image-effector/fxs/glitch.ts index b6a26b2a8a..e4939a4302 100644 --- a/packages/frontend/src/utility/image-effector/fxs/glitch.ts +++ b/packages/frontend/src/utility/image-effector/fxs/glitch.ts @@ -11,8 +11,8 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform int u_amount; uniform float u_shiftStrengths[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 g = texture(u_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 a = texture(u_texture, vec2(in_uv.x + v, in_uv.y)).a; + float r = texture(in_texture, vec2(in_uv.x + (v * (1.0 + u_channelShift)), in_uv.y)).r; + float g = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).g; + float b = texture(in_texture, vec2(in_uv.x + (v * (1.0 + (u_channelShift / 2.0))), in_uv.y)).b; + float a = texture(in_texture, vec2(in_uv.x + v, in_uv.y)).a; out_color = vec4(r, g, b, a); } `; @@ -41,6 +41,7 @@ export const FX_glitch = defineImageEffectorFx({ id: 'glitch' as const, name: i18n.ts._imageEffector._fxs.glitch, shader, + uniforms: ['amount', 'channelShift'] as const, params: { amount: { type: 'number' as const, @@ -75,17 +76,9 @@ export const FX_glitch = defineImageEffectorFx({ default: 100, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - 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); + main: ({ gl, program, u, params }) => { + gl.uniform1i(u.amount, params.amount); + gl.uniform1f(u.channelShift, params.channelShift); const rnd = seedrandom(params.seed.toString()); diff --git a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts b/packages/frontend/src/utility/image-effector/fxs/grayscale.ts index b398712781..8f33706ae7 100644 --- a/packages/frontend/src/utility/image-effector/fxs/grayscale.ts +++ b/packages/frontend/src/utility/image-effector/fxs/grayscale.ts @@ -10,8 +10,8 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; out vec4 out_color; float getBrightness(vec4 color) { @@ -19,7 +19,7 @@ float getBrightness(vec4 color) { } void main() { - vec4 in_color = texture(u_texture, in_uv); + vec4 in_color = texture(in_texture, in_uv); float brightness = getBrightness(in_color); out_color = vec4(brightness, brightness, brightness, in_color.a); } @@ -29,12 +29,9 @@ export const FX_grayscale = defineImageEffectorFx({ id: 'grayscale' as const, name: i18n.ts._imageEffector._fxs.grayscale, shader, + uniforms: [] as const, params: { }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - const u_texture = gl.getUniformLocation(program, 'u_texture'); - gl.uniform1i(u_texture, 0); + main: ({ gl, params }) => { }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/invert.ts b/packages/frontend/src/utility/image-effector/fxs/invert.ts index 52fb093622..220a2dea30 100644 --- a/packages/frontend/src/utility/image-effector/fxs/invert.ts +++ b/packages/frontend/src/utility/image-effector/fxs/invert.ts @@ -10,20 +10,19 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform bool u_r; uniform bool u_g; uniform bool u_b; -uniform bool u_a; out vec4 out_color; 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.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.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, name: i18n.ts._imageEffector._fxs.invert, shader, + uniforms: ['r', 'g', 'b'] as const, params: { r: { type: 'boolean' as const, @@ -44,27 +44,10 @@ export const FX_invert = defineImageEffectorFx({ type: 'boolean' as const, default: true, }, - a: { - type: 'boolean' as const, - default: false, - }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - const u_texture = gl.getUniformLocation(program, 'u_texture'); - 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); + main: ({ gl, u, params }) => { + gl.uniform1i(u.r, params.r ? 1 : 0); + gl.uniform1i(u.g, params.g ? 1 : 0); + gl.uniform1i(u.b, params.b ? 1 : 0); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/mirror.ts b/packages/frontend/src/utility/image-effector/fxs/mirror.ts index 6d273073d4..5946a2e0dc 100644 --- a/packages/frontend/src/utility/image-effector/fxs/mirror.ts +++ b/packages/frontend/src/utility/image-effector/fxs/mirror.ts @@ -10,8 +10,8 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform int u_h; uniform int u_v; out vec4 out_color; @@ -30,7 +30,7 @@ void main() { if (u_v == 1 && in_uv.y < 0.5) { 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, name: i18n.ts._imageEffector._fxs.mirror, shader, + uniforms: ['h', 'v'] as const, params: { h: { type: 'number:enum' as const, @@ -50,16 +51,8 @@ export const FX_mirror = defineImageEffectorFx({ default: 0, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - 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); + main: ({ gl, u, params }) => { + gl.uniform1i(u.h, params.h); + gl.uniform1i(u.v, params.v); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/threshold.ts b/packages/frontend/src/utility/image-effector/fxs/threshold.ts index 5702538689..f2b8b107fd 100644 --- a/packages/frontend/src/utility/image-effector/fxs/threshold.ts +++ b/packages/frontend/src/utility/image-effector/fxs/threshold.ts @@ -10,15 +10,15 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform float u_r; uniform float u_g; uniform float u_b; out vec4 out_color; 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 g = in_color.g < u_g ? 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, name: i18n.ts._imageEffector._fxs.threshold, shader, + uniforms: ['r', 'g', 'b'] as const, params: { r: { type: 'number' as const, @@ -53,19 +54,9 @@ export const FX_threshold = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - const u_texture = gl.getUniformLocation(program, 'u_texture'); - 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); + main: ({ gl, u, params }) => { + gl.uniform1f(u.r, params.r); + gl.uniform1f(u.g, params.g); + gl.uniform1f(u.b, params.b); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts index 9f500aea83..5603b45d4b 100644 --- a/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts +++ b/packages/frontend/src/utility/image-effector/fxs/watermarkPlacement.ts @@ -9,9 +9,9 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture_src; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform sampler2D u_texture_watermark; -uniform vec2 u_resolution_src; uniform vec2 u_resolution_watermark; uniform float u_scale; uniform float u_angle; @@ -23,12 +23,12 @@ uniform int u_fitMode; // 0: contain, 1: cover out vec4 out_color; void main() { - vec4 in_color = texture(u_texture_src, in_uv); + vec4 in_color = texture(in_texture, in_uv); bool contain = u_fitMode == 0; - float x_ratio = u_resolution_watermark.x / u_resolution_src.x; - float y_ratio = u_resolution_watermark.y / u_resolution_src.y; + float x_ratio = u_resolution_watermark.x / in_resolution.x; + float y_ratio = u_resolution_watermark.y / in_resolution.y; float aspect_ratio = contain ? (min(x_ratio, y_ratio) / max(x_ratio, y_ratio)) : @@ -70,6 +70,7 @@ export const FX_watermarkPlacement = defineImageEffectorFx({ id: 'watermarkPlacement' as const, name: '(internal)', shader, + uniforms: ['texture_watermark', 'resolution_watermark', 'scale', 'angle', 'opacity', 'repeat', 'alignX', 'alignY', 'fitMode'] as const, params: { cover: { type: 'boolean' as const, @@ -98,46 +99,22 @@ export const FX_watermarkPlacement = defineImageEffectorFx({ step: 0.01, }, }, - main: ({ gl, program, params, preTexture, width, height, watermark }) => { + main: ({ gl, u, params, watermark }) => { if (watermark == null) { 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.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_src, [width, height]); - - const u_resolution_watermark = gl.getUniformLocation(program, 'u_resolution_watermark'); - gl.uniform2fv(u_resolution_watermark, [watermark.width, watermark.height]); - - const u_scale = gl.getUniformLocation(program, 'u_scale'); - gl.uniform1f(u_scale, params.scale); - - 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); + gl.uniform2fv(u.resolution_watermark, [watermark.width, watermark.height]); + gl.uniform1f(u.scale, params.scale); + gl.uniform1f(u.opacity, params.opacity); + gl.uniform1f(u.angle, 0.0); + gl.uniform1i(u.repeat, params.repeat ? 1 : 0); + gl.uniform1i(u.alignX, params.align.x === 'left' ? 0 : params.align.x === 'right' ? 2 : 1); + gl.uniform1i(u.alignY, params.align.y === 'top' ? 0 : params.align.y === 'bottom' ? 2 : 1); + gl.uniform1i(u.fitMode, params.cover ? 1 : 0); }, }); diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts index 7944c5bd9f..d33c2f0c8d 100644 --- a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts +++ b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts @@ -10,8 +10,8 @@ const shader = `#version 300 es precision mediump float; in vec2 in_uv; -uniform sampler2D u_texture; -uniform vec2 u_resolution; +uniform sampler2D in_texture; +uniform vec2 in_resolution; uniform vec2 u_pos; uniform float u_frequency; uniform bool u_thresholdEnabled; @@ -21,7 +21,7 @@ uniform bool u_black; out vec4 out_color; 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 t = (1.0 + sin(angle * u_frequency)) / 2.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, name: i18n.ts._imageEffector._fxs.zoomLines, shader, + uniforms: ['pos', 'frequency', 'thresholdEnabled', 'threshold', 'maskSize', 'black'] as const, params: { x: { type: 'number' as const, @@ -85,28 +86,12 @@ export const FX_zoomLines = defineImageEffectorFx({ default: false, }, }, - main: ({ gl, program, params, preTexture }) => { - gl.activeTexture(gl.TEXTURE0); - gl.bindTexture(gl.TEXTURE_2D, preTexture); - const u_texture = gl.getUniformLocation(program, 'u_texture'); - gl.uniform1i(u_texture, 0); - - const u_pos = gl.getUniformLocation(program, 'u_pos'); - 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); + main: ({ gl, u, params }) => { + gl.uniform2f(u.pos, (1.0 + params.x) / 2.0, (1.0 + params.y) / 2.0); + gl.uniform1f(u.frequency, params.frequency); + gl.uniform1i(u.thresholdEnabled, params.thresholdEnabled ? 1 : 0); + gl.uniform1f(u.threshold, params.threshold); + gl.uniform1f(u.maskSize, params.maskSize); + gl.uniform1i(u.black, params.black ? 1 : 0); }, });