/
index.html
192 lines (163 loc) · 6.15 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Island Mystery Game</title>
<script type="text/javascript" src="helper.js"></script>
<script type="text/javascript" src="MV.js"></script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="island/heightMap.js"></script>
<script type="text/javascript" src="island/mountain.js"></script>
<script type="text/javascript" src="island/bay.js"></script>
<script type="text/javascript" src="camera.js"></script>
<script type="text/javascript" src="map.js"></script>
<script type="text/javascript" src="physical.js"></script>
<script type="text/javascript" src="player.js"></script>
<script type="text/javascript" src="texture.js"></script>
<script type="text/javascript" src="shapes/shape.js"></script>
<script type="text/javascript" src="shapes/cube.js"></script>
<script type="text/javascript" src="shapes/multiTexCube.js"></script>
<script type="text/javascript" src="shapes/sphere.js"></script>
<script type="text/javascript" src="shapes/plane.js"></script>
<script type="text/javascript" src="sky.js"></script>
<script type="text/javascript" src="shapes/hexagonalPrism.js"></script>
<script type="text/javascript" src="shapes/hexagonalPyramid.js"></script>
<script type="text/javascript" src="objects/rock.js"></script>
<script type="text/javascript" src="objects/tree.js"></script>
<script type="text/javascript" src="objects/camprock.js"></script>
<script type="text/javascript" src="objects/stick.js"></script>
<script type="text/javascript" src="objects/campfire.js"></script>
<script type="text/javascript" src="objects/paperTree.js"></script>
<script type="text/javascript" src="island/island.js"></script>
<script type="text/javascript" src="objects/pig.js"></script>
<script type="text/javascript" src="scene.js"></script>
<script id="shader-vertex" type="x-shader/x-vertex">
precision mediump float;
// Position attributes and uniforms
attribute vec3 vPosition;
attribute vec3 vNormal;
attribute vec3 objTangent;
attribute vec2 texCoord;
uniform mat4 modelMatrix;
uniform mat4 projViewMatrix;
uniform mat4 normalMat;
uniform vec3 lightPosition;
uniform int enableBumpingV;
varying vec2 fUV;
varying vec3 N, L, posToLight;
void main() {
// Make sure our w components are set properly
vec4 pos = vec4(vPosition, 1.0);
vec4 norm = vec4(vNormal, 0.0);
vec3 posInWorld = (modelMatrix * pos).xyz;
vec3 normalInWorld = (normalMat * norm).xyz;
vec3 lightInWorld = lightPosition; // Light already in world coordinates
posToLight = normalize(lightInWorld - posInWorld);
N = normalize(normalInWorld);
L = vec3(0.0, 0.0, 0.0);
if(enableBumpingV == 1){
vec4 tan = vec4(objTangent, 0.0);
//Calculate the tangent space
vec3 T = normalize((normalMat * tan).xyz);
vec3 B = cross(N, T);
//convert the light vector into the tangent space
L.x = dot(T, posToLight);
//This switch is to fix the order of lighting on the top and bottom faces of
//the cube
if(norm.y == 1.0 || norm.y == -1.0) {
L.y = dot(B, posToLight);
L.z = dot(N, posToLight);}
else {
L.y = dot(N, posToLight);
L.z = dot(B, posToLight);}
L = normalize(L);
}
fUV = texCoord;
gl_Position = projViewMatrix * vec4(posInWorld, 1.0);
}
</script>
<script id="shader-fragment" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 ambientProduct;
uniform vec4 diffuseProduct;
uniform sampler2D uSampler;
uniform sampler2D nSampler;
uniform int enableBumpingF;
uniform int enableLighting;
uniform int uniformLighting;
varying vec3 N, L, posToLight;
varying vec2 fUV;
void main() {
// We ignore specular highlights
float Kd = 0.0;
if(enableBumpingF == 1){
vec3 bumpNormal = 2.0*(texture2D(nSampler, fUV)).xyz-vec3(1.0, 1.0, 1.0);
bumpNormal = bumpNormal + vec3(0.0, 1.0, 0.0);
float max_tex_dot = max(dot(L, bumpNormal), 0.0);
float NL_dot = dot(N, posToLight);
//if the light source can be seen by the face bump map normally
if(NL_dot > -0.1)
Kd = max_tex_dot;
//in the transition between when light can be seen by the face and not, use a
//linear smoother so the transition is not abrupt
else if (NL_dot > -0.2){
float lin_smoother = 1.0 + (NL_dot + 0.1)/0.1;
Kd = max_tex_dot * lin_smoother;}
}
else{
Kd = max(dot(N, posToLight), 0.0);
}
vec4 fColor;
if(enableLighting == 0)
fColor = vec4(1.0, 1.0, 1.0, 1.0);
else{
vec4 ambient = ambientProduct;
vec4 diffuse = Kd * diffuseProduct;
fColor = ambient + diffuse;
fColor.a = 1.0;
if(uniformLighting == 0) {
fColor = (0.25 * ambient) + (0.75 * diffuseProduct);
}
}
gl_FragColor = fColor * texture2D(uSampler, fUV);
}
</script>
<style>
.columns {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
</style>
</head>
<body>
<div style="width: 720px; margin: auto;">
<center>
<h2>Island Mystery Game</h2>
<h3>Kyle Kodani, Kevin Lu, Ivan Petkov, Xiaosong Shi, David Vasko</h3>
</center>
<canvas id="gl-canvas" width="720" height="480" class="centered">
Sorry, your browser does not support WebGL.
</canvas>
<br />
<center><strong>Inventory</strong></center>
<ul>
<li id='stickCount'>Sticks: 0</li>
<li id='rockCount'>Rocks: 0</li>
</ul>
<br />
<center><strong>Controls</strong></center>
<ul class="columns">
<li>Move around with <strong>W</strong>, <strong>A</strong>, <strong>S</strong>, <strong>D</strong></li>
<li>Jump with <strong>SPACE</strong></li>
<li>Look around with <strong>the mouse</strong></li>
<li>Run by holding <strong>SHIFT</strong> while moving forward</li>
<li>Add stick to fire with <strong>T</strong> while at firepit</li>
<li>Charge up throw with <strong>mouse down</strong></li>
<li>Throw rock <strong>mouse up</strong></li>
<li>Toggle music with <strong>M</strong></li>
</ul>
</div>
</body>
</html>