From a4b88e45027fe598360d612e7fc1cf3560778c01 Mon Sep 17 00:00:00 2001 From: Kevin Ngo Date: Fri, 21 Sep 2018 00:03:15 -0700 Subject: [PATCH] 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 | 46 ---- src/components/audio-columns.js | 94 ++++++++ src/components/song-preview.js | 2 +- src/index.js | 2 + src/templates/stage.html | 2 +- vendor/BufferGeometryUtils.js | 396 ++++++++++++++++++++++++++++++++ 6 files changed, 494 insertions(+), 48 deletions(-) delete mode 100644 src/components/analyzer.js create mode 100644 src/components/audio-columns.js create mode 100644 vendor/BufferGeometryUtils.js 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 ); + + } + +};