Question

我碰到一篇文章，其中开发人员正在使用着色器编程构建音乐可视化器。他通过纹理将音频信息传输到glsl。 https://noisehack.com/build-music-visualizer-web-audio-api/

function copyAudioDataToTexture(gl, audioData, textureArray) {
  for (let i = 0; i < audioData.length; i++) {
    textureArray[4 * i + 0] = audioData[i] // R
    textureArray[4 * i + 1] = audioData[i] // G
    textureArray[4 * i + 2] = audioData[i] // B
    textureArray[4 * i + 3] = 255          // A
  }
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, audioData.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureArray)
}

我还注意到了shadertoy does a similar thing。

我想知道，一般而言，数据是否仅通过纹理提交，是否还有其他方法可以将数据引导到glsl中，例如作为顶点或其他方式？

编辑：我注意到有一种叫做“统一”的东西，也许我可以将音频数据注入其中？

Answer 1

这取决于您要如何处理。对于可视化数据，纹理是一个很自然的选择，因为您的片段着色器（实际上为单个像素着色的程序）可以从纹理中的任意位置访问数据，甚至可以免费获得数据点之间的插值。这对于将屏幕上的像素着色作为可视化数据的方式非常方便。在此示例中，他以频谱纹理的形式传递频谱数据（强度与频率），然后将其乘以输出颜色以使图像变暗，而音频不是频谱的一部分。

在这种情况下，顶点缓冲区不是传递数据的好方法，因为AFAIK片段着色器无法从顶点缓冲区读取。

Uniform只是在着色器程序中接收全局数据的一种方法，例如是否要传递要用于着色或变换图像的纹理。作者正在使用它通过片段着色器中的uniform sampler2D spectrum传递纹理。

如果由于您想将GPU用于可视化之外的其他用途而使纹理对您没有意义，那么您可能需要考虑使用诸如OpenCL或DirectCompute之类的东西，它们旨在进行任意计算。

（顺便说一句，在该示例中未使用HLSL，因为HLSL是Direct3D中使用的语言。作者正在使用GLSL。）

纹理是将音频数据传输到GLSL的唯一方法吗？

1 个答案: