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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
"use strict"
define.class('$ui/view', function(require, $ui$, view){
this.attributes = {
k0: Config({type: float, value:1.0}),
k1: Config({type: float, value:1.0}),
k2: Config({type: float, value:1.0}),
k3: Config({type: float, value:1.0}),
k4: Config({type: float, value:1.0}),
k5: Config({type: float, value:1.0}),
k6: Config({type: float, value:1.0}),
k7: Config({type: float, value:1.0}),
k8: Config({type: float, value:1.0}),
k9: Config({type: float, value:1.0}),
k10: Config({type: float, value:1.0}),
filterlength: Config({type: int, value:3}),
filterscaling: Config({type: float, value:1.0}),
blurradius: 2.
}
this.buildKernel = function() {
var sigma = 0.5 * this.blurradius;
var radius = Math.floor(this.blurradius);
if (radius < 1) radius = 1;
if (radius > 10) radius = 10;
var kernel = [];
var scaling = 1.0 / (Math.sqrt(2 * Math.PI) * sigma);
var sum = 0.0;
for (var x=0; x<radius+1; x++) {
var g = Math.exp(-x*x/(2 * sigma * sigma)) * scaling;
sum += g;
if (x > 0) sum += g;
kernel.push(g);
}
for (var i=0; i<kernel.length; i++) {
kernel[i] = kernel[i] / sum;
}
this.filterscaling = 1.0;
this.filterlength = 2 * radius + 1;
this.k0 = kernel[0];
this.k1 = kernel[1];
this.k2 = kernel[2];
this.k3 = kernel[3];
this.k4 = kernel[4];
this.k5 = kernel[5];
this.k6 = kernel[6];
this.k7 = kernel[7];
this.k8 = kernel[8];
this.k9 = kernel[9];
this.k10 = kernel[10];
}
this.atConstructor = function() {
this.buildKernel();
}
this.onblurradius = function(ev,v,o) {
this.buildKernel();
}
this.passes = 2
this.overflow = 'hidden'
var blurview = this.constructor;
this.constructor.examples = {
Usage: function () {
return [
blurview({
height:100,
width:100,
blurradius:50,
bgimage:"$resources/textures/landscape.jpg"
})
]
}
}
define.class(this, "Gaussian1D", this.RenderPass, function() {
this.spacing = vec2(1, 0)
this.color = function() {
var col = this.framebuffer.conv1d(mesh.xy, view.filterlength, view.filterscaling, this.spacing, view.k0, view.k1, view.k1, view.k2, view.k2, view.k3, view.k3, view.k4, view.k4, view.k5, view.k5, view.k6, view.k6, view.k7, view.k7, view.k8, view.k8, view.k9, view.k9, view.k10, view.k10)
return vec4(col.rgb, col.a * view.opacity)
}
})
define.class(this, "pass0", this.Gaussian1D, function() {
this.atConstructor = function(view) {
this.spacing = vec2(1.0, 0)
}
})
define.class(this, "pass1", this.Gaussian1D, function() {
this.atConstructor = function(view) {
this.spacing = vec2(0, 1.0)
}
this.color = function() {
var col = this.pass0.conv1d(mesh.xy, view.filterlength, view.filterscaling, this.spacing, view.k0, view.k1, view.k1, view.k2, view.k2, view.k3, view.k3, view.k4, view.k4, view.k5, view.k5, view.k6, view.k6, view.k7, view.k7, view.k8, view.k8, view.k9, view.k9, view.k10, view.k10)
return vec4(col.rgb, col.a * view.opacity)
}
})
})
|