new glow in beat symbols

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;
         }