在WebGL着色器中使用UInt8Array数据

Question

一个HTML FFT音频分析器将其数据输出到一个UInt32Array(64)类型中。

根据three.js文档，该数据类型不受支持：https://github.com/mrdoob/three.js/wiki/Uniforms-types 如何以一种便宜的方式将每帧FFT缓冲区数据传递到我的顶点着色器中？

由于不兼容性，我无法编译着色器。

任何帮助、建议都会被赞赏。

        attributes = {
            customColor:  { type: "c", value: [] },
            tick:      { type: "f", value: 1.0 }
        };

        uniforms = {
            amplitude: { type: "f", value: 5.0 },
            opacity:   { type: "f", value: 0.3 },
            color:     { type: "c", value: new THREE.Color( 0xff0000 ) },
            fftSize:   { type: "i", value: 63 },
            freqData:  { type: "fv1", value: freqByteData }
        };

...

在 render() 循环中：

        freqByteData = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(freqByteData)

        uniforms.freqData = freqByteData;

以及GLSL顶点着色器：

        uniform float freqData[64]; // not working, primitive type conflict
        uniform int fftSize;
        uniform float amplitude;

        attribute vec3 customColor;
        attribute int tick;

        varying vec3 vColor;

        void main() {

            vec3 norm = normalize(position);

            vec3 newPosition = position * freqData[tick % fftSize] + amplitude;

            vColor = customColor;

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }

- Alex

Answer 1

我添加了一个名为“iv1”的新统一类型，以便能够传递整数数组。您可以尝试使用它： https://github.com/alteredq/three.js/commit/4eedc69fa7344f4a512d6ae17427c7e109e0c550

- alteredq

---

非常感谢您的帮助！我在Mac OS X 10.7.4（Lion）上使用OpenGL版本时遇到了各种问题。错误信息：ERROR: 0:75: 'mod' : no matching overloaded function found，请参见此处：http://theworldmoves.me/graphics/fft_1.html - Alex

我尝试将 #version 140 添加到着色器中，但它必须出现在着色器的顶部。它应该添加在哪里？ - Alex

我也遇到了同样的错误。尝试使用所有参数类型相同的 mod 函数，目前你调用的是 mod(float, int)，所以可能需要使用 mod(int, int) 或 mod(float, float)。 - alteredq