/
index.html
117 lines (111 loc) · 3.33 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
<!DOCTYPE html>
<html>
<head>
<title>CIS 565 WebGL Deferred Shading</title>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico">
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/es6-promise.min.js"></script>
<script src="lib/three.js"></script>
<script src="lib/OrbitControls.js"></script>
<script src="lib/OBJLoader.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/seedrandom.min.js"></script>
<script src="lib/stats.min.js"></script>
<script src="lib/dat.gui.js"></script>
<script src="js/util.js"></script>
<script src="js/main.js"></script>
<script src="js/compute.js"></script>
<script src="js/deferredSetup.js"></script>
<script src="js/deferredRender.js"></script>
<script src="js/framework.js"></script>
<script src="js/ui.js"></script>
<script src="lib/gl-matrix-min.js"></script>
<script src="lib/minimal-gltf-loader.js"></script>
<style>
html, body {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
margin: 0px;
width: 800px;
height: 600px;
margin: 0 auto;
overflow: hidden;
background-color: #333333;
}
#debugmodewarning {
text-align: center;
font-family: sans-serif;
color: #ffff00;
position: fixed;
bottom: 0;
left: 0px;
height: 2em;
width: 100%;
display: none;
}
#alertcontainer {
font-family: sans-serif;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1000;
display: none;
}
#alertbox {
background-color: black;
color: white;
margin: auto auto;
padding: 1em;
border-radius: 1em;
border: 2px solid white;
position: relative;
top: 200px;
width: 750px;
}
#dlbutton {
float: right;
width: 6em;
height: 2em;
}
#dlbutton button {
width: 100%;
height: 100%;
}
#msgbox {
font-family: sans-serif;
background-color: black;
color: white;
height: 2em;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="800px" height="600px"></canvas>
<div id="msgbox"></div>
<div id="debugmodewarning">
<strong style="font-size: 150%">DEBUG MODE!</strong>
(Disable before measuring performance.)
<div id="dlbutton">
<button type="button" action="" disabled onclick="downloadCanvas();">Screenshot</button>
</div>
</div>
<div id="alertcontainer">
<div id="alertbox"><pre id="alerttext"></pre></div>
</div>
<script>
if (location.host == 'localhost') {
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js"></' + 'script>')
}
</script>
</body>
</html>