Audio Displacment Top (THREE.JS R76)

Question

I am trying to display vertices from the AudioContext api in a Three.js file.

Now, I have successfully done this with airplanes (without a shader), but I have problems trying to apply it to the cylinder. Since the vertices of the cylinder are full vectors, instead of 0 for the plane, I don’t know how I would compare them with the frequency data.

I include some additional features for future viewers looking for audio context.

Audio context

function audioLink(){ player = document.getElementById('musicPlayer'), context = new (window.AudioContext || window.webkitAudioContext), analyser = context.createAnalyser(), source = context.createMediaElementSource(player); source.connect(analyser); analyser.connect(context.destination); analyser.fftSize = 256; frequencyData = new Uint8Array(analyser.frequencyBinCount); analyser.getByteTimeDomainData(frequencyData); } 

Here is my code for the upper and lower planes ...

 function updateVertWave(){ for (var i = 0, len = waveBottom.geometry.vertices.length; i < len; i++) { waveBottomVert[i].z = frequencyData[i]*6; waveTopVert[i].z = frequencyData[i]*-6; } waveBottom.geometry.verticesNeedUpdate = true; waveTop.geometry.verticesNeedUpdate = true; } 

CLICK HERE

 function updateVertCylinder(){ for (var i = 0, len = cylinder.geometry.vertices.length; i < len; i++) { (STUCK) } cylinder.geometry.verticesNeedUpdate = true; cylinder.geometry.computeFaceNormals(); cylinder.geometry.computeVertexNormals(); scene.getObjectByName("cylinder").rotation.y += 0.004; } 

Render

 function render() { renderFrame = requestAnimationFrame(render); analyser.getByteFrequencyData(frequencyData); if (planeViz) { updateVertWave(); } else { updateVertCylinder(); } renderer.render(scene, camera); }; 

I understand that doing this with shaders makes more sense, but I don’t know enough yet. I assume that you will transmit the frequency data in the form of a uniform, but then I will return to my original problem of frequency in vector manipulation.

Answer 1

Found an example shader in the depth of three.js examples ...

https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html