javascript - for - shaders artlantis 5

¿Cómo carga ShaderToy los sonidos en una textura?

Question

He estado tratando de hacer las mismas cosas que shadowrtoy hace para pasar la frecuencia de audio / forma de onda en el sombreador con three.js.

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

En este ejemplo, parece que IQ está poniendo datos de audio de frecuencia / forma de onda en una imagen y luego lo muestra como una textura en el sombreador. ¿Cómo crearía esa textura de audio en Javascript?

Para ser claros, no necesito ayuda para cargar el uniforme de textura en el sombreador. Simplemente no sé cómo crear la textura de audio de un archivo de audio.

var texture = new THREE.Texture();

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

Supongo que necesitaré de alguna manera poner datos de audio en la textura. No sé cómo hacer eso.

Answer 1

Puede obtener datos de audio de la API de Web Audio creando un nodo de analizador

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

Luego crea un buffer para recibir los datos

var numSamples = analyser.frequencyBinCount;
var audioData = new Uint8Array(numSamples);

Luego, en su ciclo de renderizado obtenga los datos y póngalos en una textura

analyser.getByteFrequencyData(audioData);
...
gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE, numSamples, 1, 0,
              gl.LUMINANCE, gl.UNSIGNED_BYTE, audioData);

o en three.js usa una DataTexture

Esa es la versión corta. La versión más larga es audio debe estar en el mismo dominio o se encontrará con problemas CORS. Para obtener datos de una transmisión de audio como una etiqueta de <audio> llamarías

var source = audioContext.createMediaElementSource(audio);

Eso no funciona en Chrome para dispositivos móviles ni en Safari móvil en este momento y hay errores en Safari.

Aquí hay una muestra de trabajo