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

Question

我一直在尝试使用 shadertoy 将音频 frequency/waveform 传递到带有 three.js 的着色器中。

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

在此示例中，IQ 似乎将 frequency/waveform 音频数据放入图像中，然后将其采样为着色器中的纹理。我将如何在 Javascript 中创建音频纹理？

明确地说，我不需要帮助将纹理统一加载到着色器中。我只是不知道如何从音频文件创建音频纹理。

var texture = new THREE.Texture();

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

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

Answer 1

您可以从网络音频中获取音频数据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);

或在three.js中使用DataTexture

这是简短的版本。更长的版本是音频需要在同一个域中，否则您将运行陷入 CORS 问题。要获取音频流的数据，例如 <audio> 标签，您可以调用

const source = audioContext.createMediaElementSource(audio);

目前在移动 Chrome 和移动 Safari 中都不起作用，而且 Safari 中存在错误。

Here's a working sample

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

How does ShaderToy load sounds into a texture

javascript

audio

webgl

three.js