-
Notifications
You must be signed in to change notification settings - Fork 2
/
webglgears.html
108 lines (96 loc) · 3.19 KB
/
webglgears.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>webglgears</title>
<script type='application/javascript' src="js/gl-matrix-min.js"></script>
<script type='application/javascript' src="js/webglgears-min.js"></script>
<script type='application/javascript'>
(function () {
"use strict";
var surface;
var gl;
var wg;
var uriParam;
var parseURIQuery, strBool;
let uriQuery;
let __defaultBool;
parseURIQuery = function (str) {
let arr = str.split('&');
let e, p;
let ret = {};
for (e of arr) {
p = e.split('=');
ret[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
}
return ret;
};
strBool = function (str) {
const n = parseFloat(str);
if (isNaN(n)) {
if (str === "true") {
return true;
}
else if (str === "false") {
return false;
}
return null;
}
return n !== 0;
};
__defaultBool = function (b, def) {
if (b === null) {
return def;
}
return b;
};
uriQuery = parseURIQuery(location.search.substr(1));
uriParam = {
antialias: __defaultBool(strBool(uriQuery.msaa && uriQuery.msaa.trim()), false),
verbose: __defaultBool(strBool(uriQuery.verbose && uriQuery.verbose.trim()), false),
info: __defaultBool(strBool(uriQuery.info && uriQuery.info.trim()), false)
};
// External access to WebGL context, canvas element, and WebGLGears instance
document.webglgears = {};
window.addEventListener('load', function () {
let optCtxInfo;
// Prep canvas
document.webglgears.surface = surface = document.getElementById('surface');
surface.width = window.innerWidth;
surface.height = window.innerHeight;
// Prep WebGL context
optCtxInfo = WebGLGears.optimalContextParams();
optCtxInfo.attr.antialias = uriParam.antialias;
document.webglgears.gl = gl = surface.getContext(optCtxInfo.type, optCtxInfo.attr);
// Prep WebGLGears instance
document.webglgears.wg = wg = new WebGLGears();
wg.verbose = uriParam.verbose;
wg
.attach(gl)
.reshape(window.innerWidth, window.innerHeight);
if (uriParam.info) {
wg.info();
}
window.addEventListener('resize', function () {
surface.width = window.innerWidth;
surface.height = window.innerHeight;
wg.reshape(window.innerWidth, window.innerHeight);
}, false);
document.body.addEventListener('keyup', function (evt) {
switch (evt.code) {
case 'ArrowLeft': wg.view_roty += 5.0; break;
case 'ArrowRight': wg.view_roty -= 5.0; break;
case 'ArrowUp': wg.view_rotx += 5.0; break;
case 'ArrowDown': wg.view_rotx -= 5.0; break;
case 'KeyA': wg.animate = !wg.animate; break;
case 'Escape': wg.detach(); break;
}
}, false);
}, false);
})();
</script>
</head>
<body style="margin: 0px; padding: 0px; overflow: hidden;">
<canvas id='surface'></canvas>
</body>
</html>