diff --git a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts index 6bcd17e573..1d5bf17b2e 100644 --- a/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts +++ b/packages/frontend/src/utility/image-effector/fxs/zoomLines.ts @@ -13,17 +13,23 @@ in vec2 in_uv; uniform sampler2D u_texture; uniform vec2 u_resolution; uniform vec2 u_pos; -uniform float frequency; +uniform float u_frequency; +uniform bool u_thresholdEnabled; +uniform float u_threshold; +uniform float u_maskSize; +uniform bool u_black; out vec4 out_color; void main() { vec4 in_color = texture(u_texture, in_uv); - float t = atan(u_pos.y + (in_uv.y - 0.5), u_pos.x + (in_uv.x - 0.5)); - t = sin(t * frequency); + 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; + float mask = distance(in_uv / u_maskSize, u_pos / u_maskSize); out_color = vec4( - mix(in_color.r, 1.0, t), - mix(in_color.g, 1.0, t), - mix(in_color.b, 1.0, t), + mix(in_color.r, u_black ? 0.0 : 1.0, t * mask), + mix(in_color.g, u_black ? 0.0 : 1.0, t * mask), + mix(in_color.b, u_black ? 0.0 : 1.0, t * mask), in_color.a ); } @@ -55,6 +61,28 @@ export const FX_zoomLines = defineImageEffectorFx({ max: 200.0, step: 0.1, }, + thresholdEnabled: { + type: 'boolean' as const, + default: true, + }, + threshold: { + type: 'number' as const, + default: 0.5, + min: 0.0, + max: 1.0, + step: 0.01, + }, + maskSize: { + type: 'number' as const, + default: 0.5, + min: 0.0, + max: 1.0, + step: 0.01, + }, + black: { + type: 'boolean' as const, + default: false, + }, }, main: ({ gl, program, params, preTexture }) => { gl.activeTexture(gl.TEXTURE0); @@ -63,9 +91,21 @@ export const FX_zoomLines = defineImageEffectorFx({ gl.uniform1i(u_texture, 0); const u_pos = gl.getUniformLocation(program, 'u_pos'); - gl.uniform2f(u_pos, -(params.x / 2.0), -(params.y / 2.0)); + gl.uniform2f(u_pos, (1.0 + params.x) / 2.0, (1.0 + params.y) / 2.0); - const u_frequency = gl.getUniformLocation(program, 'frequency'); + 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); }, });