Geek Answers Handbook

How ShaderToy Loads into a Texture

I am trying to do the same thing as shadertoy for transferring audio frequency / waveform to a shader using three .js.

https://www.shadertoy.com/view/Xds3Rr

In this example, it seems that IQ places the audio frequency / wave data in the image, and then selects it as a texture in the shader. How to create such a sound texture in Javascript?

To be clear, I don't need help loading a uniform texture into a shader. I just don’t know how to create a sound texture from an audio file.

var texture = new THREE.Texture();

shader.uniforms = {
     iChannel0:  { type: 't', value: texture }
};

I guess I need to somehow put the audio data into the texture, I just don't know how to do it.

+4
source share
1 answer

Web Audio API, node

var audioContext = new window.AudioContext();
var analyser = audioContext.createAnalyser();


var numSamples = analyser.frequencyBinCount;
var 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>,

var source = audioContext.createMediaElementSource(audio);

Chrome Safari, Safari .

+6

More articles:


All Articles