-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathBlockRunners.html
More file actions
220 lines (178 loc) · 7.33 KB
/
BlockRunners.html
File metadata and controls
220 lines (178 loc) · 7.33 KB
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<html>
<head>
<title>Block Runners</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="./style/webgl.css" type="text/css">
<script type="text/javascript" src="./scripts/glMatrix-0.9.5.min.js"></script>
<script src="./scripts/main.js" type="text/javascript"></script>
<!-- Fragment shader program -->
<script id="per-fragment-lighting-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec2 vDepthUv;
varying vec4 shadowPos;
// uniform attribute for setting texture coordinates
varying vec2 vTextureCoord;
// uniform attribute for setting normals
varying vec3 vTransformedNormal;
// uniform attribute for setting positions
varying vec4 vPosition;
// uniform attribute for setting shininess
uniform float uMaterialShininess;
// uniform attribute for enabling speculars
uniform bool uShowSpecularHighlights;
// uniform attribute for enabling lighting
uniform bool uUseLighting;
// uniform attribute for enabling textures
uniform bool uUseTextures;
uniform vec3 uAmbientColor; // ambient color uniform
uniform vec3 uPointLightingLocation; // light direction uniform
uniform vec3 uPointLightingSpecularColor; // specular light color
uniform vec3 uPointLightingDiffuseColor; // difuse light color
uniform vec3 uColor;
// uniform attribute for setting 2D sampler
uniform sampler2D uSampler;
float decodeFloat (vec4 color) {
const vec4 bitShift = vec4(
1.0 / (256.0 * 256.0 * 256.0),
1.0 / (256.0 * 256.0),
1.0 / 256.0,
1
);
return dot(color, bitShift);
}
void main(void) {
vec3 fragmentDepth;
fragmentDepth = shadowPos.xyz;
float shadowAcneRemover = 0.007;
fragmentDepth.z -= shadowAcneRemover;
float texelSize;
texelSize = 1.0 / 1024.0;
float amountInLight = 0.0;
for (int x = -1; x <= 1; x++) {
for (int y = -1; y <= 1; y++) {
float texelDepth = decodeFloat(texture2D(uSampler, fragmentDepth.xy + vec2(x, y) * texelSize));
if (fragmentDepth.z < texelDepth) {
amountInLight += 1.0;
}
}
}
amountInLight /= 9.0;
vec3 lightWeighting;
if (!uUseLighting) {
lightWeighting = vec3(1.0, 1.0, 1.0);
} else {
float lightDistance = 1.0/log2(length(uPointLightingLocation - vPosition.xyz)+1.0);
vec3 lightDirection = normalize(uPointLightingLocation - vPosition.xyz);
vec3 normal = normalize(vTransformedNormal);
// Specular component
float specularLightWeighting = 0.0;
if (uShowSpecularHighlights) {
vec3 eyeDirection = normalize(-vPosition.xyz);
vec3 reflectionDirection = reflect(-lightDirection, normal);
specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), uMaterialShininess);
}
// diffuese component
float diffuseLightWeighting = max(dot(normal, lightDirection), 0.0) ;
lightWeighting = uAmbientColor
+ uPointLightingSpecularColor * 2.0 * specularLightWeighting * lightDistance
+ uPointLightingDiffuseColor * 2.0 * diffuseLightWeighting * lightDistance;
}
vec4 fragmentColor;
if (uUseTextures) {
// sample the fragment color from texture
fragmentColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
} else {
// set the fragment color to white
fragmentColor = vec4(1.0, 1.0, 1.0, 1.0);
}
// sample the fragment color from texture
//lightWeighting *= amountInLight;
gl_FragColor = vec4(fragmentColor.rgb * lightWeighting, fragmentColor.a);
}
</script>
<!-- Vertex shader program -->
<script id="per-vertex-lighting-vs" type="x-shader/x-vertex">
// atributes for setting vertex position, normals and texture coordinates
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix; // model-view matrix
uniform mat4 uPMatrix; // projection matrix
uniform mat3 uNMatrix; // normal matrix
uniform mat4 lightMViewMatrix;
uniform mat4 lightProjectionMatrix;
const mat4 texUnitConverter = mat4(0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.5, 0.5, 0.5, 1.0);
// variable for passing texture coordinates and lighting weights
// from vertex shader to fragment shader
varying vec2 vTextureCoord;
varying vec3 vTransformedNormal;
varying vec4 vPosition;
varying vec2 vDepthUv;
varying vec4 shadowPos;
void main(void) {
// calculate the vertex position
vPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
gl_Position = uPMatrix * vPosition;
vTextureCoord = aTextureCoord;
vTransformedNormal = uNMatrix * aVertexNormal;
shadowPos = texUnitConverter * lightProjectionMatrix * lightMViewMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<script id="light-vertex-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uPMatrix;
uniform mat4 uMVMatrix;
void main (void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<script id="light-fragment-vs" type="x-shader/x-fragment">
precision mediump float;
vec4 encodeFloat (float depth) {
const vec4 bitShift = vec4(
256 * 256 * 256,
256 * 256,
256,
1.0
);
const vec4 bitMask = vec4(
0,
1.0 / 256.0,
1.0 / 256.0,
1.0 / 256.0
);
vec4 comp = fract(depth * bitShift);
comp -= comp.xxyz * bitMask;
return comp;
}
void main (void) {
// Encode the distance into the scene of this fragment.
// We'll later decode this when rendering from our camera's
// perspective and use this number to know whether the fragment
// that our camera is seeing is inside of our outside of the shadow
gl_FragColor = encodeFloat(gl_FragCoord.z);
}
</script>
<script type="text/javascript">
function showValue(id, newValue)
{
document.getElementById(id+"span").innerHTML = " " + newValue;
}
</script>
</head>
<body onload="start()">
<h1>Block Runners</h1>
<div id="score">
</div>
<div id="hp">
</div>
<div id="dark">
</div>
<input type="button" class="button" onclick="initializeGame();" value="Reset" />
<div id="content" width=100% height=100%>
<canvas id="glCanvas" width=100% height=100%>
No <code><canvas></code> suppport in your browser.
</canvas>
</div>
</body>
</html>