new glow in beat symbols

src/assets.html

@@ -1,7 +1,9 @@
-<a-asset-item id="arrowObj" src="assets/models/arrow.obj"></a-asset-item>
+<a-asset-item id="arrowredObj" src="assets/models/arrowred.obj"></a-asset-item>
+<a-asset-item id="arrowblueObj" src="assets/models/arrowblue.obj"></a-asset-item>
+<a-asset-item id="dotredObj" src="assets/models/dotred.obj"></a-asset-item>
+<a-asset-item id="dotblueObj" src="assets/models/dotblue.obj"></a-asset-item>
 <a-asset-item id="backglowObj" src="assets/models/backglow.obj"></a-asset-item>
 <a-asset-item id="beatObj" src="assets/models/beat.obj"></a-asset-item>
-<a-asset-item id="dotObj" src="assets/models/dot.obj"></a-asset-item>
 <a-asset-item id="logofrontObj" src="assets/models/logofront.obj"></a-asset-item>
 <a-asset-item id="logobackObj" src="assets/models/logoback.obj"></a-asset-item>
 <a-asset-item id="logofrontUObj" src="assets/models/logofront-u.obj"></a-asset-item>

src/components/beat.js

@@ -6,7 +6,6 @@ const BEAT_WARMUP_ROTATION_CHANGE = Math.PI / 5;
 const BEAT_WARMUP_ROTATION_OFFSET = 0.4;
 const BEAT_WARMUP_ROTATION_TIME = 750;
 const ONCE = {once: true};
-const SIGN_MATERIAL = {shader: 'flat', color: '#88f'};
 
 const SCORE_POOL = {
   OK : 'pool__beatscoreok',
@@ -50,8 +49,10 @@ AFRAME.registerComponent('beat', {
   },
 
   signModels: {
-    arrow: 'arrowObjTemplate',
-    dot: 'dotObjTemplate'
+    arrowred: 'arrowRedObjTemplate',
+    arrowblue: 'arrowBlueObjTemplate',
+    dotred: 'dotRedObjTemplate',
+    dotblue: 'dotBlueObjTemplate'
   },
 
   orientations: [180, 0, 270, 90, 225, 135, 315, 45, 0],
@@ -273,8 +274,8 @@ AFRAME.registerComponent('beat', {
         }, ONCE);
       }
     } else {
-      signEl.setAttribute('material', SIGN_MATERIAL);
-      this.setObjModelFromTemplate(signEl, this.signModels[this.data.type]);
+      signEl.setAttribute('materials', {name: 'stageAdditive'});
+      this.setObjModelFromTemplate(signEl, this.signModels[this.data.type + this.data.color]);
     }
   },
 
@@ -628,6 +629,7 @@ AFRAME.registerComponent('beat', {
 
   returnToPool: function (force) {
     if (!this.backToPool && !force) { return; }
+    console.log('returning ' + this.poolName + ' to pool');
     this.el.sceneEl.components[this.poolName].returnEntity(this.el);
   },
 

src/components/materials.js

@@ -1,4 +1,5 @@
-const stageShaders = require('../../assets/shaders/stage.js')
+const stageNormalShaders = require('../../assets/shaders/stageNormal.js')
+const stageAdditiveShaders = require('../../assets/shaders/stageAdditive.js')
 
 AFRAME.registerSystem('materials', {
   init: function () {
@@ -8,15 +9,29 @@ AFRAME.registerSystem('materials', {
 
     this.stageNormal = new THREE.ShaderMaterial({
       uniforms: {
-        color: {value: new THREE.Vector3(0, 0, 0) },
+        redColor: {value: new THREE.Vector3(1, 0, 0) },
+        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: stageShaders.vertexShader,
-      fragmentShader: stageShaders.fragmentShader,
+      vertexShader: stageNormalShaders.vertexShader,
+      fragmentShader: stageNormalShaders.fragmentShader,
       fog: false,
       transparent: true
     });
+
+    this.stageAdditive = new THREE.ShaderMaterial({
+      uniforms: {
+        redColor: {value: new THREE.Vector3(1, 0, 0) },
+        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,
+      transparent: true
+    });
   }
 });
 
@@ -27,6 +42,7 @@ AFRAME.registerComponent('materials', {
   },
 
   update: function () {
+    if (this.data.name === "") return;
     var mesh;
     var material = this.system[this.data.name];
     if (!material) {
@@ -42,10 +58,11 @@ AFRAME.registerComponent('materials', {
     }
   },
 
-  applyMaterial: function (obj, material) {
+  applyMaterial: function (obj) {
     var material = this.system[this.data.name];
+    if (obj['detail']) { obj = obj.detail.model; }
     if (this.data.recursive) {
-      obj.detail.model.traverse(o => {
+      obj.traverse(o => {
         if (o.type === 'Mesh') {
           o.material = material;
         }

src/index.html

@@ -60,9 +60,11 @@
         {% include './assets.html' %}
       </a-assets>
 
-      <a-entity id="arrowObjTemplate" obj-model="obj: #arrowObj" visible="false"></a-entity>
       <a-entity id="beatObjTemplate" obj-model="obj: #beatObj" visible="false"></a-entity>
-      <a-entity id="dotObjTemplate" obj-model="obj: #dotObj" visible="false"></a-entity>
+      <a-entity id="arrowRedObjTemplate" obj-model="obj: #arrowredObj" visible="false"></a-entity>
+      <a-entity id="arrowBlueObjTemplate" obj-model="obj: #arrowblueObj" visible="false"></a-entity>
+      <a-entity id="dotRedObjTemplate" obj-model="obj: #dotredObj" visible="false"></a-entity>
+      <a-entity id="dotBlueObjTemplate" obj-model="obj: #dotblueObj" visible="false"></a-entity>
       <a-entity id="mineObjTemplate" obj-model="obj: #mineObj" visible="false"></a-entity>
       <a-entity id="cursorLaser" obj-model="obj: #laserObj" visible="false"></a-entity>
 

src/templates/stage.html

@@ -92,7 +92,7 @@
   <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>
+    materials="name: stageAdditive"></a-entity>
 
 
   <!-- Lasers left. -->