backglow, fog and tunnel neon colors (events 0 & 1)

assets/models/smoke.obj

@@ -1,30 +1,29 @@
 # Blender v2.79 (sub 0) OBJ File: 'stage.blend'
 # www.blender.org
-o smoke
+v 0.000000 -9.030719 -3.977880
-v 0.000000 -9.030719 -5.000000
+v 0.000000 9.030719 -3.977880
-v 0.000000 9.030719 -5.000000
+v 1.988940 -9.030719 -3.444945
-v 2.500000 -9.030719 -4.330127
+v 1.988940 9.030719 -3.444945
-v 2.500000 9.030719 -4.330127
+v 3.444945 -9.030719 -1.988940
-v 4.330127 -9.030719 -2.500000
+v 3.444945 9.030719 -1.988940
-v 4.330127 9.030719 -2.500000
+v 3.977880 -9.030719 0.000000
-v 5.000000 -9.030719 0.000000
+v 3.977880 9.030719 0.000000
-v 5.000000 9.030719 0.000000
+v 3.444945 -9.030719 1.988940
-v 4.330127 -9.030719 2.500000
+v 3.444945 9.030719 1.988940
-v 4.330127 9.030719 2.500000
+v 1.988940 -9.030719 3.444945
-v 2.500000 -9.030719 4.330127
+v 1.988940 9.030719 3.444945
-v 2.500000 9.030719 4.330127
+v 0.000001 -9.030719 3.977880
-v 0.000001 -9.030719 5.000000
+v 0.000001 9.030719 3.977880
-v 0.000001 9.030719 5.000000
+v -1.988939 -9.030719 3.444946
-v -2.499999 -9.030719 4.330128
+v -1.988939 9.030719 3.444946
-v -2.499999 9.030719 4.330128
+v -3.444944 -9.030719 1.988941
-v -4.330126 -9.030719 2.500001
+v -3.444944 9.030719 1.988941
-v -4.330126 9.030719 2.500001
+v -3.977880 -9.030719 0.000002
-v -5.000000 -9.030719 0.000002
+v -3.977880 9.030719 0.000002
-v -5.000000 9.030719 0.000002
+v -3.444946 -9.030719 -1.988938
-v -4.330129 -9.030719 -2.499997
+v -3.444946 9.030719 -1.988938
-v -4.330129 9.030719 -2.499997
+v -1.988942 -9.030719 -3.444944
-v -2.500003 -9.030719 -4.330125
+v -1.988942 9.030719 -3.444944
-v -2.500003 9.030719 -4.330125
 vt 0.750488 0.751420
 vt 0.874158 0.792572
 vt 0.750488 0.792573

assets/models/stagenormal.obj

@@ -1010,30 +1010,30 @@ f 174/183 241/4 171/176
 f 174/183 14/182 61/5
 f 56/193 178/192 242/1
 f 178/192 20/191 58/2
-v 25.250380 -68.634323 -67.805519
+v 36.568962 -99.399925 -74.112007
-v -7.311297 -99.964310 -32.531570
+v -10.588614 -144.773712 -34.380539
-v 44.684368 -90.595970 -33.472618
+v 64.714310 -131.205963 -35.090111
-v 79.610504 -63.938412 -32.754875
+v 115.296219 -92.599060 -34.548916
-v 61.499004 -32.072090 -70.036674
+v 89.066177 -46.448528 -75.794334
-v 98.332626 -29.744064 -33.095043
+v 142.410614 -43.076958 -34.805408
-v 51.503872 22.417212 -76.709694
+v 74.590683 32.465813 -80.825912
-v 14.304985 -8.711819 -88.150589
+v 20.717251 -12.616927 -92.820320
-v 105.055351 2.702891 -35.296719
+v 152.146820 3.914473 -36.465511
-v 89.332321 48.762192 -34.885387
+v 129.375885 70.620033 -36.155357
-v 65.318703 77.625633 -32.835403
+v 94.598068 112.421623 -34.609634
-v -16.076511 27.427702 -84.945648
+v -23.282871 39.722275 -90.403732
-v 16.332134 97.253868 -30.664419
+v 23.653076 140.848297 -32.972672
-v 20.590061 63.521618 -70.832603
+v 29.819637 91.995430 -76.394478
-v -53.870377 48.526577 -66.212524
+v -78.017982 70.278809 -72.910858
-v -30.491152 -18.268398 -83.639061
+v -44.158932 -26.457281 -89.418549
-v -70.286758 -22.024078 -63.045624
+v -101.793068 -31.896458 -70.522957
-v -97.320869 15.491239 -33.894066
+v -140.945328 22.435247 -35.407883
-v -95.810577 -29.966383 -34.246368
+v -138.758041 -43.398933 -35.673531
-v -31.799715 -69.905716 -62.168251
+v -46.054062 -101.241234 -69.861404
-v -82.204628 -59.143867 -35.069153
+v -119.053177 -85.655334 -36.293922
-v -27.901575 95.337463 -32.635284
+v -40.408566 138.072861 -34.458740
-v -65.497749 74.145546 -33.944809
+v -94.857376 107.381577 -35.446144
-v -49.135437 -85.633934 -33.154804
+v -71.160591 -124.019684 -34.850471
 vt 0.610526 0.513119
 vt 0.608613 0.612561
 vt 0.550821 0.559857

assets/shaders/stageAdditive.js

@@ -13,12 +13,14 @@ module.exports = {
   fragmentShader: `
     varying vec2 uvs;
     varying vec3 worldPos;
-    uniform vec3 redColor;
+    uniform vec3 tunnelNeon;
-    uniform vec3 blueColor;
     uniform sampler2D src;
 
     void main() {
       vec4 col = texture2D(src, uvs);
+      float mask = min(step(0.87, uvs.x), step(0.5, uvs.y));
+      mask = min(mask, 1.0 - step(0.75, uvs.y));
+      col.xyz = mix(col.xyz, col.xyz * tunnelNeon, mask);
       gl_FragColor = col;
     }
   `

assets/shaders/stageNormal.js

@@ -11,18 +11,20 @@ module.exports = {
   `,
 
   fragmentShader: `
-    #define FOG_RADIUS  50.0
+    #define FOG_RADIUS  55.0
-    #define FOG_FALLOFF 45.0
+    #define FOG_FALLOFF 50.0
+    #define FOG_COLOR_MULT 0.85
     varying vec2 uvs;
     varying vec3 worldPos;
-    uniform vec3 redColor;
+    uniform vec3 color;
-    uniform vec3 blueColor;
-    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.));
+      float mask = step(0.5, uvs.x);
+      mask = min(mask, max(step(0.75, uvs.x), 1.0 - step(0.5, uvs.y)));
+      col = mix(col * vec4(color, 1.0), col, mask);
+      col.xyz = mix(color * FOG_COLOR_MULT, col.xyz, clamp(distance(worldPos, vec3(0., 0., -FOG_RADIUS)) / FOG_FALLOFF, 0., 1.));
       gl_FragColor = col;
     }
   `

src/assets.html

@@ -20,7 +20,7 @@
 <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="stageNormalObj" src="assets/models/stagenormal.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>
@@ -150,5 +150,22 @@
   animation__mouseenter1="property: components.slice9.material.color; type: color; from: #999; to: #FFF; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
   animation__mouseleave1="property: components.slice9.material.color; type: color; from: #FFF; to: #999; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
   animation__mouseenter2="property: scale; from: 1 1 1; to: 1.1 1.1 1.1; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-  animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150">
+  animation__mouseleave2="property: scale; to: 1 1 1; from: 1.1 1.1 1.1; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-mixin>
-</a-mixin>
+
+
+<a-mixin id="bgColorAnimation"
+  animation__bgcoloroff="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #111; dur: 500; easing: linear; startEvents: bgcoloroff"
+  animation__bgcolorblue="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: bgcolorblue"
+  animation__bgcolorbluefade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: bgcolorbluefade"
+  animation__bgcolorred="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: bgcolorred"
+  animation__bgcolorredfade="isRawProperty: true; property: systems.materials.stageNormal.uniforms.color.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: bgcolorredfade"
+  ></a-mixin>
+
+
+<a-mixin id="tunnelColorAnimation"
+  animation__tunnelcoloroff="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #111; dur: 500; easing: linear; startEvents: tunnelcoloroff"
+  animation__tunnelcolorblue="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: tunnelcolorblue"
+  animation__tunnelcolorbluefade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: tunnelcolorbluefade"
+  animation__tunnelcolorred="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: tunnelcolorred"
+  animation__tunnelcolorredfade="isRawProperty: true; property: systems.materials.stageAdditive.uniforms.tunnelNeon.value; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: tunnelcolorredfade"
+  ></a-mixin>

src/components/beat-loader.js

@@ -281,38 +281,36 @@ AFRAME.registerComponent('beat-loader', {
   generateEvent: function (event) {
     switch(event._type) {
       case 0:
-        this.stageColors.setColor('fog', event._value);
+        this.stageColors.setColor('bg', event._value);
-        this.stageColors.setColor('sky', event._value);
-        this.stageColors.setColor('backglow', event._value);
         break;
       case 1:
-        this.stageColors.setColor('tunnelNeon', event._value);
+        this.stageColors.setColor('tunnel', event._value);
         break;
-      case 2:
+      case 200:
         this.stageColors.setColor('leftStageLaser0', event._value);
         this.stageColors.setColor('leftStageLaser1', event._value);
         this.stageColors.setColor('leftStageLaser2', event._value);
         break;
-      case 3:
+      case 300:
         this.stageColors.setColor('rightStageLaser0', event._value);
         this.stageColors.setColor('rightStageLaser1', event._value);
         this.stageColors.setColor('rightStageLaser2', event._value);
         break;
-      case 4:
+      case 400:
         this.stageColors.setColor('floor', event._value);
         this.stageColors.setColor('stageNeon', event._value);
         break;
-      case 8:
+      case 800:
         this.twister.components.twister.pulse(event._value);
         break;
-      case 9:
+      case 900:
         // zoom was a bit disturbing
         this.twister.components.twister.pulse(event._value);
         break;
-      case 12:
+      case 1200:
         this.leftStageLasers.components['stage-lasers'].pulse(event._value);
         break;
-      case 13:
+      case 1300:
         this.rightStageLasers.components['stage-lasers'].pulse(event._value);
         break;
     }

src/components/materials.js

@@ -9,9 +9,7 @@ AFRAME.registerSystem('materials', {
 
     this.stageNormal = new THREE.ShaderMaterial({
       uniforms: {
-        redColor: {value: new THREE.Vector3(1, 0, 0) },
+        color: {value: new THREE.Vector3(0, 0.48, 0.72) },
-        blueColor: {value: new THREE.Vector3(0, 0, 1) },
-        fogColor: {value: new THREE.Vector3(0, 0.48, 0.72) },
         src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
       },
       vertexShader: stageNormalShaders.vertexShader,
@@ -22,14 +20,13 @@ AFRAME.registerSystem('materials', {
 
     this.stageAdditive = new THREE.ShaderMaterial({
       uniforms: {
-        redColor: {value: new THREE.Vector3(1, 0, 0) },
+        tunnelNeon: {value: new THREE.Vector3(0, 0, 1) },
-        blueColor: {value: new THREE.Vector3(0, 0, 1) },
         src: {value: new THREE.TextureLoader().load(document.getElementById('atlasImg').src)},
       },
       vertexShader: stageAdditiveShaders.vertexShader,
       fragmentShader: stageAdditiveShaders.fragmentShader,
-      fog: false,
       blending: THREE.AdditiveBlending,
+      fog: false,
       transparent: true
     });
   }
@@ -51,7 +48,6 @@ AFRAME.registerComponent('materials', {
     }
     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);

src/components/stage-colors.js

@@ -1,14 +1,35 @@
 function $ (id) { return document.getElementById(id); };
 
 AFRAME.registerComponent('stage-colors', {
-  dependencies: ['background', 'fog'],
+  dependencies: ['background'],
 
   schema: {
     color: {default: 'blue', oneOf: ['blue', 'red']}
   },
 
   init: function () {
-    /*
+    this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
+    this.el.addEventListener('cleargame', this.resetColors.bind(this));
+  },
+
+  update: function (oldData) {
+    this.updateColors(this.data.color);
+  },
+
+  setColor: function (target, code) {
+    this.el.emit(`${target}color${this.colorCodes[code]}`, null, false);
+  },
+
+  resetColors: function () {
+    this.updateColors('blue');
+    this.el.emit('bgcolorblue', null, false);
+  },
+
+  updateColors: function (color) {
+  }
+
+/*
+  init: function () {
     this.neonRed = new THREE.Color(0xff9999);
     this.neonBlue = new THREE.Color(0x9999ff);
     this.defaultRed = new THREE.Color(0xff0000);
@@ -31,13 +52,10 @@ AFRAME.registerComponent('stage-colors', {
       envMap: this.mineEnvMap[this.data.color]
     });
     this.sky = document.getElementById('sky');
-    this.backglow = document.getElementById('backglow');
     this.auxColor = new THREE.Color();
 
     this.targets = {};
-    ['fog',
+    ['stageNormal',
-     'sky',
-     'backglow',
      'tunnelNeon',
      'leftStageLaser0',
      'leftStageLaser1',
@@ -47,48 +65,34 @@ AFRAME.registerComponent('stage-colors', {
      'rightStageLaser2',
      'floor',
      'stageNeon'].forEach(id => {
-        this.targets[id] = id == 'fog' ? this.el.sceneEl : document.getElementById(id);
+        this.targets[id] = document.getElementById(id);
      });
 
     this.colorCodes = ['off', 'blue', 'blue', 'bluefade', '', 'red', 'red', 'redfade'];
 
     this.el.addEventListener('cleargame', this.resetColors.bind(this));
-    */
   },
 
   update: function (oldData) {
-   // this.updateColors(this.data.color);
+    this.updateColors(this.data.color);
   },
 
   setColor: function (target, code) {
-  /*  const mesh = this.targets[target].getObject3D('mesh');
+    const mesh = this.targets[target].getObject3D('mesh');
     if (mesh) { mesh.material.opacity = 1; }
     this.targets[target].emit('color' + this.colorCodes[code], null, false);
-  */
   },
 
   resetColors: function () {
-  /*
     this.updateColors('blue');
     for (let target in this.targets) {
       this.targets[target].emit('colorblue', null, false);
     }
-    */
   },
 
   updateColors: function (color) {
-  /*
     const red = color === 'red';
 
-    // Init or reset.
-    try {
-      this.backglow.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
-    } catch (e) {
-      this.backglow.addEventListener('object3dset', () => {
-        this.backglow.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
-      });
-    }
-
     this.sky.getObject3D('mesh').material.color.set(red ? '#f10' : '#00acfc');
     this.el.sceneEl.object3D.background.set(red ? '#770100' : '#15252d');
     this.el.sceneEl.object3D.fog.color.set(red ? '#a00' : '#007cb9');
@@ -100,6 +104,7 @@ AFRAME.registerComponent('stage-colors', {
     this.mineMaterial.emissive = this.mineEmission[red ? 'red' : 'blue'];
     this.mineMaterial.envMap = this.mineEnvMap[red ? 'red' : 'blue'];
     this.mineMaterial.needsUpdate = true;
-  */
   }
+
+  */
 });

src/index.html

@@ -18,7 +18,7 @@
 
     <a-scene
     stats
-      mixin="gameoverAnimation fogAnimation"
+      mixin="gameoverAnimation fogAnimation bgColorAnimation tunnelColorAnimation"
       bind__beat-loader="challengeId: challenge.id; difficulty: menuSelectedChallenge.difficulty; isPlaying: isPlaying; menuSelectedChallengeId: menuSelectedChallenge.id"
       bind__gameover="isGameOver: isGameOver"
       bind__intro-song="isPlaying: menuActive && !menuSelectedChallenge.id; isSearching: isSearching"

src/templates/stage.html

@@ -8,20 +8,6 @@
   animation__colorred="property: components.material.material.color; type: color; to: #FFAAAA; dur: 5; easing: linear; startEvents: colorred"
   animation__colorredfade="property: components.material.material.color; type: color; from: #FEE; to: #ffAAAA; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
 
-<a-mixin id="bgAnimation"
-  material="shader: flat; fog: false"
-  animation__coloroff="property: components.material.material.color; type: color; to: #111; dur: 500; easing: linear; startEvents: coloroff"
-  animation__colorblue="property: components.material.material.color; type: color; to: #00acfc; dur: 5; easing: linear; startEvents: colorblue"
-  animation__colorbluefade="property: components.material.material.color; type: color; from: #5FCCFF; to: #00acfc; dur: 500; easing: linear; startEvents: colorbluefade"
-  animation__colorred="property: components.material.material.color; type: color; to: #fc0000; dur: 5; easing: linear; startEvents: colorred"
-  animation__colorredfade="property: components.material.material.color; type: color; from: #FF4343; to: #fc0000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
-
-<a-mixin id="fogAnimation"
-  animation__coloroff="property: components.fog.el.object3D.fog.color; type: color; to: #010101; dur: 500; easing: linear; startEvents: coloroff"
-  animation__colorblue="property: components.fog.el.object3D.fog.color; type: color; to: #007cb9; dur: 5; easing: linear; startEvents: colorblue"
-  animation__colorbluefade="property: components.fog.el.object3D.fog.color; type: color; from: #3398CA; to: #007cb9; dur: 500; easing: linear; startEvents: colorbluefade"
-  animation__colorred="property: components.fog.el.object3D.fog.color; type: color; to: #b90000; dur: 5; easing: linear; startEvents: colorred"
-  animation__colorredfade="property: components.fog.el.object3D.fog.color; type: color; from: #ff0000; to: #b90000; dur: 500; easing: linear; startEvents: colorredfade"></a-mixin>
 <!--
 
 <a-sky
@@ -87,7 +73,8 @@
 -->
   <a-entity
     id="stageobj"
-    obj-model="obj: #stageObj"
+    mixin="gameoverAnimation"
+    obj-model="obj: #stageNormalObj"
     materials="name: stageNormal"></a-entity>
   <a-entity
     id="stageadditiveobj"