diff --git a/src/components/analyzer.js b/src/components/analyzer.js
deleted file mode 100644
index c87c6a1..0000000
--- a/src/components/analyzer.js
+++ /dev/null
@@ -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;
- }
- }
-});
diff --git a/src/components/audio-columns.js b/src/components/audio-columns.js
new file mode 100644
index 0000000..cc999f6
--- /dev/null
+++ b/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;
+ }
+ }
+});
diff --git a/src/components/song-preview.js b/src/components/song-preview.js
index 06c9ad5..7a6e7ef 100644
--- a/src/components/song-preview.js
+++ b/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);
},
/**
diff --git a/src/index.js b/src/index.js
index ca7d45e..25cf816 100644
--- a/src/index.js
+++ b/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');
diff --git a/src/templates/stage.html b/src/templates/stage.html
index bd01004..50aae55 100644
--- a/src/templates/stage.html
+++ b/src/templates/stage.html
@@ -5,7 +5,7 @@
-
+
diff --git a/vendor/BufferGeometryUtils.js b/vendor/BufferGeometryUtils.js
new file mode 100644
index 0000000..8c14a55
--- /dev/null
+++ b/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} 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} 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 );
+
+ }
+
+};