Question

我一直试图做同样的事情，使用三个.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);

或在three.js中使用DataTexture

这是短版本。较长的版本是音频需要在同一个域上，否则您将遇到CORS问题。要获取像<audio>标记这样的音频流的数据，请致电

const source = audioContext.createMediaElementSource(audio);

目前在移动Chrome或移动版Safari中无法使用，并且Safari中存在漏洞。

Here's a working sample

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

1 个答案: