Uncaught TypeError: Type error in WebGL using Three.js

Question

I am building a small music visualizer with WebGL and Three.js, using the ThreeAudio.js library to convert the audio into a texture that is passed into the shader. Though everything is currently functioning, I am getting the following error that I'd like to track down:

"Uncaught Type Error: Type error"

Which then traces back from my animate function, to my render function, to the three.js render function, to something called "l", to renderBuffer, to "z".

My animate function is as follows:

function animate() {
 requestAnimationFrame( animate );
 audioTextures.update();

 stats.update();
 render();
}

And my render function is as follows:

function render(){
 renderer.render( scene, camera );
}

I believe it's an issue with the mesh I am creating, because when I comment out the code to add it to the scene the error goes away.

The code for the animated sphere I have is as follows:

audioSource = (new       ThreeAudio.Source()).load('https://api.soundcloud.com/tracks/125098652/stream?client_id=MYCLIENTID').play();
audioTextures = new ThreeAudio.Textures(renderer, audioSource);
audioMaterial = new ThreeAudio.Material(audioTextures, vertexShader, fragmentShader);
audioMesh = new THREE.Mesh(geometry, audioMaterial);
scene.add(audioMesh);

The ThreeAudio github can be found here: https://github.com/unconed/ThreeAudio.js Please let me know if it would be helpful to post my shaders as well.

Does anyone know how I should begin to solve this error? Has anyone seen it present in this way? Please let me know.

Answer 1

Ok, I ended up answering this question myself. In case anyone stumbles upon this looking for the answer to a similar problem, this is how I fixed it:

I realized that the animate function was being called before the audio source was loaded, which meant the audio textures did not have any data in them. It seemed like the library (ThreeAudio) that I was using handled the exception, in my limited experience issues with data getting to the shader tends to blow everything up.

The solution was to move the animate() call into a callback function once the audio source loaded. My code looks like this:

audioSource = (new ThreeAudio.Source()).load('https://api.soundcloud.com/tracks/125098652/stream?client_id=MYCLIENTID', function(){
clock = new THREE.Clock();
audioSource.play();
audioTextures = new ThreeAudio.Textures(renderer, audioSource);
audioMaterial = new ThreeAudio.Material(audioTextures, vertexShader, fragmentShader);
audioMaterial.uniforms['volume'] = {type: 'f', value: 0};
audioMaterial.uniforms['volume2'] = {type: 'f', value: 0};
audioMaterial.uniforms['volume3'] = {type: 'f', value: 0};

// My custom cube geometry
var geometry = CubeGeometry(audioTextures, 500, 500, 500, 500, 500);

audioMesh = new THREE.Mesh(geometry, audioMaterial);
audioMesh.position.y = -200;
scene.add(audioMesh);

animate();
});