2

我目前正在研究 GLSL 着色器，它通过从音频中提取的 256 长度的整数数组。我正在使用 Javascript 和 Three.js 进行实际渲染。通过首先定义制服列表，我稍后在脚本中获取音频对象：

uniforms1 = {
    time: { type: "f", value: 1.0 },
    resolution: { type: "v2", value: new THREE.Vector2() },
    mouse: { type: "v2", value: new THREE.Vector2() },
    audio:{ type: "int", value: new Array(256) },
};

每个渲染帧，我调用以下内容：

freqByteData = new Uint8Array(audio.analyser.frequencyBinCount); 
audio.analyser.getByteFrequencyData(freqByteData);
uniforms1.audio.value = freqByteData;

其中 audio.analysisr 是一个网络音频分析器节点。这部分代码工作正常，我已经验证了 uniforms1.audio 是一个填充了分析器数据的 Uint8Array。我遇到的问题是我似乎无法将这些数据拉入片段着色器本身。我对 GLSL 很陌生，所以我假设这是一个基本问题，但我花了一些时间四处寻找解决方案，但似乎找不到。下面是片段着色器代码：

<script id="fragment_shader2" type="x-shader/x-fragment">

        uniform vec2 resolution;
        uniform float time;
        uniform vec2 mouse;
        uniform int audio[256];

        #define N 100
        void main( void ) {

            vec2 v = (gl_FragCoord.xy - resolution) / min(resolution.y,resolution.x) *0.5;

            float pi2 = 3.1415926535 * 2.0;
            float C = cos(mouse.x * pi2);
            float S = sin(mouse.y * pi2);
            //C = v.x;
            //S = v.y;

            float a = float(audio[20]/100);
            for ( int i = 0; i < N; i++ ){
                float x = v.x*v.x - v.y*v.y + C;
                float y = v.y * v.x + v.x * v.y+ S;
                v = vec2(x,y);
            }

            float col = v.x*v.x + v.y*v.y;

            gl_FragColor = vec4( a, sin(col*3.0), (cos(col)+sin(col))/2.0, 1.0 );

        }
    </script>

这将创建一个典型的“Julia Set”资源管理器，只有蓝色和绿色，这在没有音频播放时是有意义的，但是，我希望当音频开始播放时，浮动“a”将非零，因此红色将被引入集合。话虽如此，在整个音频中，看不到红色（尽管我也检查过以确保 audio[20] 确实非零。

同样，我是 GLSL 的新手，所以如果问题非常明显，我很抱歉，但感谢任何帮助。

提前致谢！艾萨克

4

0 回答 0