-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
145 lines (118 loc) · 4.36 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
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>WebGL Bubble Tanks</title>
<style>
* { padding: 0; margin: 0; }
</style>
</head>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vNormal;
attribute vec2 vTexCoord;
varying vec2 fTexCoord;
varying vec3 N, L, E;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
uniform mat3 normalMatrix;
void main()
{
vec3 pos = (modelViewMatrix * vPosition).xyz; //vertex position in eye coordinates
N = normalize(normalMatrix*vNormal.xyz);
if(lightPosition.w == 0.0){
L = normalize(lightPosition.xyz);
}
else{
L = normalize(lightPosition.xyz - pos);
}
E = -normalize(pos);
fTexCoord = vTexCoord;
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 ambientProduct;
uniform vec4 diffuseProduct;
uniform vec4 specularProduct;
uniform float shininess;
uniform float shininess2;
varying vec3 N, L, E;
varying vec2 fTexCoord;
uniform sampler2D texture;
//lighting in fragment shader
void main()
{
vec3 H = normalize(L + E);
vec4 ambient = ambientProduct;
float Kd = max(dot(L, N), 0.0);
vec4 diffuse = Kd * diffuseProduct;
float Ks = pow(max(dot(N, H), 0.0), shininess);
vec4 specular = Ks * specularProduct;
if(dot(L, N) < 0.0){
specular = vec4(0.0, 0.0, 0.0, 1.0);
}
vec4 fColor = ambient + diffuse + specular;
fColor.a = 1.0;
if(shininess2 == 1.0){ //player
gl_FragColor = fColor;
}
else if(shininess2 == 2.0){ //background
fColor = fColor + vec4(.4,.4,.4,0); //jank extra ambient lighting
gl_FragColor = fColor * texture2D(texture, fTexCoord);
}
else{ //ERROR
gl_FragColor = vec4(0.0,0.0,0.0,1.0);
}
}
</script>
<p> </p>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> <!-- import jquery -->
<!-- WebGL Utils -->
<script src="js/Common/webgl-utils.js" type="text/javascript"></script>
<script src="js/Common/initShaders.js" type="text/javascript"></script>
<script src="js/Common/MV.js" type="text/javascript"></script>
<!-- WebGL Classes -->
<script src="js/gfx/projector.js" type="text/javascript"></script>
<script src="js/gfx/camera.js" type="text/javascript"></script>
<script src="js/gfx/fps.js" type="text/javascript"></script>
<!-- Classes and such -->
<script src="js/utils.js" type="text/javascript"></script>
<script src="js/text.js" type="text/javascript"></script>
<script src="js/ball.js" type="text/javascript"></script>
<script src="js/turret.js" type="text/javascript"></script>
<script src="js/bulletgroup.js" type="text/javascript"></script>
<script src="js/character.js" type="text/javascript"></script>
<script src="js/player.js" type="text/javascript"></script>
<script src="js/npc.js" type="text/javascript"></script>
<script src="js/floor.js" type="text/javascript"></script>
<script src="js/spawner.js" type="text/javascript"></script>
<!-- Main File -->
<script type="text/javascript" src="game.js"></script>
<body>
<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="gl-canvas"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="600px" width="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="text"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="600px" width="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<img id = "texImage" src = "img/water.jpg" hidden></img>
</body>
</html>