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
This commit is contained in:
Kevin Ngo
@@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
94
src/components/audio-columns.js
Normal file
94
src/components/audio-columns.js
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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>
|
||||
|
||||
396
vendor/BufferGeometryUtils.js
vendored
Normal file
396
vendor/BufferGeometryUtils.js
vendored
Normal file
@@ -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 );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user