created stage atlas+meshes, simplifying models and materials

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;

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

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

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;
+    }
+  `
+});