148 lines
3.7 KiB
TypeScript
148 lines
3.7 KiB
TypeScript
/*
|
|
* SPDX-FileCopyrightText: syuilo and misskey-project
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
|
|
import { defineImageEffectorFx } from '../ImageEffector.js';
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
const shader = `#version 300 es
|
|
precision mediump float;
|
|
|
|
const float PI = 3.141592653589793;
|
|
const float TWO_PI = 6.283185307179586;
|
|
const float HALF_PI = 1.5707963267948966;
|
|
|
|
in vec2 in_uv;
|
|
uniform sampler2D in_texture;
|
|
uniform vec2 in_resolution;
|
|
uniform vec2 u_offset;
|
|
uniform vec2 u_scale;
|
|
uniform bool u_ellipse;
|
|
uniform float u_angle;
|
|
uniform int u_samples;
|
|
uniform float u_strength;
|
|
out vec4 out_color;
|
|
|
|
// TODO: pixelateの中心を画像中心ではなく範囲の中心にする
|
|
// TODO: 画像のアスペクト比に関わらず各画素は正方形にする
|
|
|
|
void main() {
|
|
if (u_strength <= 0.0) {
|
|
out_color = texture(in_texture, in_uv);
|
|
return;
|
|
}
|
|
|
|
float angle = -(u_angle * PI);
|
|
vec2 centeredUv = in_uv - vec2(0.5, 0.5) - u_offset;
|
|
vec2 rotatedUV = vec2(
|
|
centeredUv.x * cos(angle) - centeredUv.y * sin(angle),
|
|
centeredUv.x * sin(angle) + centeredUv.y * cos(angle)
|
|
) + u_offset;
|
|
|
|
bool isInside = false;
|
|
if (u_ellipse) {
|
|
vec2 norm = (rotatedUV - u_offset) / u_scale;
|
|
isInside = dot(norm, norm) <= 1.0;
|
|
} else {
|
|
isInside = rotatedUV.x > u_offset.x - u_scale.x && rotatedUV.x < u_offset.x + u_scale.x && rotatedUV.y > u_offset.y - u_scale.y && rotatedUV.y < u_offset.y + u_scale.y;
|
|
}
|
|
|
|
if (!isInside) {
|
|
out_color = texture(in_texture, in_uv);
|
|
return;
|
|
}
|
|
|
|
float dx = u_strength / 1.0;
|
|
float dy = u_strength / 1.0;
|
|
vec2 new_uv = vec2(
|
|
(dx * (floor((in_uv.x - 0.5 - (dx / 2.0)) / dx) + 0.5)),
|
|
(dy * (floor((in_uv.y - 0.5 - (dy / 2.0)) / dy) + 0.5))
|
|
) + vec2(0.5 + (dx / 2.0), 0.5 + (dy / 2.0));
|
|
|
|
vec4 result = vec4(0.0);
|
|
float totalSamples = 0.0;
|
|
|
|
// TODO: より多くのサンプリング
|
|
result += texture(in_texture, new_uv);
|
|
totalSamples += 1.0;
|
|
|
|
out_color = totalSamples > 0.0 ? result / totalSamples : texture(in_texture, in_uv);
|
|
}
|
|
`;
|
|
|
|
export const FX_pixelate = defineImageEffectorFx({
|
|
id: 'pixelate',
|
|
name: i18n.ts._imageEffector._fxs.pixelate,
|
|
shader,
|
|
uniforms: ['offset', 'scale', 'ellipse', 'angle', 'strength', 'samples'] as const,
|
|
params: {
|
|
offsetX: {
|
|
label: i18n.ts._imageEffector._fxProps.offset + ' X',
|
|
type: 'number',
|
|
default: 0.0,
|
|
min: -1.0,
|
|
max: 1.0,
|
|
step: 0.01,
|
|
toViewValue: v => Math.round(v * 100) + '%',
|
|
},
|
|
offsetY: {
|
|
label: i18n.ts._imageEffector._fxProps.offset + ' Y',
|
|
type: 'number',
|
|
default: 0.0,
|
|
min: -1.0,
|
|
max: 1.0,
|
|
step: 0.01,
|
|
toViewValue: v => Math.round(v * 100) + '%',
|
|
},
|
|
scaleX: {
|
|
label: i18n.ts._imageEffector._fxProps.scale + ' W',
|
|
type: 'number',
|
|
default: 0.5,
|
|
min: 0.0,
|
|
max: 1.0,
|
|
step: 0.01,
|
|
toViewValue: v => Math.round(v * 100) + '%',
|
|
},
|
|
scaleY: {
|
|
label: i18n.ts._imageEffector._fxProps.scale + ' H',
|
|
type: 'number',
|
|
default: 0.5,
|
|
min: 0.0,
|
|
max: 1.0,
|
|
step: 0.01,
|
|
toViewValue: v => Math.round(v * 100) + '%',
|
|
},
|
|
ellipse: {
|
|
label: i18n.ts._imageEffector._fxProps.circle,
|
|
type: 'boolean',
|
|
default: false,
|
|
},
|
|
angle: {
|
|
label: i18n.ts._imageEffector._fxProps.angle,
|
|
type: 'number',
|
|
default: 0,
|
|
min: -1.0,
|
|
max: 1.0,
|
|
step: 0.01,
|
|
toViewValue: v => Math.round(v * 90) + '°',
|
|
},
|
|
strength: {
|
|
label: i18n.ts._imageEffector._fxProps.strength,
|
|
type: 'number',
|
|
default: 0.2,
|
|
min: 0.0,
|
|
max: 0.5,
|
|
step: 0.01,
|
|
},
|
|
},
|
|
main: ({ gl, u, params }) => {
|
|
gl.uniform2f(u.offset, params.offsetX / 2, params.offsetY / 2);
|
|
gl.uniform2f(u.scale, params.scaleX / 2, params.scaleY / 2);
|
|
gl.uniform1i(u.ellipse, params.ellipse ? 1 : 0);
|
|
gl.uniform1f(u.angle, params.angle / 2);
|
|
gl.uniform1f(u.strength, params.strength * params.strength);
|
|
gl.uniform1i(u.samples, 256);
|
|
},
|
|
});
|