Using UInt8Array data in WebGL shader

Question

An HTML FFT audio analyzer outputs its data into a UInt32Array(64) type.

According to three.js documentation, this data type is not supported: https://github.com/mrdoob/three.js/wiki/Uniforms-types

How can get my per frame FFT buffer data into my vertex shader, in a cheap way?

I've not been able to compile the shader beacause of the incompatibility.

Any help, suggestions appreciated.

        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 }
        };

...

in the render() loop:

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

        uniforms.freqData = freqByteData;

and GLSL v-shader:

        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 );

        }

alteredq · Accepted Answer · 2012-07-24 19:17:17Z

2

I added new uniform type "iv1" to be able to pass in integer arrays. You can try it:

https://github.com/alteredq/three.js/commit/4eedc69fa7344f4a512d6ae17427c7e109e0c550

answered Jul 24, 2012 at 19:17

alteredq

5443 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

Thanks so much for your help! I'm having all sorts of problems with my version of OpenGL on Mac OS X 10.7.4 (Lion). ERROR: 0:75: 'mod' : no matching overloaded function found see here: theworldmoves.me/graphics/fft_1.html

Alex Over a year ago

I've tried adding #version 140 to the shader but it must appear at the top of the shader. Where abouts could this be added?

alteredq Over a year ago

I'm getting the same error. Try using mod with all arguments of the same type, currently you call mod(float, int), so maybe mod(int, int) or mod(float, float).

Collectives™ on Stack Overflow

Using UInt8Array data in WebGL shader

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related