ShaderToy如何将声音加载到纹理中

Question

我一直在努力做一些与使用three.js将音频/波形传递到着色器相同的事情.

https://www.shadertoy.com/view/Xds3Rr

在这个例子中,IQ似乎将频率/波形音频数据放入图像中,然后将其作为着色器中的纹理进行采样.如何在Javascript中创建音频纹理？

为了清楚起见,我不需要帮助将纹理均匀加载到着色器中.我只是不知道如何从音频文件创建音频纹理.

var texture = new THREE.Texture();

shader.uniforms = {
     iChannel0:  { type: 't', value: texture }
};

我猜我需要以某种方式将音频数据放入纹理我只是不知道该怎么做.

Answer 1

您可以从Web Audio API获取音频数据,从而创建分析器节点

const audioContext = new window.AudioContext();
const analyser = audioContext.createAnalyser();

然后创建一个缓冲区来接收数据

const numSamples = analyser.frequencyBinCount;
const audioData = new Uint8Array(numSamples);

然后在渲染循环中获取数据并将其放入纹理中

analyser.getByteFrequencyData(audioData);
...
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, numSamples, 1, 0,
              gl.LUMINANCE, gl.UNSIGNED_BYTE, audioData);

或者在三个.js中使用a DataTexture

这是短版本.较长的版本是音频需要在同一个域上,否则您将遇到CORS问题.获取音频流的数据,就像<audio>你要调用的标签一样

const source = audioContext.createMediaElementSource(audio);

这在移动Chrome或移动Safari中不起作用,而且Safari中存在漏洞.

这是一个工作样本