-
Notifications
You must be signed in to change notification settings - Fork 0
/
test2.html
114 lines (88 loc) · 3.18 KB
/
test2.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
<html>
<head>
<style type="text/css">
html, body {
border: 0;
padding: 0;
margin: 0;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
var game;
var Systems = {};
var assetManifest = [
{type: 'fragmentShader', name: 'frag', src: 'assets/shaders/fragment.glsl' },
{type: 'vertexShader', name: 'vert', src: 'assets/shaders/vertex.glsl' },
{type: 'fragmentShader', name: 'terrain', src: 'assets/shaders/terrain-frag.glsl' },
{type: 'fragmentShader', name: 'sprite', src: 'assets/shaders/sprite-frag.glsl' },
{type: 'vertexShader', name: 'terrain', src: 'assets/shaders/terrain-vert.glsl' },
{type: 'vertexShader', name: 'sprite', src: 'assets/shaders/sprite-vert.glsl' },
{type: 'json', name: 'sdf_data', src: 'assets/sdf-output.json' },
{type: 'image', name: 'sdf_data', src: 'assets/sdf-output-1.png' },
{type: 'imageArray', name: 'sprites', stripPath: true, src: [
'assets/textures/sprites/marker-blue.png',
'assets/textures/sprites/marker-brown.png',
'assets/textures/sprites/marker-cyan.png',
'assets/textures/sprites/marker-gray.png',
'assets/textures/sprites/marker-green.png',
'assets/textures/sprites/marker-orange.png',
'assets/textures/sprites/marker-pink.png',
'assets/textures/sprites/marker-purple.png',
'assets/textures/sprites/marker-red.png',
'assets/textures/sprites/marker-teal.png',
'assets/textures/sprites/marker-yellow.png',
]},
{type: 'imageArray', name: 'terraintex', stripPath: true, src: [
'assets/textures/terrain/grass-base.png',
'assets/textures/terrain/grass-yellow-flowers.png',
'assets/textures/terrain/pavement.png',
'assets/textures/terrain/dirt.png',
'assets/textures/terrain/concrete.png',
'assets/textures/terrain/sidewalk-v.png',
'assets/textures/terrain/sidewalk-h.png',
// 'assets/textures/terrain/gravel.png',
]},
]
var gl;
// document.addEventListener("DOMContentLoaded", function() {
window.addEventListener("load", function() {
var glcanvas = document.getElementById('canvas');
gl = glcanvas.getContext("webgl2");
var w = window.innerWidth;
var h = window.innerHeight;
console.log(w,h);
glcanvas.width = window.innerWidth;
glcanvas.height = window.outerHeight;
glcanvas.style.width = window.innerWidth + 'px';
glcanvas.style.height = window.innerHeight + 'px';
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
loadAssets(assetManifest, function(err, a) {
main(a);
});
});
</script>
<script type="text/javascript" src="3rd_party/gl-matrix-min.js"></script>
<script type="text/javascript">
(function(m) { // globalize glMatrix
for(var p in m) {
this[p] = m[p];
}
})(glMatrix);
</script>
<script type="text/javascript" src="3rd_party/json5.min.js"></script>
<script type="text/javascript" src="glcore.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<script type="text/javascript" src="terrain.js"></script>
<script type="text/javascript" src="maputil.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="systems/movement.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<canvas id="canvas">Loading...</canvas>
<div id="hidden" style="display:none;"></div>
</body>
</html>