|
|
@@ -39,6 +39,7 @@
|
|
|
void main() {
|
|
|
|
|
|
vUv = uv;
|
|
|
+
|
|
|
gl_Position = vec4( position, 1.0 );
|
|
|
|
|
|
}
|
|
|
@@ -48,16 +49,16 @@
|
|
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
|
|
|
|
|
uniform sampler2D tAudioData;
|
|
|
-
|
|
|
varying vec2 vUv;
|
|
|
|
|
|
void main() {
|
|
|
|
|
|
- vec3 backgroundColor = vec3( 0.0 );
|
|
|
- vec3 color = vec3( 1.0, 0.0, 0.0 );
|
|
|
+ vec3 backgroundColor = vec3( 0.125, 0.125, 0.125 );
|
|
|
+ vec3 color = vec3( 1.0, 1.0, 0.0 );
|
|
|
+
|
|
|
+ float f = texture2D( tAudioData, vec2( vUv.x, 0.0 ) ).r;
|
|
|
|
|
|
- float f = texture2D( tAudioData, vec2( vUv.x, 0.0 ) ).r; // sample data texture (only the red channel is relevant)
|
|
|
- float i = step( vUv.y, f );
|
|
|
+ float i = step( vUv.y, f ) * step( f - 0.0125, vUv.y );
|
|
|
|
|
|
gl_FragColor = vec4( mix( backgroundColor, color, i ), 1.0 );
|
|
|
|
|
|
@@ -66,12 +67,12 @@
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
-<body>
|
|
|
+ <body>
|
|
|
|
|
|
<div id="container"></div>
|
|
|
<div id="info">
|
|
|
<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio - visualizer<br/>
|
|
|
- music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank" rel="noopener noreferrer">larrylarrybb</a>
|
|
|
+ music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
@@ -85,55 +86,46 @@
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
- var fftSize = 2048;
|
|
|
+ var fftSize = 128;
|
|
|
|
|
|
//
|
|
|
|
|
|
var container = document.getElementById( 'container' );
|
|
|
|
|
|
- //
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
renderer.setClearColor( 0x000000 );
|
|
|
renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
|
|
- //
|
|
|
+ scene = new THREE.Scene();
|
|
|
|
|
|
camera = new THREE.Camera();
|
|
|
- camera.position.z = 1;
|
|
|
|
|
|
//
|
|
|
|
|
|
var audioLoader = new THREE.AudioLoader();
|
|
|
|
|
|
var listener = new THREE.AudioListener();
|
|
|
- camera.add( listener );
|
|
|
|
|
|
var audio = new THREE.Audio( listener );
|
|
|
- audioLoader.load( 'sounds/358232_j_s_song.mp3', function( buffer ) {
|
|
|
+
|
|
|
+ audioLoader.load( 'sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3', function ( buffer ) {
|
|
|
+
|
|
|
audio.setBuffer( buffer );
|
|
|
audio.setLoop( true );
|
|
|
audio.play();
|
|
|
- });
|
|
|
+
|
|
|
+ } );
|
|
|
|
|
|
analyser = new THREE.AudioAnalyser( audio, fftSize );
|
|
|
|
|
|
//
|
|
|
|
|
|
- var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
|
|
|
-
|
|
|
- //
|
|
|
+ uniforms = {
|
|
|
|
|
|
- var size = fftSize / 2;
|
|
|
+ tAudioData: { value: new THREE.DataTexture( analyser.data, fftSize / 2, 1, THREE.LuminanceFormat ) }
|
|
|
|
|
|
- uniforms = {
|
|
|
- tAudioData: { value: new THREE.DataTexture( analyser.data, size, 1, THREE.LuminanceFormat ) }
|
|
|
};
|
|
|
|
|
|
var material = new THREE.ShaderMaterial( {
|
|
|
@@ -144,7 +136,7 @@
|
|
|
|
|
|
} );
|
|
|
|
|
|
- //
|
|
|
+ var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
|
|
|
|
|
|
var mesh = new THREE.Mesh( geometry, material );
|
|
|
scene.add( mesh );
|
|
|
@@ -171,7 +163,7 @@
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
- var data = analyser.getFrequencyData();
|
|
|
+ analyser.getFrequencyData();
|
|
|
|
|
|
uniforms.tAudioData.value.needsUpdate = true;
|
|
|
|
|
|
@@ -181,5 +173,5 @@
|
|
|
|
|
|
</script>
|
|
|
|
|
|
-</body>
|
|
|
+ </body>
|
|
|
</html>
|
WestLangley