1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import type { EffectDefinition } from "@/types/effects";
import blurFragmentShader from "./blur.frag.glsl";
export const blurEffectDefinition: EffectDefinition = {
type: "blur",
name: "Blur",
keywords: ["blur", "soft", "defocus"],
params: [
{
key: "intensity",
label: "Intensity",
type: "number",
default: 15,
min: 0,
max: 100,
step: 1,
},
],
renderer: {
type: "webgl",
passes: [
{
fragmentShader: blurFragmentShader,
uniforms: ({ effectParams }) => {
const intensity =
typeof effectParams.intensity === "number"
? effectParams.intensity
: Number.parseFloat(String(effectParams.intensity));
return {
u_sigma: Math.max(intensity / 5, 0.001),
u_direction: [1, 0],
};
},
},
{
fragmentShader: blurFragmentShader,
uniforms: ({ effectParams }) => {
const intensity =
typeof effectParams.intensity === "number"
? effectParams.intensity
: Number.parseFloat(String(effectParams.intensity));
return {
u_sigma: Math.max(intensity / 5, 0.001),
u_direction: [0, 1],
};
},
},
],
},
};
|
