created stage atlas+meshes, simplifying models and materials

2018-11-30 20:33:05 +01:00
parent 30c3abd2da
commit 8c98df87e2
18 changed files with 2627 additions and 40 deletions
--- a/assets/img/atlas-guide.png
+++ b/assets/img/atlas-guide.png
--- a/assets/img/atlas.png
+++ b/assets/img/atlas.png
--- a/assets/models/audiocolumn.obj
+++ b/assets/models/audiocolumn.obj
@@ -0,0 +1,38 @@
+# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
+# www.blender.org
+o audiocolumn
+v 0.300000 -0.500000 0.300000
+v 0.300000 0.500000 0.300000
+v -0.300000 -0.500000 0.300000
+v -0.300000 0.500000 0.300000
+v 0.300000 -0.500000 -0.300000
+v 0.300000 0.500000 -0.300000
+v -0.300000 -0.500000 -0.300000
+v -0.300000 0.500000 -0.300000
+vt 0.783339 0.005821
+vt 0.774810 0.013178
+vt 0.774810 0.005821
+vt 0.795098 0.008335
+vt 0.803673 0.003338
+vt 0.803673 0.008335
+vt 0.779471 0.013774
+vt 0.776653 0.016592
+vt 0.776653 0.013774
+vt 0.792235 0.011705
+vt 0.789417 0.014523
+vt 0.789417 0.011705
+vt 0.783339 0.013178
+vt 0.795098 0.003338
+vt 0.779471 0.016592
+vt 0.792235 0.014523
+s off
+f 2/1 3/2 1/3
+f 4/4 7/5 3/6
+f 6/7 1/8 5/9
+f 4/10 6/11 8/12
+f 8/12 5/9 7/5
+f 2/1 4/13 3/2
+f 4/4 8/14 7/5
+f 6/7 2/15 1/8
+f 4/10 2/16 6/11
+f 8/12 6/7 5/9
--- a/assets/models/miss.obj
+++ b/assets/models/miss.obj
@@ -0,0 +1,14 @@
+# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
+# www.blender.org
+o wrong
+v -0.250000 -0.125000 0.000000
+v 0.250000 -0.125000 0.000000
+v -0.250000 0.125000 -0.000000
+v 0.250000 0.125000 -0.000000
+vt 0.812377 0.313561
+vt 0.750407 0.375531
+vt 0.750407 0.313561
+vt 0.812377 0.375531
+s off
+f 2/1 3/2 1/3
+f 2/1 4/4 3/2
--- a/assets/models/smoke.obj
+++ b/assets/models/smoke.obj
@@ -0,0 +1,78 @@
+# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
+# www.blender.org
+o smoke
+v 0.000000 -9.030719 -5.000000
+v 0.000000 9.030719 -5.000000
+v 2.500000 -9.030719 -4.330127
+v 2.500000 9.030719 -4.330127
+v 4.330127 -9.030719 -2.500000
+v 4.330127 9.030719 -2.500000
+v 5.000000 -9.030719 0.000000
+v 5.000000 9.030719 0.000000
+v 4.330127 -9.030719 2.500000
+v 4.330127 9.030719 2.500000
+v 2.500000 -9.030719 4.330127
+v 2.500000 9.030719 4.330127
+v 0.000001 -9.030719 5.000000
+v 0.000001 9.030719 5.000000
+v -2.499999 -9.030719 4.330128
+v -2.499999 9.030719 4.330128
+v -4.330126 -9.030719 2.500001
+v -4.330126 9.030719 2.500001
+v -5.000000 -9.030719 0.000002
+v -5.000000 9.030719 0.000002
+v -4.330129 -9.030719 -2.499997
+v -4.330129 9.030719 -2.499997
+v -2.500003 -9.030719 -4.330125
+v -2.500003 9.030719 -4.330125
+vt 0.750488 0.751420
+vt 0.874158 0.792572
+vt 0.750488 0.792573
+vt 0.750488 0.710267
+vt 0.874158 0.751419
+vt 0.750488 0.669114
+vt 0.874158 0.710266
+vt 0.750488 0.627961
+vt 0.874158 0.669113
+vt 0.750488 0.586808
+vt 0.874158 0.627961
+vt 0.750488 0.545655
+vt 0.874158 0.586808
+vt 0.750488 0.504502
+vt 0.874158 0.545654
+vt 0.750488 0.957185
+vt 0.874158 0.998337
+vt 0.750488 0.998338
+vt 0.750488 0.916032
+vt 0.874158 0.957184
+vt 0.750488 0.874879
+vt 0.874158 0.916031
+vt 0.750488 0.833726
+vt 0.874158 0.874878
+vt 0.874158 0.833725
+vt 0.874158 0.504502
+s off
+f 3/1 2/2 1/3
+f 5/4 4/5 3/1
+f 7/6 6/7 5/4
+f 9/8 8/9 7/6
+f 11/10 10/11 9/8
+f 13/12 12/13 11/10
+f 15/14 14/15 13/12
+f 17/16 16/17 15/18
+f 19/19 18/20 17/16
+f 21/21 20/22 19/19
+f 23/23 22/24 21/21
+f 1/3 24/25 23/23
+f 3/1 4/5 2/2
+f 5/4 6/7 4/5
+f 7/6 8/9 6/7
+f 9/8 10/11 8/9
+f 11/10 12/13 10/11
+f 13/12 14/15 12/13
+f 15/14 16/26 14/15
+f 17/16 18/20 16/17
+f 19/19 20/22 18/20
+f 21/21 22/24 20/22
+f 23/23 24/25 22/24
+f 1/3 2/2 24/25
--- a/assets/models/stage.obj
+++ b/assets/models/stage.obj
--- a/assets/models/stageadditive.obj
+++ b/assets/models/stageadditive.obj
@@ -0,0 +1,268 @@
+# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
+# www.blender.org
+o 000tunnelneonglow.002_tunnelneon.014
+v 15.178578 1.075909 -33.904572
+v 1.075902 15.178576 -33.904572
+v 19.149137 5.046469 -33.587288
+v 5.046463 19.149136 -33.587288
+v -15.178578 1.075909 -33.904572
+v -1.075902 15.178576 -33.904572
+v -19.149137 5.046469 -33.587288
+v -5.046463 19.149136 -33.587288
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.902059 0.500380
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.937021 0.748845
+vt 0.937021 0.748845
+vt 0.902059 0.500380
+s off
+f 1/1 4/2 2/3
+f 5/4 8/5 7/6
+f 1/1 3/7 4/2
+f 5/4 6/8 8/5
+o 000tunnelneonglow.005_tunnelneon.017
+v 12.863472 5.606542 -33.581116
+v 5.505581 12.964426 -33.581116
+v 14.446635 7.189702 -33.454609
+v 7.088743 14.547589 -33.454609
+v -12.863472 5.606542 -33.581116
+v -5.505581 12.964426 -33.581116
+v -14.446635 7.189702 -33.454609
+v -7.088743 14.547589 -33.454609
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.888596 0.500182
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.900723 0.749152
+vt 0.900723 0.749152
+vt 0.888596 0.500182
+s off
+f 9/9 12/10 10/11
+f 13/12 16/13 15/14
+f 9/9 11/15 12/10
+f 13/12 14/16 16/13
+o 020tunnelneonglow.003_tunnelneon.015
+v 15.178578 1.075909 -27.463730
+v 1.075902 15.178576 -27.463730
+v 19.149137 5.046469 -27.146448
+v 5.046463 19.149136 -27.146448
+v -15.178578 1.075909 -27.463730
+v -1.075902 15.178576 -27.463730
+v -19.149137 5.046469 -27.146448
+v -5.046463 19.149136 -27.146448
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.902059 0.500380
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.937021 0.748845
+vt 0.937021 0.748845
+vt 0.902059 0.500380
+s off
+f 17/17 20/18 18/19
+f 21/20 24/21 23/22
+f 17/17 19/23 20/18
+f 21/20 22/24 24/21
+o 020tunnelneonglow.006_tunnelneon.018
+v 12.863472 5.606542 -27.129221
+v 5.505581 12.964426 -27.129221
+v 14.446635 7.189702 -27.002712
+v 7.088743 14.547589 -27.002712
+v -12.863472 5.606542 -27.129221
+v -5.505581 12.964426 -27.129221
+v -14.446635 7.189702 -27.002712
+v -7.088743 14.547589 -27.002712
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.888596 0.500182
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.900723 0.749152
+vt 0.900723 0.749152
+vt 0.888596 0.500182
+s off
+f 25/25 28/26 26/27
+f 29/28 32/29 31/30
+f 25/25 27/31 28/26
+f 29/28 30/32 32/29
+o 040tunnelneonglow.004_tunnelneon.016
+v 15.178578 1.075909 -21.022888
+v 1.075902 15.178576 -21.022886
+v 19.149137 5.046469 -20.705606
+v 5.046463 19.149136 -20.705606
+v -15.178578 1.075909 -21.022888
+v -1.075902 15.178576 -21.022886
+v -19.149137 5.046469 -20.705606
+v -5.046463 19.149136 -20.705606
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.902059 0.500380
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.937021 0.748845
+vt 0.937021 0.748845
+vt 0.902059 0.500380
+s off
+f 33/33 36/34 34/35
+f 37/36 40/37 39/38
+f 33/33 35/39 36/34
+f 37/36 38/40 40/37
+o 040tunnelneonglow.007_tunnelneon.019
+v 12.863472 5.606542 -20.677326
+v 5.505581 12.964426 -20.677326
+v 14.446635 7.189702 -20.550817
+v 7.088743 14.547589 -20.550817
+v -12.863472 5.606542 -20.677326
+v -5.505581 12.964426 -20.677326
+v -14.446635 7.189702 -20.550817
+v -7.088743 14.547589 -20.550817
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.888596 0.500182
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.900723 0.749152
+vt 0.900723 0.749152
+vt 0.888596 0.500182
+s off
+f 41/41 44/42 42/43
+f 45/44 48/45 47/46
+f 41/41 43/47 44/42
+f 45/44 46/48 48/45
+o 060tunnelneonglow.001_tunnelneon.013
+v 15.178578 1.075909 -14.582047
+v 1.075902 15.178576 -14.582046
+v 19.149137 5.046469 -14.264764
+v 5.046463 19.149136 -14.264764
+v -15.178578 1.075909 -14.582047
+v -1.075902 15.178576 -14.582046
+v -19.149137 5.046469 -14.264764
+v -5.046463 19.149136 -14.264764
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.902059 0.500380
+vt 0.902059 0.748845
+vt 0.937021 0.500380
+vt 0.937021 0.748845
+vt 0.937021 0.748845
+vt 0.902059 0.500380
+s off
+f 49/49 52/50 50/51
+f 53/52 56/53 55/54
+f 49/49 51/55 52/50
+f 53/52 54/56 56/53
+o 060tunnelneonglow.002_tunnelneon
+v 12.863472 5.606542 -14.225430
+v 5.505581 12.964426 -14.225430
+v 14.446635 7.189702 -14.098923
+v 7.088743 14.547589 -14.098923
+v -12.863472 5.606542 -14.225430
+v -5.505581 12.964426 -14.225430
+v -14.446635 7.189702 -14.098923
+v -7.088743 14.547589 -14.098923
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.888596 0.500182
+vt 0.888596 0.749152
+vt 0.900723 0.500182
+vt 0.900723 0.749152
+vt 0.900723 0.749152
+vt 0.888596 0.500182
+s off
+f 57/57 60/58 58/59
+f 61/60 64/61 63/62
+f 57/57 59/63 60/58
+f 61/60 62/64 64/61
+o 080neonglow_tunnelneon.001
+v 4.693238 0.813037 19.789230
+v 4.693230 0.813042 -82.453156
+v 4.350243 0.470041 19.789230
+v 4.350235 0.470047 -82.453156
+v -4.693238 0.813037 19.789230
+v -4.693230 0.813042 -82.453156
+v -4.350243 0.470041 19.789230
+v -4.350235 0.470047 -82.453156
+vt 0.887984 0.500428
+vt 0.887984 0.749582
+vt 0.875393 0.749582
+vt 0.887984 0.500428
+vt 0.875392 0.500428
+vt 0.875393 0.749582
+vt 0.875392 0.500428
+vt 0.887984 0.749582
+s off
+f 65/65 66/66 68/67
+f 69/68 71/69 72/70
+f 65/65 68/67 67/71
+f 69/68 72/70 70/72
+o 090neonglow.001_tunnelneon.006
+v 3.762471 0.875742 -7.080121
+v 3.762460 0.875749 -58.498669
+v 3.277436 0.390707 -7.080121
+v 3.277424 0.390714 -58.498669
+v 3.762470 0.875742 -7.385828
+v 3.277435 0.390707 -7.385828
+v -3.762471 0.875742 -7.080121
+v -3.762460 0.875749 -58.498669
+v -3.277436 0.390707 -7.080121
+v -3.277424 0.390714 -58.498669
+v -3.762470 0.875742 -7.385828
+v -3.277435 0.390707 -7.385828
+vt 0.875212 0.517649
+vt 0.888051 0.517649
+vt 0.888052 0.749677
+vt 0.875212 0.500256
+vt 0.888051 0.500256
+vt 0.888052 0.749677
+vt 0.888051 0.517649
+vt 0.875212 0.517649
+vt 0.888051 0.500256
+vt 0.875212 0.500256
+vt 0.875212 0.749677
+vt 0.875212 0.749677
+s off
+f 78/73 77/74 74/75
+f 75/76 73/77 77/74
+f 80/78 83/79 84/80
+f 83/79 79/81 81/82
+f 78/73 74/75 76/83
+f 75/76 77/74 78/73
+f 80/78 84/80 82/84
+f 83/79 81/82 84/80
+o 120floorglow_Plane.001
+v 1.374993 -0.006546 -1.379147
+v 1.595471 -0.006546 -1.599395
+v -1.597251 -0.006546 1.593773
+v 1.595413 -0.006546 1.593600
+v -1.376857 -0.006546 1.373170
+v 1.374951 -0.006546 1.373394
+v -1.376821 -0.006546 -1.379086
+v -1.597157 -0.006546 -1.597492
+vt 0.875646 0.711989
+vt 0.887532 0.531546
+vt 0.875646 0.517147
+vt 0.875646 0.517020
+vt 0.887532 0.736731
+vt 0.887532 0.531418
+vt 0.875646 0.517020
+vt 0.887532 0.736731
+vt 0.887532 0.531418
+vt 0.875646 0.517147
+vt 0.887532 0.736731
+vt 0.887532 0.531546
+vt 0.887532 0.736731
+vt 0.875646 0.711989
+vt 0.875646 0.711989
+vt 0.875646 0.711989
+s off
+f 85/85 92/86 91/87
+f 87/88 90/89 89/90
+f 89/91 92/92 87/93
+f 88/94 85/95 90/96
+f 85/85 86/97 92/86
+f 87/88 88/98 90/89
+f 89/91 91/99 92/92
+f 88/94 86/100 85/95
--- a/assets/models/stepback.obj
+++ b/assets/models/stepback.obj
@@ -0,0 +1,14 @@
+# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
+# www.blender.org
+o 160stepback
+v -0.250000 -0.125000 0.000000
+v 0.250000 -0.125000 0.000000
+v -0.250000 0.125000 -0.000000
+v 0.250000 0.125000 -0.000000
+vt 0.874754 0.377119
+vt 0.750478 0.499280
+vt 0.750478 0.377119
+vt 0.874754 0.499280
+s off
+f 2/1 3/2 1/3
+f 2/1 4/4 3/2
--- a/assets/models/wrong.obj
+++ b/assets/models/wrong.obj
@@ -0,0 +1,14 @@
+# Blender v2.79 (sub 0) OBJ File: 'stage.blend'
+# www.blender.org
+o miss
+v -0.150000 -0.150000 0.000000
+v 0.150000 -0.150000 0.000000
+v -0.150000 0.150000 -0.000000
+v 0.150000 0.150000 -0.000000
+vt 0.781058 0.250420
+vt 0.750210 0.312117
+vt 0.750210 0.250420
+vt 0.781058 0.312117
+s off
+f 2/1 3/2 1/3
+f 2/1 4/4 3/2
--- a/assets/shaders/stage.js
+++ b/assets/shaders/stage.js
@@ -0,0 +1,28 @@
+module.exports = {
+  vertexShader : `
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    void main() {
+      uvs.xy = uv.xy;
+      vec4 p = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      worldPos = (modelMatrix * vec4( position, 1.0 )).xyz;
+      gl_Position = p;
+    }
+  `,
+
+  fragmentShader: `
+    #define FOG_RADIUS  50.0
+    #define FOG_FALLOFF 45.0
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    uniform vec3 color;
+    uniform vec3 fogColor;
+    uniform sampler2D src;
+
+    void main() {
+      vec4 col = texture2D(src, uvs);
+      col.xyz = mix(fogColor, col.xyz, clamp(distance(worldPos, vec3(0., 0., -FOG_RADIUS)) / FOG_FALLOFF, 0., 1.));
+      gl_FragColor = col;
+    }
+  `
+};
--- a/src/assets.html
+++ b/src/assets.html
@@ -13,9 +13,20 @@
 <a-asset-item id="mineBrokenObj" src="assets/models/minebroken.obj"></a-asset-item>
 <a-asset-item id="mineParticlesJSON" src="assets/models/mineparticles.json"></a-asset-item>
 <a-asset-item id="saberParticlesJSON" src="assets/models/sabercut.json"></a-asset-item>
+<!--
 <a-asset-item id="stageNeonObj" src="assets/models/neons.obj"></a-asset-item>
 <a-asset-item id="tunnelObj" src="assets/models/tunnel.obj"></a-asset-item>
 <a-asset-item id="tunnelNeonObj" src="assets/models/tunnelneon.obj"></a-asset-item>
+-->
+<a-asset-item id="stageObj" src="assets/models/stage.obj"></a-asset-item>
+<a-asset-item id="stageAdditiveObj" src="assets/models/stageadditive.obj"></a-asset-item>
+<a-asset-item id="stepbackObj" src="assets/models/stepback.obj"></a-asset-item>
+<a-asset-item id="missObj" src="assets/models/miss.obj"></a-asset-item>
+<a-asset-item id="wrongObj" src="assets/models/wrong.obj"></a-asset-item>
+<a-asset-item id="smokeObj" src="assets/models/smoke.obj"></a-asset-item>
+<a-asset-item id="audiocolumnObj" src="assets/models/audiocolumn.obj"></a-asset-item>
+
+
 <a-asset-item id="tutorial1Obj" src="assets/models/tutorial1.obj"></a-asset-item>
 <a-asset-item id="tutorial2Obj" src="assets/models/tutorial2.obj"></a-asset-item>
 <a-asset-item id="tutorial3Obj" src="assets/models/tutorial3.obj"></a-asset-item>
@@ -33,31 +44,29 @@
 <audio id="hitSound{{ i }}right" src="assets/sounds/hit{{ i }}right.ogg"></audio>
 {% endfor %}

+<img id="skyTexture" src="assets/img/sky.jpg">
 <img id="backglowTexture" src="assets/img/backglow.png">
 <img id="cursorMeshImg" src="assets/models/laser/laser.png">
 <img id="downIconImg" src="assets/img/downIcon.png">
 <img id="envmapTexture" src="assets/img/envMap.png">
 <img id="envmapWallTexture" src="assets/img/envmapwall.jpg">
-<img id="floorImg" src="assets/img/floor.png">
+<img id="neonImg" src="assets/img/neon.png">
 <img id="gridImg" src="assets/img/grid.png">
 <img id="playImg" src="assets/img/play.png">
-<img id="skyTexture" src="assets/img/sky.jpg">
 <img id="sliceImg" src="assets/img/slice.png">
 <img id="slicebtnImg" src="assets/img/slicebtn.png">
-<img id="smokeTexture" src="assets/img/smoke.png">
 <img id="beamImg" src="assets/img/beam.png">
 <img id="wrongImg" src="assets/img/wrong.png">
 <img id="missImg" src="assets/img/miss.png">
 <img id="noiseTexture" src="assets/img/noise.png">
-<img id="neonImg" src="assets/img/neon.png">
 <img id="sparkImg" src="assets/img/spark.png">
 <img id="spark2Img" src="assets/img/spark2.png">
-<img id="stepbackImg" src="assets/img/stepback.png">
 <img id="soundboxingImg" src="assets/img/soundboxing.png">
 <img id="genresImg" src="assets/img/genres.png">
 <img id="tutorialImg" src="assets/img/tutorial.png">
 <img id="floorEnvImg" src="assets/img/floorenv.jpg">
 <img id="floorNormalsImg" src="assets/img/floornormals.png">
+<img id="atlasImg" src="assets/img/atlas.png">

 <a-mixin id="slice" slice9="color: #050505; transparent: true; opacity: 0.7; src: #sliceImg; left: 50; right: 52; top: 50; bottom: 52; padding: 0.18"></a-mixin>
 <a-mixin id="font" text="font: assets/fonts/Teko-Bold.json; shader: msdf; letterSpacing: 1"></a-mixin>
@@ -119,15 +128,15 @@

 <a-mixin
  id="beatWrong"
-  geometry="primitive: plane; height: 0.3; width: 0.3"
-  material="shader: flat; transparent: true; src: #wrongImg"
+  obj-model="obj: #wrongObj"
+  material="shader: flat; transparent: true; src: #atlasImg"
  visible="false"
  animation__posz="property: object3D.position.z; to: -8; startEvents: beatwrong; easing: easeOutQuart; dur: 4000"
  animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: beatwrong; easing: easeOutQuart; dur: 4000"></a-mixin>

 <a-mixin id="beatMiss"
-  geometry="primitive: plane; height: 0.25; width: 0.5"
-  material="shader: flat; transparent: true; src: #missImg"
+  obj-model="obj: #missObj"
+  material="shader: flat; transparent: true; src: #atlasImg"
  visible="false"
  animation__posz="property: object3D.position.z; to: -8; startEvents: beatmiss; easing: easeOutQuart; dur: 4000"
  animation__alpha="property: components.material.material.opacity; from: 1; to: 0; startEvents: beatmiss; easing: easeOutQuart; dur: 4000"></a-mixin>
--- a/src/components/audio-columns.js
+++ b/src/components/audio-columns.js
@@ -1,9 +1,5 @@
-/**
- * 72 values per box.
- * Divided by 3 (x, y, z) is 24 vertices.
- * 6 vertices per side of the cube (2 faces per side).
- */
-const NUM_VALUES_PER_BOX = 72;
+
+const NUM_VALUES_PER_BOX = 90;

 /**
 * Column bars moving in sync to the audio via audio analyser.
@@ -19,6 +15,10 @@ AFRAME.registerComponent('audio-columns', {
  },

  init: function () {
+    var objData = document.getElementById('audiocolumnObj').data;
+    var loader = new THREE.OBJLoader();
+    var columnGeometry = loader.parse(objData).children[0].geometry;
+
    this.analyser = this.data.analyser.components.audioanalyser;

    // Number of levels is half the FFT size.
@@ -29,7 +29,7 @@ AFRAME.registerComponent('audio-columns', {
    let zPosition = 0;
    for (let i = 0; i < this.frequencyBinCount; i++) {
      for (let side = 0; side < 2; side++) {
-        const box = new THREE.BoxBufferGeometry();
+        const box = columnGeometry.clone();
        this.initBox(box, side === 0 ? 1 : -1, zPosition);
        geometries.push(box);
        // Move Z back.
@@ -38,7 +38,7 @@ AFRAME.registerComponent('audio-columns', {
    }

    this.geometry = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries);
-    const mesh = new THREE.Mesh(this.geometry, this.el.sceneEl.systems.materials.black);
+    const mesh = new THREE.Mesh(this.geometry, this.el.sceneEl.systems.materials.stageNormal);
    this.el.setObject3D('mesh', mesh);
  },

@@ -63,8 +63,8 @@ AFRAME.registerComponent('audio-columns', {
    // Set position and scale of box via vertices.
    for (let v = 0; v < box.attributes.position.array.length; v += 3) {
      // Apply thickness to X and Z.
-      box.attributes.position.array[v] *= data.thickness;
-      box.attributes.position.array[v + 2] *= data.thickness;
+      //box.attributes.position.array[v] *= data.thickness;
+      //box.attributes.position.array[v + 2] *= data.thickness;

      // Apply zPosition.
      box.attributes.position.array[v + 2] += zPosition;
--- a/src/components/floor-shader.js
+++ b/src/components/floor-shader.js
@@ -1,6 +1,6 @@
 AFRAME.registerShader('floorShader', {
  schema: {
-    src: {type: 'map', is: 'uniform'},
+    color: {type: 'vec3', is: 'uniform', default: {x: 0, y: 0, z: 0}},
    normalMap: {type: 'map', is: 'uniform'},
    envMap: {type: 'map', is: 'uniform'},
    hitRight: {type: 'vec3', is: 'uniform', default: {x: 0, y: 1, z: 0}},
@@ -21,7 +21,7 @@ AFRAME.registerShader('floorShader', {
  fragmentShader: `
    varying vec2 uvs;
    varying vec3 worldPos;
-    uniform sampler2D src;
+    uniform vec3 color;
    uniform sampler2D normalMap;
    uniform sampler2D envMap;
    uniform vec3 hitRight;
@@ -33,9 +33,12 @@ AFRAME.registerShader('floorShader', {

    void main() {
      vec2 p = uvs.xy - 0.5;
+      float border = smoothstep(0.49, 0.495, abs(p.x)) + smoothstep(0.49, 0.495, abs(p.y));
      p*= 4.0;

-      vec3 col = texture2D(src, uvs).xyz;
+      vec3 col = color;
+      vec3 col2 = color;
+      vec4 outColor;

      col += drawCircle(worldPos, hitRight, 0.04, 0.05, vec3(1.0, 0.4, 0.4));
      col += drawCircle(worldPos, hitRight, 0.02, 0.005, vec3(1.0, 1.0, 1.0));
@@ -48,7 +51,11 @@ AFRAME.registerShader('floorShader', {
      vec3 reflectVec = normalize(reflect(normalize(worldPos - cameraPosition), normal));
      //vec3 reflectView = normalize((viewMatrix * vec4(reflectVec, 0.0)).xyz + vec3(0.0, 0.0, 1.0));

-      gl_FragColor = vec4(texture2D(envMap, reflectVec.xy * vec2(0.3, 1.0) + vec2(0.75, -cameraPosition.z * 0.05)).xyz * 0.08 + col, 0.9 + col.x);
+      col2 = texture2D(envMap, reflectVec.xy * vec2(0.3, 1.0) + vec2(0.75, -cameraPosition.z * 0.05)).xyz * 0.08 + col;
+
+      outColor = smoothstep(vec4(col2, 0.9 + col.x), vec4(1.0), vec4(border));
+
+      gl_FragColor = outColor;
    }
  `
 });
--- a/src/components/materials.js
+++ b/src/components/materials.js
@@ -1,20 +1,57 @@
+const stageShaders = require('../../assets/shaders/stage.js')
+
 AFRAME.registerSystem('materials', {
  init: function () {
    this.black = new THREE.MeshLambertMaterial({color: 0x000000, flatShading: true});
    this.default = new THREE.MeshLambertMaterial({color: 0xff0000, flatShading: true});
    this.neon = new THREE.MeshBasicMaterial({color: 0x9999ff, fog: false});
+
+    this.stageNormal = new THREE.ShaderMaterial({
+      uniforms: {
+        color: {value: new THREE.Vector3(0, 0, 0) },
+        fogColor: {value: new THREE.Vector3(0, 0.48, 0.72) },
+        src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
+      },
+      vertexShader: stageShaders.vertexShader,
+      fragmentShader: stageShaders.fragmentShader,
+      fog: false,
+      transparent: true
+    });
  }
 });

 AFRAME.registerComponent('materials', {
  schema: {
-    default: 'black',
-    oneOf: ['black', 'default', 'neon']
+    name: { default: ''},
+    recursive: { default: true}
  },

  update: function () {
-    this.el.object3D.traverse(o => {
-      o.material = this.system[this.data]
-    });
+    var mesh;
+    var material = this.system[this.data.name];
+    if (!material) {
+      console.warn(`undefined material "${this.system[this.data.name]}"`);
+      return;
+    }
+    mesh = this.el.getObject3D('mesh');
+    if (!mesh) {
+      console.log('not loaded yet');
+      this.el.addEventListener('model-loaded', this.applyMaterial.bind(this));
+    } else {
+      this.applyMaterial(mesh);
+    }
+  },
+
+  applyMaterial: function (obj, material) {
+    var material = this.system[this.data.name];
+    if (this.data.recursive) {
+      obj.detail.model.traverse(o => {
+        if (o.type === 'Mesh') {
+          o.material = material;
+        }
+      });
+    } else {
+      obj.material = material;
+    }
  }
 });
--- a/src/components/stage-shader.js
+++ b/src/components/stage-shader.js
@@ -0,0 +1,35 @@
+AFRAME.registerShader('stageShader', {
+  schema: {
+    color: {type: 'vec3', is: 'uniform', default: {x: 0, y: 0, z: 0}},
+    fogColor: {type: 'vec3', is: 'uniform', default: {x: 0, y: 0.48, z: 0.72}},
+    src: {type: 'map', is: 'uniform'},
+
+  },
+
+  vertexShader: `
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    void main() {
+      uvs.xy = uv.xy;
+      vec4 p = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+      worldPos = (modelMatrix * vec4( position, 1.0 )).xyz;
+      gl_Position = p;
+    }
+  `,
+
+  fragmentShader: `
+    #define FOG_RADIUS  50.0
+    #define FOG_FALLOFF 45.0
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    uniform vec3 color;
+    uniform vec3 fogColor;
+    uniform sampler2D src;
+
+    void main() {
+      vec4 col = texture2D(src, uvs);
+      col.xyz = mix(fogColor, col.xyz, clamp(distance(worldPos, vec3(0., 0., -FOG_RADIUS)) / FOG_FALLOFF, 0., 1.));
+      gl_FragColor = col;
+    }
+  `
+});
--- a/src/index.html
+++ b/src/index.html
@@ -17,6 +17,7 @@
    <audio id="introSong" src="assets/sounds/introSong.ogg" loop></audio>

    <a-scene
+    stats
      mixin="gameoverAnimation fogAnimation"
      bind__beat-loader="challengeId: challenge.id; difficulty: menuSelectedChallenge.difficulty; isPlaying: isPlaying; menuSelectedChallengeId: menuSelectedChallenge.id"
      bind__gameover="isGameOver: isGameOver"
@@ -224,9 +225,9 @@
      <a-entity
        id="stepback"
        class="overlay"
-        geometry="primitive: plane; width: 0.5; height: 0.25;"
+        obj-model="obj: #stepbackObj"
        position="0 1.6 -1.55"
-        material="shader: flat; src: #stepbackImg; transparent: true; opacity: 0"></a-entity>
+        material="shader: flat; src: #atlasImg; transparent: true; opacity: 0"></a-entity>

      {% if not IS_PRODUCTION %}
        <a-entity
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -64,7 +64,7 @@ AFRAME.registerState({
    leaderboardQualified: false,
    leaderboardNames: '',
    leaderboardScores: '',
-    menuActive: true,  // Main menu active.
+    menuActive: false,  // Main menu active.
    menuDifficulties: [],  // List of strings of available difficulties for selected.
    menuSelectedChallenge: {  // Currently selected challenge in the main menu.
      author: '',
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -25,6 +25,7 @@

 <a-sky
  id="sky"
+  visible="false"
  mixin="gameoverAnimation bgAnimation"
  animation__gameover="property: components.material.material.color; type: color; to: #301000; startEvents: gameover"
  geometry="segmentsHeight: 16; segmentsWidth: 32"
@@ -37,12 +38,14 @@
  proxy-event="event: audioanalyserbeat; to: #logolight"></a-entity>

 <a-entity id="stage">
+
  <a-entity id="backglow"
+    visible="false"
    mixin="gameoverAnimation bgAnimation"
    animation__gameover="property: components.material.material.opacity; to: 0.2; startEvents: gameover"
    obj-model="obj: #backglowObj"
    material="transparent: true; color: #f00; src: #backglowTexture; opacity: 0.7"
-    position="0 0 -50"
+    position="0 0 -60"
    scale="20 20 20"></a-entity>

  <a-entity id="twister" position="0 0 -35" rotation="90 0 0" bind__twister="enabled: isPlaying"></a-entity>
@@ -52,15 +55,14 @@
    audio-columns="analyser: #audioAnalyser; height: 28; mirror: 18; scale: 9; thickness: 0.6; separation: 0.55"
    position="0 -19 5"></a-entity>

+<!--
  <a-mixin id="corridor" geometry="skipCache: true" vertex-colors-buffer="baseColor: #010101" visible="false"></a-mixin>
  <a-entity id="stageCorridor" buffer-geometry-merger material="shader: flat; flatShading: true; vertexColors: vertex">
-    <!-- Corridor. -->
    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85"></a-entity>
    <a-entity mixin="corridor" geometry="height: 20; depth: 0.3; width: 0.3" position="1.9 -9.97 -7"></a-entity>
    <a-entity mixin="corridor" geometry="height: 20; depth: 0.3; width: 0.3" position="-1.9 -9.97 -7"></a-entity>
    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 0.3" position="1.9 -1 -31.85"></a-entity>
    <a-entity mixin="corridor" geometry="height: 0.3; depth: 50; width: 0.3" position="-1.9 -1 -31.85"></a-entity>
-    <!-- Corridor handrail. -->
    <a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="3.5 -10 -7"></a-entity>
    <a-entity mixin="corridor" geometry="height: 21.5; depth: 0.2; width: 0.2" position="-3.5 -10 -7"></a-entity>
  </a-entity>
@@ -80,6 +82,16 @@
    id="stageNeon"
    mixin="neonAnimation"
    obj-model="obj: #stageNeonObj"></a-entity>
+-->
+  <a-entity
+    id="stageobj"
+    obj-model="obj: #stageObj"
+    materials="name: stageNormal"></a-entity>
+  <a-entity
+    id="stageadditiveobj"
+    obj-model="obj: #stageAdditiveObj"
+    material="shader: flat; color: #f00; src: #atlasImg; transparent: true; blending: additive; depthWrite: false; fog: false"></a-entity>
+

  <!-- Lasers left. -->
  <a-entity id="leftStageLasers" bind__stage-lasers="enabled: isPlaying">
@@ -100,13 +112,12 @@
  <a-mixin
    id="smoke"
    mixin="gameoverAnimation"
-    additive
    animation__gameover="property: components.material.material.opacity; to: 0; startEvents: gameover"
    animation__rotate="property: rotation; to: 0 360 0; easing: linear; loop: true"
-    geometry="primitive: cylinder; height: 30"
-    material="src: #smokeTexture; repeat: 2 1; side: double; fog: true; shader: flat; transparent: true; color: #111"></a-mixin>
-  <a-entity id="smoke1" mixin="smoke" geometry="radius: 10" position="0 1.4 0" animation__rotate="dur: 200000"></a-entity>
-  <a-entity id="smoke2" mixin="smoke" geometry="radius: 20" position="0 1.8 0" animation__rotate="dur: 243000"></a-entity>
+    obj-model="obj:#smokeObj"
+    material="src: #atlasImg; fog: false; shader: flat; transparent: true"></a-mixin>
+  <a-entity id="smoke1" mixin="smoke" position="0 1.4 0" animation__rotate="dur: 200000"></a-entity>
+  <a-entity id="smoke2" mixin="smoke" position="0 1.8 0" scale="1.25 0.8 1.25" animation__rotate="dur: 243000"></a-entity>

  <a-entity light="type: directional; intensity: 3" position="0 10 10"></a-entity>

@@ -124,13 +135,15 @@
    <a-entity id="logoFrontU" obj-model="obj: #logofrontUObj" material="color: #e81e23" logoflicker="delay: 1200" bind__logoflicker="active: menuActive || isVictory"></a-entity>
  </a-entity>

+    <!-- material="color: #030303" -->
  <a-entity
    id="floor"
    data-saber-particles
    geometry="primitive: plane; width: 3; height: 3"
-    material="shader: floorShader; src: #floorImg; normalMap: #floorNormalsImg; envMap: #floorEnvImg; hitRight: -999 0 0; hitLeft: -999 0 0"
    rotation="-90 0 0"
    raycastable-game
+    rotation="-90 0 0"
+    material="shader: floorShader; color: #f33; normalMap: #floorNormalsImg; envMap: #floorEnvImg"
    stepback></a-entity>

  <a-entity