私は現在、オーディオから引き出された 256 の長さの int 配列を通過する GLSL シェーダーに取り組んでいます。実際のレンダリングには 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.analyser は Web オーディオ アナライザー ノードです。コードのこの部分は正常に動作し、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>
これにより、青と緑のみの典型的な「ジュリアセット」エクスプローラーが作成されます。これは、オーディオの再生がない場合に意味がありますが、オーディオの再生が開始されると、浮動小数点数「a」がゼロ以外になると予想されるため、赤がセットに導入されます。そうは言っても、オーディオ全体を通して、赤は表示されません (オーディオ [20] が実際にゼロでないことも確認しましたが.
繰り返しますが、私は GLSL の完全な初心者なので、問題が痛々しいほど明らかである場合は申し訳ありませんが、助けていただければ幸いです。
前もって感謝します！アイザック