-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (119 loc) · 4.65 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
<!DOCTYPE>
<html>
<head>
<title>HTML5 Runner</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
<script type="application/vertexShader" id="vertexShaderCode">
precision mediump float;
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// Uniforms
uniform mat4 worldViewProjection;
// Varying
varying vec4 vPosition;
varying vec3 vNormal;
void main() {
vec4 p = vec4( position, 1. );
vPosition = p;
vNormal = normal;
gl_Position = worldViewProjection * p;
}
</script>
<script type="application/fragmentShader" id="fragmentShaderCode">
precision mediump float;
uniform mat4 worldView;
varying vec4 vPosition;
varying vec3 vNormal;
uniform float time;
// { 2d cell id, distance to border, distnace to center )
vec4 hexagon( vec2 p )
{
vec2 q = vec2( p.x*30.0*1.1773503, p.y + p.x*0.5773503 );
vec2 pi = floor(q);
vec2 pf = fract(q);
float v = mod(pi.x + pi.y, 3.0);
float ca = step(1.0,v);
float cb = step(2.0,v);
vec2 ma = step(pf.xy,pf.yx);
// distance to borders
float e = dot( ma, 1.0-pf.yx + ca*(pf.x+pf.y-1.0) + cb*(pf.yx-2.0*pf.xy) );
// distance to center
p = vec2( q.x + floor(0.5+p.y/1.5), 4.0*p.y/3.0 )*0.5 + 0.5;
float f = length( (fract(p) - 0.5)*vec2(1.0,0.85) );
return vec4( pi + ca - cb*ma, e, f );
}
float hash( float n )
{
return fract(sin(n)*43758.5453);
}
float hash1( vec2 p ) { float n = dot(p,vec2(127.1,311.7) ); return fract(sin(n)*43758.5453); }
// noise
float noise( in vec3 x )
{
vec3 p = floor(x);
vec3 f = fract(x);
f = f*f*(3.0-2.0*f);
float n = p.x + p.y*57.0 + 113.0*p.z;
return mix(mix(mix( hash(n+ 0.0), hash(n+ 1.0),f.x),
mix( hash(n+ 57.0), hash(n+ 58.0),f.x),f.y),
mix(mix( hash(n+113.0), hash(n+114.0),f.x),
mix( hash(n+170.0), hash(n+171.0),f.x),f.y),f.z);
}
void main( void )
{
vec2 resolution = vec2(100000, 10800);
vec2 uv = gl_FragCoord.xy/resolution.xy;
//vec2 pos = (-resolution.xy + 2.0*gl_FragCoord.xy)/resolution.y;
vec2 pos = vPosition.xy;
// distort
pos *= 0.8 + 0.25*length(pos);
// gray
vec4 h = hexagon(8.0*pos + 0.5*time);
float n = noise( vec3(0.3*h.xy+time*0.1,time) );
vec3 col = 0.15 + 0.15*hash1(h.xy+1.2)*vec3(1.0);
col *= smoothstep( 0.10, 0.11, h.z );
col *= smoothstep( 0.10, 0.11, h.w );
col *= 1.0 + 0.15*sin(40.0*h.z);
col *= 0.75 + 0.5*h.z*n;
// blue
h = hexagon(6.0*pos + 0.6*time);
n = noise( vec3(0.3*h.xy+time*0.1,time) );
vec3 colb = 0.9 + 0.8*sin( hash1(h.xy)*1.5 + 2.0 + vec3(1.0,0.5,0.0) );
colb *= smoothstep( 0.10, 0.11, h.z );
colb *= 1.0 + 0.15*sin(40.0*h.z);
colb *= 0.75 + 0.5*h.z*n;
h = hexagon(6.0*(pos+0.1*vec2(-1.3,1.0)) + 0.6*time);
col *= 1.0-0.8*smoothstep(0.45,0.451,noise( vec3(0.3*h.xy+time*0.1,time) ));
col = mix( col, colb, smoothstep(0.45,0.451,n) );
col *= pow( 16.0*uv.x*(1.0-uv.x)*uv.y*(1.0-uv.y), 0.1 );
gl_FragColor = vec4( col, 1.0 );
}
</script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script type="text/javascript" src="Vendors/Babylon_debug.js"></script>
<script type="text/javascript" src="JS/Game.js"></script>
<script type="text/javascript" src="JS/Particles.js"></script>
<script type="text/javascript" src="JS/ObjectCreator.js"></script>
<script type="text/javascript" src="JS/Scenes/GameScene.js"></script>
<script type="text/javascript" src="JS/extend.js"></script>
<script type="text/javascript" src="JS/Materials.js"></script>
<script type="text/javascript" src="JS/InputManager.js"></script>
<script type="text/javascript" src="JS/Scenes/MenuScene.js"></script>
<script type="text/javascript" src="JS/Objects/Object.js"></script>
<script type="text/javascript" src="JS/Objects/MovingObject.js"></script>
<script type="text/javascript" src="JS/Objects/MovingWall.js"></script>
<script type="text/javascript" src="JS/Objects/Mine.js"></script>
<script type="text/javascript" src="JS/Objects/MovingMine.js"></script>
<script type="text/javascript" src="JS/Objects/Collectible.js"></script>
<script type="text/javascript" src="JS/Objects/Spike.js"></script>
<script type="text/javascript" src="JS/Objects/FixedWall.js"></script>
<script type="text/javascript" src="JS/Objects/InvisibleWall.js"></script>
<script type="text/javascript" src="JS/Objects/Player.js"></script>
<script type="text/javascript" src="JS/Main.js"></script>
<script type="text/javascript" src="Config/patterns.js"></script>
</body>
</html>