forked from calumr/flurry
-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
140 lines (116 loc) · 5.23 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
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<title>Flurry for WebGL</title>
<link href="css/index.css" rel="stylesheet"/>
<!-- Courtesy of http://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="57x57" href="res/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="res/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="res/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="res/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="res/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="res/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="res/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="res/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="res/apple-touch-icon-180x180.png">
<meta name="apple-mobile-web-app-title" content="Flurry">
<link rel="icon" type="image/png" href="res/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="res/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="res/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="res/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="res/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="application-name" content="Flurry">
</head>
<body>
<canvas id="renderer" class="uiVisible"></canvas>
</body>
<shaders>
<!-- These are very basic shaders; perhaps the closest to legacy fixed-function
OpenGL shading.
All the vertex shader is concerned about is applying the typical projection
matricies and passing on the color and UV arrays to the fragment shader.
All the fragment shader is concerned about is drawing each quad's spotlight
texture, according to a given color and alpha value for each point. It also
handles coloring the full-screen quad that fades all previously drawn
elements by being drawn in a single translucent color.
-->
<script id="vertexShader" type="x-shader/x-vertex">
precision highp float;
precision highp int;
attribute vec2 position;
attribute vec4 color;
attribute vec2 uv;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec4 vColor;
varying vec2 vUv;
void main()
{
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 0, 1.0);
vColor = color;
vUv = uv;
}
</script>
<script id="fragShader" type="x-shader/x-fragment">
precision highp float;
precision highp int;
varying vec4 vColor;
varying vec2 vUv;
uniform bool drawingRect;
uniform sampler2D uSampler;
void main()
{
if (drawingRect)
gl_FragColor = vColor;
else
{
vec4 texel = texture2D(uSampler, vec2(vUv.s, vUv.t));
gl_FragColor = vec4(texel) * vColor;
if (gl_FragColor.a < 0.0)
discard;
}
}
</script>
</shaders>
<scripts>
<!-- gl-matrix is used for matrix operations, such as creating blank ones -->
<script src="js/vendor/gl-matrix-2.1.0.js"></script>
<!-- dat.gui provides the floating GUI for setting changing and presets -->
<script src="js/vendor/dat.gui-0.5.js"></script>
<!-- Stats provides an FPS meter for performance measuring -->
<script src="js/vendor/Stats-r11.js"></script>
<script src="js/Flurry.js"></script>
<script src="js/enums/BlendModes.js"></script>
<script src="js/enums/ColorModes.js"></script>
<script src="js/data/Config.js"></script>
<script src="js/data/Presets.js"></script>
<script src="js/util/ArrayOf.js"></script>
<script src="js/util/Colors.js"></script>
<script src="js/util/Math.js"></script>
<script src="js/util/Vectors.js"></script>
<script src="js/Renderer.js"></script>
<script src="js/Smoke.js"></script>
<script src="js/SmokeParticle.js"></script>
<script src="js/Spark.js"></script>
<script src="js/Star.js"></script>
<script src="js/Texture.js"></script>
<script src="js/GLSaver.js"></script>
<script type="application/javascript">
try { Flurry.main(); }
catch(e)
{
document.body.innerHTML = "<div class='error'>"
+ "Flurry crashed; please visit "
+ "<a href='http://get.webgl.org/'>http://get.webgl.org/</a>"
+ " for more information. <sup>"
+ e.name + "::" + e.message
+ "</sup></div>";
throw e;
}
</script>
</scripts>
</html>