new glow in beat symbols

assets/models/arrowblue.obj

@@ -0,0 +1,13 @@
+# Blender v2.79 (sub 0) OBJ File: 'arrow.blend'
+# www.blender.org
+v -0.141207 0.007874 0.148353
+v 0.141207 0.007874 0.148353
+v -0.141207 0.143124 0.148353
+v 0.141207 0.143124 0.148353
+vt 0.876020 0.124107
+vt 0.906528 0.250005
+vt 0.876020 0.250005
+vt 0.906528 0.124107
+s off
+f 2/1 3/2 1/3
+f 2/1 4/4 3/2

assets/models/arrowred.obj

@@ -0,0 +1,13 @@
+# Blender v2.79 (sub 0) OBJ File: 'arrow.blend'
+# www.blender.org
+v -0.141207 0.007874 0.148353
+v 0.141207 0.007874 0.148353
+v -0.141207 0.143124 0.148353
+v 0.141207 0.143124 0.148353
+vt 0.876020 -0.000707
+vt 0.906528 0.125190
+vt 0.876020 0.125190
+vt 0.906528 -0.000707
+s off
+f 2/1 3/2 1/3
+f 2/1 4/4 3/2

assets/models/dot.obj

@@ -1,51 +0,0 @@
-# Blender v2.79 (sub 0) OBJ File: 'cube.blend'
-# www.blender.org
-o dot
-v 0.000000 0.044271 0.148510
-v -0.011944 0.042630 0.148510
-v -0.023003 0.037826 0.148510
-v -0.032355 0.030218 0.148510
-v -0.039308 0.020368 0.148510
-v -0.043345 0.009007 0.148510
-v -0.044168 -0.003021 0.148510
-v -0.041715 -0.014826 0.148510
-v -0.036168 -0.025530 0.148510
-v -0.027939 -0.034342 0.148510
-v -0.017638 -0.040606 0.148510
-v -0.006028 -0.043859 0.148510
-v 0.006028 -0.043859 0.148510
-v 0.017638 -0.040606 0.148510
-v 0.027939 -0.034342 0.148510
-v 0.036168 -0.025530 0.148510
-v 0.041715 -0.014826 0.148510
-v 0.044168 -0.003021 0.148510
-v 0.043345 0.009007 0.148510
-v 0.039308 0.020368 0.148510
-v 0.032355 0.030217 0.148510
-v 0.023003 0.037826 0.148510
-v 0.011944 0.042630 0.148510
-v -0.000000 -0.000000 0.148510
-s off
-f 1 24 23
-f 2 3 24
-f 3 4 24
-f 4 5 24
-f 5 6 24
-f 6 7 24
-f 7 8 24
-f 8 9 24
-f 9 10 24
-f 10 11 24
-f 11 12 24
-f 12 13 24
-f 13 14 24
-f 14 15 24
-f 15 16 24
-f 16 17 24
-f 17 18 24
-f 18 19 24
-f 19 20 24
-f 20 21 24
-f 21 22 24
-f 23 24 22
-f 1 2 24

assets/models/dotblue.obj

@@ -0,0 +1,13 @@
+# Blender v2.79 (sub 0) OBJ File: 'arrow.blend'
+# www.blender.org
+v -0.113797 -0.089483 0.148353
+v 0.114781 -0.089483 0.148353
+v 0.114781 0.089968 0.148353
+v -0.113797 0.089968 0.148353
+vt 0.907505 0.148474
+vt 0.936174 0.220642
+vt 0.907505 0.220642
+vt 0.936174 0.148474
+s off
+f 2/1 4/2 1/3
+f 2/1 3/4 4/2

assets/models/dotred.obj

@@ -0,0 +1,13 @@
+# Blender v2.79 (sub 0) OBJ File: 'arrow.blend'
+# www.blender.org
+v -0.113797 -0.089483 0.148353
+v 0.114781 -0.089483 0.148353
+v 0.114781 0.089968 0.148353
+v -0.113797 0.089968 0.148353
+vt 0.907505 0.026157
+vt 0.936174 0.098326
+vt 0.907505 0.098326
+vt 0.936174 0.026157
+s off
+f 2/1 4/2 1/3
+f 2/1 3/4 4/2

assets/shaders/stageAdditive.js

@@ -0,0 +1,25 @@
+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: `
+    varying vec2 uvs;
+    varying vec3 worldPos;
+    uniform vec3 redColor;
+    uniform vec3 blueColor;
+    uniform sampler2D src;
+
+    void main() {
+      vec4 col = texture2D(src, uvs);
+      gl_FragColor = col;
+    }
+  `
+};

assets/shaders/stageNormal.js

@@ -15,7 +15,8 @@ module.exports = {
     #define FOG_FALLOFF 45.0
     varying vec2 uvs;
     varying vec3 worldPos;
-    uniform vec3 color;
+    uniform vec3 redColor;
+    uniform vec3 blueColor;
     uniform vec3 fogColor;
     uniform sampler2D src;
 

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. -->