An HTML FFT audio analyzer is set up to output data into a UInt32Array(64) type.
The three.js documentation states that this data type is not supported: https://github.com/mrdoob/three.js/wiki/Uniforms-types
How can I efficiently pass my per frame FFT buffer data into the vertex shader?
I've encountered compatibility issues while trying to compile the shader.
Any help or suggestions would be greatly appreciated.
attributes = {
customColor: { type: "c", value: [] },
tick: { type: "f", value: 1.0 }
};
uniforms = {
amplitude: { type: "f", value: 5.0 },
opacity: { type: "f", value: 0.3 },
color: { type: "c", value: new THREE.Color( 0xff0000 ) },
fftSize: { type: "i", value: 63 },
freqData: { type: "fv1", value: freqByteData }
};
...
In the render() loop:
freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData)
uniforms.freqData = freqByteData;
And in the GLSL vertex shader:
uniform float freqData[64]; // Unable to work properly due to primitive type conflict
uniform int fftSize;
uniform float amplitude;
attribute vec3 customColor;
attribute int tick;
varying vec3 vColor;
void main() {
vec3 norm = normalize(position);
vec3 newPosition = position * freqData[tick % fftSize] + amplitude;
vColor = customColor;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}