ऑडियो संदर्भ के साथ वेरटेक्स डिसप्लेसमेंट (THREE.JS R76)

Question

मैं थ्री.जेएस में ऑडियोकॉन्टेक्स्ट एपीआई से शिखर मैप करने की कोशिश कर रहा हूं।

अब, मैंने विमानों (गैर शेडर) के साथ सफलतापूर्वक यह किया है लेकिन इसे सिलेंडर पर लागू करने की कोशिश में समस्याएं चल रही हैं। चूंकि सिलेंडर शिखर एक विमान के लिए 0 के बजाय पूर्ण वैक्टर हैं, इसलिए मुझे नहीं पता कि मैं उन्हें आवृत्ति डेटा में कैसे मैप करूंगा।

मैं भविष्य में दर्शकों के लिए ऑडियो संदर्भ की तलाश में कुछ अतिरिक्त कार्य शामिल कर रहा हूं।

ऑडियो संदर्भ

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);  
} 

यहाँ एक ऊपर और नीचे विमान के लिए मेरे कोड है ...

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; 
} 

यहाँ

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; 
} 

अटक प्रस्तुत

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

मैं समझता हूं कि शेडर्स के साथ ऐसा करना अधिक समझ में आता है लेकिन मुझे अभी तक इसके बारे में पर्याप्त जानकारी नहीं है। मुझे लगता है कि आप आवृत्ति डेटा को वर्दी के रूप में पास करेंगे लेकिन फिर मैं वेक्टर मैनिपुलेशन के लिए फ्रीक की अपनी मूल समस्या पर वापस आ गया हूं।

Answer 1

मिले एक शेडर उदाहरण Three.js उदाहरण में गहरी ...

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