-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (137 loc) · 5.85 KB
/
index.html
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!doctype html>
<html>
<head>
<title>FSAA techniques</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- Default Three.js stuff-->
<script src="vendor/three.js/three.min.js"></script>
<script src="vendor/three.js/Detector.js"></script>
<script src="vendor/three.js/stats.min.js"></script>
<!-- PostProcessing effect composer -->
<script src="vendor/three.js/postprocessing/CopyShader.js"></script>
<script src="vendor/three.js/postprocessing/EffectComposer.js"></script>
<script src="vendor/three.js/postprocessing/MaskPass.js"></script>
<script src="vendor/three.js/postprocessing/RenderPass.js"></script>
<script src="vendor/three.js/postprocessing/ShaderPass.js"></script>
<!-- THREEx.js utils-->
<script src="vendor/threex/THREEx.WindowResize.js"></script>
<script src="vendor/threex.dragpancontrols.js"></script>
<link href="css/main.css" rel="stylesheet"/>
</head>
<body>
<script id="DLAA_fs" type="x-shader/x-fragment">
//
// Directionally Localized Anti-Aliasing (DLAA)
// Original code by Dmitry Andreev
// Ported by José Enrique D'Arnaude
//
#define LD( o, dx, dy ) o = texture2D( tDiffuse, vUv + vec2( dx, dy ) * inverse_input_size );
uniform sampler2D tDiffuse;
uniform vec2 viewport;
varying vec2 vUv;
float GetIntensity( const vec3 rgb ) {
return dot( rgb, vec3( 0.33, 0.33, 0.33 ) );
}
void main() {
vec2 inverse_input_size = vec2( 1.0, 1.0 ) / viewport;
const float lambda = 3.0;
const float epsilon = 0.1;
//
// Short Edges
//
vec4 center, left_01, right_01, top_01, bottom_01;
// sample 5x5 cross
LD( center, 0, 0 )
LD( left_01, -1.5, 0 )
LD( right_01, 1.5, 0 )
LD( top_01, 0,-1.5 )
LD( bottom_01, 0, 1.5 )
vec4 w_h = 2.0 * ( left_01 + right_01 );
vec4 w_v = 2.0 * ( top_01 + bottom_01 );
// Softer (5-pixel wide high-pass)
vec4 edge_h = abs( w_h - 4.0 * center ) / 4.0;
vec4 edge_v = abs( w_v - 4.0 * center ) / 4.0;
vec4 blurred_h = ( w_h + 2.0 * center ) / 6.0;
vec4 blurred_v = ( w_v + 2.0 * center ) / 6.0;
float edge_h_lum = GetIntensity( edge_h.xyz );
float edge_v_lum = GetIntensity( edge_v.xyz );
float blurred_h_lum = GetIntensity( blurred_h.xyz );
float blurred_v_lum = GetIntensity( blurred_v.xyz );
float edge_mask_h = clamp( ( lambda * edge_h_lum - epsilon ) / blurred_v_lum, 0.0, 1.0 );
float edge_mask_v = clamp( ( lambda * edge_v_lum - epsilon ) / blurred_h_lum, 0.0, 1.0 );
vec4 clr = center;
clr = mix( clr, blurred_h, edge_mask_v );
clr = mix( clr, blurred_v, edge_mask_h * 0.5 ); // TFU2 uses 1.0f instead of 0.5f
//
// Long Edges
//
vec4 h0, h1, h2, h3, h4, h5, h6, h7;
vec4 v0, v1, v2, v3, v4, v5, v6, v7;
// sample 16x16 cross (sparse-sample on X360, incremental kernel update on SPUs)
LD( h0, 1.5, 0 ) LD( h1, 3.5, 0 ) LD( h2, 5.5, 0 ) LD( h3, 7.5, 0 ) LD( h4, -1.5,0 ) LD( h5, -3.5,0 ) LD( h6, -5.5,0 ) LD( h7, -7.5,0 )
LD( v0, 0, 1.5 ) LD( v1, 0, 3.5 ) LD( v2, 0, 5.5 ) LD( v3, 0, 7.5 ) LD( v4, 0,-1.5 ) LD( v5, 0,-3.5 ) LD( v6, 0,-5.5 ) LD( v7, 0,-7.5 )
float long_edge_mask_h = ( h0.a + h1.a + h2.a + h3.a + h4.a + h5.a + h6.a + h7.a ) / 8.0;
float long_edge_mask_v = ( v0.a + v1.a + v2.a + v3.a + v4.a + v5.a + v6.a + v7.a ) / 8.0;
long_edge_mask_h = clamp( long_edge_mask_h * 2.0 - 1.0, 0.0, 1.0);
long_edge_mask_v = clamp( long_edge_mask_v * 2.0 - 1.0, 0.0, 1.0 );
if ( abs( long_edge_mask_h - long_edge_mask_v ) > 0.2 ) {
vec4 left, right, top, bottom;
LD( left, -1, 0 )
LD( right, 1, 0 )
LD( top, 0, -1 )
LD( bottom, 0, 1 )
vec4 long_blurred_h = ( h0 + h1 + h2 + h3 + h4 + h5 + h6 + h7 ) / 8.0;
vec4 long_blurred_v = ( v0 + v1 + v2 + v3 + v4 + v5 + v6 + v7 ) / 8.0;
float lb_h_lum = GetIntensity( long_blurred_h.xyz );
float lb_v_lum = GetIntensity( long_blurred_v.xyz );
float center_lum = GetIntensity( center.xyz );
float left_lum = GetIntensity( left.xyz );
float right_lum = GetIntensity( right.xyz );
float top_lum = GetIntensity( top.xyz );
float bottom_lum = GetIntensity( bottom.xyz );
vec4 clr_v = center;
vec4 clr_h = center;
// vectorized search
float hx = clamp( 0.0 + ( lb_h_lum - top_lum ) / ( center_lum - top_lum ), 0.0, 1.0 );
float hy = clamp( 1.0 + ( lb_h_lum - center_lum ) / ( center_lum - bottom_lum ), 0.0, 1.0 );
float vx = clamp( 0.0 + ( lb_v_lum - left_lum ) / ( center_lum - left_lum ), 0.0, 1.0 );
float vy = clamp( 1.0 + ( lb_v_lum - center_lum ) / ( center_lum - right_lum ), 0.0, 1.0 );
vec4 vhxy = vec4( vx, vy, hx, hy );
vhxy = vhxy == vec4( 0, 0, 0, 0 ) ? vec4( 1, 1, 1, 1 ) : vhxy;
clr_v = mix( left , clr_v, vhxy.x );
clr_v = mix( right , clr_v, vhxy.y );
clr_h = mix( top , clr_h, vhxy.z );
clr_h = mix( bottom, clr_h, vhxy.w );
clr = mix( clr, clr_v, long_edge_mask_v );
clr = mix( clr, clr_h, long_edge_mask_h );
}
gl_FragColor = clr;
}
</script>
<script id="Screen_fs" type="x-shader/x-fragment">
varying vec2 vUv;
uniform sampler2D tDiffuse;
void main() {
gl_FragColor = texture2D( tDiffuse, vUv );
}
</script>
<script id="Default_vs" type="x-shader/x-vertex">
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
<!-- three.js container -->
<div id="container"></div>
<!-- info on screen display -->
<div id="info">
<div class="top">
FSAA techniques by
<a href="http://www.yetanother.me/" target="_blank">@jedarnaude</a>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>