merge audio columns into 1 buffer geometry and use buffers to scale to audio, only need to create 64 boxes not 256, fix redundant boxes

src/components/analyzer.js

@@ -1,46 +0,0 @@
-AFRAME.registerComponent('analyser', {
-  dependencies: ['audioanalyser'],
-  schema: {
-    height: {default: 1.0},
-    thickness: {default: 0.1},
-    separation: {default: 0.3},
-    scale: {default: 4.0},
-    mirror: {default: 3}
-  },
-
-  init: function () {
-    this.analyser = this.el.components.audioanalyser;
-    this.columns = null;
-    var material = this.el.sceneEl.systems.materials.black;
-    var geometry = new THREE.BoxBufferGeometry();
-    for (var i = 0; i < this.analyser.data.fftSize; i++) {
-      for (var side = 0; side < 2; side++) {
-        var column = new THREE.Mesh(geometry, material);
-        this.el.object3D.add(column);
-      }
-    }
-    this.columns = this.el.object3D.children;
-  },
-
-  update: function () {
-    var z = 0;
-    for (var i = 0; i < this.columns.length; i++) {
-      this.columns[i].position.x = ((i % 2) * 2 - 1) * this.data.mirror;
-      this.columns[i].position.z = z;
-      this.columns[i].scale.set(this.data.thickness, this.data.height, this.data.thickness);
-      z -= this.data.separation;
-    }
-  },
-
-  tick: function () {
-    var v; 
-    var height = this.data.height;
-    var n = this.columns.length / 2;
-
-    for (var i = 0; i < n; i++) {
-      v = height + this.analyser.levels[i] / 256.0 * this.data.scale;
-      this.columns[i * 2 + 0].scale.y = v;
-      this.columns[i * 2 + 1].scale.y = v;
-    }
-  }
-});

src/components/audio-columns.js

@@ -0,0 +1,94 @@
+/**
+ * 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;
+
+/**
+ * Column bars moving in sync to the audio via audio analyser.
+ */
+AFRAME.registerComponent('audio-columns', {
+  dependencies: ['audioanalyser'],
+
+  schema: {
+    height: {default: 1.0},
+    mirror: {default: 3},
+    scale: {default: 4.0},
+    separation: {default: 0.3},
+    thickness: {default: 0.1}
+  },
+
+  init: function () {
+    this.analyser = this.el.components.audioanalyser;
+
+    // Number of levels is half the FFT size.
+    this.frequencyBinCount = this.analyser.data.fftSize / 2;
+
+    // Create boxes (one row on each side per level).
+    const geometries = [];
+    let zPosition = 0;
+    for (let i = 0; i < this.frequencyBinCount; i++) {
+      for (let side = 0; side < 2; side++) {
+        const box = new THREE.BoxBufferGeometry();
+        this.initBox(box, side === 0 ? 1 : -1, zPosition);
+        geometries.push(box);
+        // Move Z back.
+        zPosition -= this.data.separation;
+      }
+    }
+
+    this.geometry = THREE.BufferGeometryUtils.mergeBufferGeometries(geometries)
+    const mesh = new THREE.Mesh(this.geometry, this.el.sceneEl.systems.materials.black);
+    this.el.setObject3D('mesh', mesh);
+  },
+
+  tick: function () {
+    // Step by 2 since we create one box of each side per level.
+    for (let i = 0; i < this.frequencyBinCount * 2; i += 2) {
+      let yScale = (this.data.height / 2) + this.analyser.levels[Math.floor(i / 2)] / 256.0 *
+                   this.data.scale;
+      if (isNaN(yScale)) { return; }
+      this.setBoxHeight(i, yScale);
+      this.setBoxHeight(i + 1, yScale);
+      this.geometry.attributes.position.needsUpdate = true;
+    }
+  },
+
+  /**
+   * Initialize box by changing vertex buffer, to set position and scale.
+   */
+  initBox: function (box, flip, zPosition) {
+    const data = this.data;
+
+    // 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;
+
+      // Apply zPosition.
+      box.attributes.position.array[v + 2] += zPosition;
+
+      // Apply height to Y.
+      box.attributes.position.array[v + 1] *= data.height / 2;
+
+      // Change X vertex positions for mirroring.
+      box.attributes.position.array[v] += flip * data.mirror;
+    }
+  },
+
+  /**
+   * Set Y of vertices.
+   */
+  setBoxHeight: function (boxNumber, height) {
+    const boxIndex = boxNumber * NUM_VALUES_PER_BOX;
+    for (let i = boxIndex; i < boxIndex + NUM_VALUES_PER_BOX; i += 3) {
+      // Set Y.
+      let yValue = this.geometry.attributes.position.array[i + 1];
+      this.geometry.attributes.position.array[i + 1] = yValue >= 0
+        ? height
+        : -1 * height;
+    }
+  }
+});

src/components/song-preview.js

@@ -162,7 +162,7 @@ AFRAME.registerComponent('song-preview-system', {
 
   updateAnalyser: function () {
     document.getElementById('introSong').pause();
-    document.getElementById('audioanalyser').setAttribute('audioanalyser', 'src', this.audio);
+    document.getElementById('audioColumns').setAttribute('audioanalyser', 'src', this.audio);
   },
 
   /**

src/index.js

@@ -1,5 +1,7 @@
 function requireAll (req) { req.keys().forEach(req); }
 
+require('../vendor/BufferGeometryUtils');
+
 require('aframe-animation-component');
 require('aframe-audioanalyser-component');
 require('aframe-cubemap-component');

src/templates/stage.html

@@ -5,7 +5,7 @@
 
   <a-entity id="twister" twister position="0 0 -60" rotation="90 0 0"></a-entity>
 
-  <a-entity id="audioanalyser" audioanalyser="src: #introSong; fftSize: 128; enableBeatDetection: false; enableLevels: false; enableWaveform: false" analyser="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 4"></a-entity>
+  <a-entity id="audioColumns" audioanalyser="src: #introSong; fftSize: 64; enableBeatDetection: false; enableLevels: false; enableWaveform: false" audio-columns="height: 28; mirror: 10; scale: 10; thickness: 0.4; separation: 0.45" position="0 -17 2"></a-entity>
 
   <!-- Corridor. -->
   <a-entity geometry="height: 0.3; depth: 50; width: 4.1" position="0 0 -31.85" materials="black"></a-entity>

vendor/BufferGeometryUtils.js

@@ -0,0 +1,396 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.BufferGeometryUtils = {
+
+	computeTangents: function ( geometry ) {
+
+		var index = geometry.index;
+		var attributes = geometry.attributes;
+
+		// based on http://www.terathon.com/code/tangent.html
+		// (per vertex tangents)
+
+		if ( index === null ||
+			 attributes.position === undefined ||
+			 attributes.normal === undefined ||
+			 attributes.uv === undefined ) {
+
+			console.warn( 'THREE.BufferGeometry: Missing required attributes (index, position, normal or uv) in BufferGeometry.computeTangents()' );
+			return;
+
+		}
+
+		var indices = index.array;
+		var positions = attributes.position.array;
+		var normals = attributes.normal.array;
+		var uvs = attributes.uv.array;
+
+		var nVertices = positions.length / 3;
+
+		if ( attributes.tangent === undefined ) {
+
+			geometry.addAttribute( 'tangent', new THREE.BufferAttribute( new Float32Array( 4 * nVertices ), 4 ) );
+
+		}
+
+		var tangents = attributes.tangent.array;
+
+		var tan1 = [], tan2 = [];
+
+		for ( var k = 0; k < nVertices; k ++ ) {
+
+			tan1[ k ] = new THREE.Vector3();
+			tan2[ k ] = new THREE.Vector3();
+
+		}
+
+		var vA = new THREE.Vector3(),
+			vB = new THREE.Vector3(),
+			vC = new THREE.Vector3(),
+
+			uvA = new THREE.Vector2(),
+			uvB = new THREE.Vector2(),
+			uvC = new THREE.Vector2(),
+
+			sdir = new THREE.Vector3(),
+			tdir = new THREE.Vector3();
+
+		function handleTriangle( a, b, c ) {
+
+			vA.fromArray( positions, a * 3 );
+			vB.fromArray( positions, b * 3 );
+			vC.fromArray( positions, c * 3 );
+
+			uvA.fromArray( uvs, a * 2 );
+			uvB.fromArray( uvs, b * 2 );
+			uvC.fromArray( uvs, c * 2 );
+
+			var x1 = vB.x - vA.x;
+			var x2 = vC.x - vA.x;
+
+			var y1 = vB.y - vA.y;
+			var y2 = vC.y - vA.y;
+
+			var z1 = vB.z - vA.z;
+			var z2 = vC.z - vA.z;
+
+			var s1 = uvB.x - uvA.x;
+			var s2 = uvC.x - uvA.x;
+
+			var t1 = uvB.y - uvA.y;
+			var t2 = uvC.y - uvA.y;
+
+			var r = 1.0 / ( s1 * t2 - s2 * t1 );
+
+			sdir.set(
+				( t2 * x1 - t1 * x2 ) * r,
+				( t2 * y1 - t1 * y2 ) * r,
+				( t2 * z1 - t1 * z2 ) * r
+			);
+
+			tdir.set(
+				( s1 * x2 - s2 * x1 ) * r,
+				( s1 * y2 - s2 * y1 ) * r,
+				( s1 * z2 - s2 * z1 ) * r
+			);
+
+			tan1[ a ].add( sdir );
+			tan1[ b ].add( sdir );
+			tan1[ c ].add( sdir );
+
+			tan2[ a ].add( tdir );
+			tan2[ b ].add( tdir );
+			tan2[ c ].add( tdir );
+
+		}
+
+		var groups = geometry.groups;
+
+		if ( groups.length === 0 ) {
+
+			groups = [ {
+				start: 0,
+				count: indices.length
+			} ];
+
+		}
+
+		for ( var j = 0, jl = groups.length; j < jl; ++ j ) {
+
+			var group = groups[ j ];
+
+			var start = group.start;
+			var count = group.count;
+
+			for ( var i = start, il = start + count; i < il; i += 3 ) {
+
+				handleTriangle(
+					indices[ i + 0 ],
+					indices[ i + 1 ],
+					indices[ i + 2 ]
+				);
+
+			}
+
+		}
+
+		var tmp = new THREE.Vector3(), tmp2 = new THREE.Vector3();
+		var n = new THREE.Vector3(), n2 = new THREE.Vector3();
+		var w, t, test;
+
+		function handleVertex( v ) {
+
+			n.fromArray( normals, v * 3 );
+			n2.copy( n );
+
+			t = tan1[ v ];
+
+			// Gram-Schmidt orthogonalize
+
+			tmp.copy( t );
+			tmp.sub( n.multiplyScalar( n.dot( t ) ) ).normalize();
+
+			// Calculate handedness
+
+			tmp2.crossVectors( n2, t );
+			test = tmp2.dot( tan2[ v ] );
+			w = ( test < 0.0 ) ? - 1.0 : 1.0;
+
+			tangents[ v * 4 ] = tmp.x;
+			tangents[ v * 4 + 1 ] = tmp.y;
+			tangents[ v * 4 + 2 ] = tmp.z;
+			tangents[ v * 4 + 3 ] = w;
+
+		}
+
+		for ( var j = 0, jl = groups.length; j < jl; ++ j ) {
+
+			var group = groups[ j ];
+
+			var start = group.start;
+			var count = group.count;
+
+			for ( var i = start, il = start + count; i < il; i += 3 ) {
+
+				handleVertex( indices[ i + 0 ] );
+				handleVertex( indices[ i + 1 ] );
+				handleVertex( indices[ i + 2 ] );
+
+			}
+
+		}
+
+	},
+
+	/**
+	 * @param  {Array<THREE.BufferGeometry>} geometries
+	 * @return {THREE.BufferGeometry}
+	 */
+	mergeBufferGeometries: function ( geometries, useGroups ) {
+
+		var isIndexed = geometries[ 0 ].index !== null;
+
+		var attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );
+		var morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );
+
+		var attributes = {};
+		var morphAttributes = {};
+
+		var mergedGeometry = new THREE.BufferGeometry();
+
+		var offset = 0;
+
+		for ( var i = 0; i < geometries.length; ++ i ) {
+
+			var geometry = geometries[ i ];
+
+			// ensure that all geometries are indexed, or none
+
+			if ( isIndexed !== ( geometry.index !== null ) ) return null;
+
+			// gather attributes, exit early if they're different
+
+			for ( var name in geometry.attributes ) {
+
+				if ( !attributesUsed.has( name ) ) return null;
+
+				if ( attributes[ name ] === undefined ) attributes[ name ] = [];
+
+				attributes[ name ].push( geometry.attributes[ name ] );
+
+			}
+
+			// gather morph attributes, exit early if they're different
+
+			for ( var name in geometry.morphAttributes ) {
+
+				if ( !morphAttributesUsed.has( name ) ) return null;
+
+				if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];
+
+				morphAttributes[ name ].push( geometry.morphAttributes[ name ] );
+
+			}
+
+			// gather .userData
+
+			mergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];
+			mergedGeometry.userData.mergedUserData.push( geometry.userData );
+
+			if ( useGroups ) {
+
+				var count;
+
+				if ( isIndexed ) {
+
+					count = geometry.index.count;
+
+				} else if ( geometry.attributes.position !== undefined ) {
+
+					count = geometry.attributes.position.count;
+
+				} else {
+
+					return null;
+
+				}
+
+				mergedGeometry.addGroup( offset, count, i );
+
+				offset += count;
+
+			}
+
+		}
+
+		// merge indices
+
+		if ( isIndexed ) {
+
+			var indexOffset = 0;
+			var indexList = [];
+
+			for ( var i = 0; i < geometries.length; ++ i ) {
+
+				var index = geometries[ i ].index;
+
+				if ( indexOffset > 0 ) {
+
+					index = index.clone();
+
+					for ( var j = 0; j < index.count; ++ j ) {
+
+						index.setX( j, index.getX( j ) + indexOffset );
+
+					}
+
+				}
+
+				indexList.push( index );
+				indexOffset += geometries[ i ].attributes.position.count;
+
+			}
+
+			var mergedIndex = this.mergeBufferAttributes( indexList );
+
+			if ( !mergedIndex ) return null;
+
+			mergedGeometry.index = mergedIndex;
+
+		}
+
+		// merge attributes
+
+		for ( var name in attributes ) {
+
+			var mergedAttribute = this.mergeBufferAttributes( attributes[ name ] );
+
+			if ( ! mergedAttribute ) return null;
+
+			mergedGeometry.addAttribute( name, mergedAttribute );
+
+		}
+
+		// merge morph attributes
+
+		for ( var name in morphAttributes ) {
+
+			var numMorphTargets = morphAttributes[ name ][ 0 ].length;
+
+			if ( numMorphTargets === 0 ) break;
+
+			mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};
+			mergedGeometry.morphAttributes[ name ] = [];
+
+			for ( var i = 0; i < numMorphTargets; ++ i ) {
+
+				var morphAttributesToMerge = [];
+
+				for ( var j = 0; j < morphAttributes[ name ].length; ++ j ) {
+
+					morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );
+
+				}
+
+				var mergedMorphAttribute = this.mergeBufferAttributes( morphAttributesToMerge );
+
+				if ( !mergedMorphAttribute ) return null;
+
+				mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );
+
+			}
+
+		}
+
+		return mergedGeometry;
+
+	},
+
+	/**
+	 * @param {Array<THREE.BufferAttribute>} attributes
+	 * @return {THREE.BufferAttribute}
+	 */
+	mergeBufferAttributes: function ( attributes ) {
+
+		var TypedArray;
+		var itemSize;
+		var normalized;
+		var arrayLength = 0;
+
+		for ( var i = 0; i < attributes.length; ++ i ) {
+
+			var attribute = attributes[ i ];
+
+			if ( attribute.isInterleavedBufferAttribute ) return null;
+
+			if ( TypedArray === undefined ) TypedArray = attribute.array.constructor;
+			if ( TypedArray !== attribute.array.constructor ) return null;
+
+			if ( itemSize === undefined ) itemSize = attribute.itemSize;
+			if ( itemSize !== attribute.itemSize ) return null;
+
+			if ( normalized === undefined ) normalized = attribute.normalized;
+			if ( normalized !== attribute.normalized ) return null;
+
+			arrayLength += attribute.array.length;
+
+		}
+
+		var array = new TypedArray( arrayLength );
+		var offset = 0;
+
+		for ( var j = 0; j < attributes.length; ++ j ) {
+
+			array.set( attributes[ j ].array, offset );
+
+			offset += attributes[ j ].array.length;
+
+		}
+
+		return new THREE.BufferAttribute( array, itemSize, normalized );
+
+	}
+
+};