1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-21 13:25:45 +02:00

enhance(frontend): improve zoomLines image effect

This commit is contained in:
syuilo
2025-09-27 18:46:26 +09:00
parent c5f9c0ce5c
commit 225154d76d
3 changed files with 113 additions and 9 deletions

View File

@@ -4,11 +4,14 @@
*/
import { defineImageEffectorFx } from '../ImageEffector.js';
import { GLSL_LIB_SNOISE } from '@/utility/webgl.js';
import { i18n } from '@/i18n.js';
const shader = `#version 300 es
precision mediump float;
${GLSL_LIB_SNOISE}
in vec2 in_uv;
uniform sampler2D in_texture;
uniform vec2 in_resolution;
@@ -22,10 +25,22 @@ out vec4 out_color;
void main() {
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;
vec2 centeredUv = (in_uv - vec2(0.5, 0.5));
vec2 uv = centeredUv;
float seed = 1.0;
float time = 0.0;
vec2 noiseUV = (uv - u_pos) / distance((uv - u_pos), vec2(0.0));
float noiseX = (noiseUV.x + seed) * u_frequency;
float noiseY = (noiseUV.y + seed) * u_frequency;
float noise = (1.0 + snoise(vec3(noiseX, noiseY, time))) / 2.0;
float t = noise;
if (u_thresholdEnabled) t = t < u_threshold ? 1.0 : 0.0;
float d = distance(in_uv * vec2(2.0, 2.0), u_pos * vec2(2.0, 2.0));
// TODO: マスクの形自体も揺らぎを与える
float d = distance(uv * vec2(2.0, 2.0), u_pos * vec2(2.0, 2.0));
float mask = d < u_maskSize ? 0.0 : ((d - u_maskSize) * (1.0 + (u_maskSize * 2.0)));
out_color = vec4(
mix(in_color.r, u_black ? 0.0 : 1.0, t * mask),
@@ -61,9 +76,9 @@ export const FX_zoomLines = defineImageEffectorFx({
frequency: {
label: i18n.ts._imageEffector._fxProps.frequency,
type: 'number',
default: 30.0,
min: 1.0,
max: 200.0,
default: 5.0,
min: 0.0,
max: 15.0,
step: 0.1,
},
smoothing: {
@@ -75,7 +90,7 @@ export const FX_zoomLines = defineImageEffectorFx({
threshold: {
label: i18n.ts._imageEffector._fxProps.zoomLinesThreshold,
type: 'number',
default: 0.2,
default: 0.5,
min: 0.0,
max: 1.0,
step: 0.01,
@@ -95,8 +110,8 @@ export const FX_zoomLines = defineImageEffectorFx({
},
},
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.uniform2f(u.pos, params.x / 2, params.y / 2);
gl.uniform1f(u.frequency, params.frequency * params.frequency);
// thresholdの調整が有効な間はsmoothingが利用できない
gl.uniform1i(u.thresholdEnabled, params.smoothing ? 0 : 1);
gl.uniform1f(u.threshold, params.threshold);