From 996775b6a7140c91145c65c630183aae67ad1d93 Mon Sep 17 00:00:00 2001
From: Mugen87 <michael.herzog@human-interactive.org>
Date: Fri, 11 Aug 2017 14:42:07 +0200
Subject: [PATCH] Examples: Added simple audio visualizer

---
 examples/files.js                   |   1 +
 examples/misc_sound.html            |  34 ++---
 examples/misc_sound_visualizer.html | 195 ++++++++++++++++++++++++++++
 3 files changed, 213 insertions(+), 17 deletions(-)
 create mode 100644 examples/misc_sound_visualizer.html
diff --git a/examples/files.js b/examples/files.js
index a429062351..fec9d9e6ab 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -323,6 +323,7 @@ var files = {
 		"misc_lights_test",
 		"misc_lookat",
 		"misc_sound",
+		"misc_sound_visualizer",
 		"misc_ubiquity_test",
 		"misc_ubiquity_test2",
 		"misc_uv_tests"
diff --git a/examples/misc_sound.html b/examples/misc_sound.html
index 8a95849b78..eb7ea68597 100644
--- a/examples/misc_sound.html
+++ b/examples/misc_sound.html
@@ -6,35 +6,35 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
 			body {
-				background-color: #000000;
-				margin: 0px;
-				overflow: hidden;
-
-				font-family:Monospace;
-				font-size:13px;
+				background:#777;
+				padding:0;
+				margin:0;
 				font-weight: bold;
-				text-align: center;
-			}
-
-			a {
-				color: #0078ff;
+				overflow:hidden;
 			}
 
 			#info {
-				color:#fff;
 				position: absolute;
-				top: 0px; left: 0px; width: 50%;
+				top: 0px;
+				width: 100%;
+				color: #ffffff;
 				padding: 5px;
-				z-index:100;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+			}
+
+			a {
+				color: #ffffff;
 			}
 		</style>
 	</head>
 	<body>
 
 		<div id="info">
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl 3d sounds example -
-			music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank" rel="noopener">larrylarrybb</a> and
-			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a>  and
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl 3d sounds -
+			music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank" rel="noopener">larrylarrybb</a>,
+			<a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a> and
 			<a href="http://opengameart.org/content/project-utopia-seamless-loop" target="_blank" rel="noopener">congusbongus</a><br/><br/>
 			navigate with WASD / arrows / mouse
 		</div>
diff --git a/examples/misc_sound_visualizer.html b/examples/misc_sound_visualizer.html
new file mode 100644
index 0000000000..d8f456043b
--- /dev/null
+++ b/examples/misc_sound_visualizer.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js misc - sound visualizer</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background:#777;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px;
+				width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+			}
+
+			a {
+				color: #ffffff;
+			}
+		</style>
+
+		<script src="../build/three.js"></script>
+		<script src="js/Detector.js"></script>
+
+		<script id="vertexShader" type="x-shader/x-vertex">
+
+			void main()	{
+
+				gl_Position = vec4( position, 1.0 );
+
+			}
+
+		</script>
+
+		<script id="fragmentShader" type="x-shader/x-fragment">
+
+			uniform sampler2D tAudioData;
+			uniform vec2 resolution;
+
+			void main()	{
+
+				vec2 uv = gl_FragCoord.xy / resolution.xy;
+
+				vec3 backgroundColor = vec3( 0.0 );
+				vec3 color = vec3( 1.0, 0.0, 0.0 );
+
+				float f = texture2D( tAudioData, vec2( uv.x, 0.0 ) ).r; // sample data texture (only the red channel is relevant)
+				float i = step( uv.y, f );
+
+				gl_FragColor = vec4( mix( backgroundColor, color, i ), 1.0 );
+
+			}
+
+		</script>
+
+	</head>
+<body>
+
+	<div id="container"></div>
+	<div id="info">
+		<a href="https://threejs.org" target="_blank">three.js</a> - misc - sound visualizer -
+		music by <a href="http://www.newgrounds.com/audio/listen/358232" target="_blank">larrylarrybb</a>
+	</div>
+
+	<script>
+
+	if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+	var scene, camera, renderer, analyser, uniforms;
+
+	init();
+	animate();
+
+	function init() {
+
+		var fftSize = 2048;
+
+		//
+
+		var container = document.getElementById( 'container' );
+
+		//
+
+		scene = new THREE.Scene();
+
+		//
+
+		renderer = new THREE.WebGLRenderer( { antialias: true } );
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		renderer.setClearColor( 0x20252f );
+		renderer.setPixelRatio( window.devicePixelRatio );
+		container.appendChild( renderer.domElement );
+
+		//
+
+		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+		camera.position.set( 0, 5, 50 );
+
+		//
+
+		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 ) {
+			audio.setBuffer( buffer );
+			audio.setLoop( true );
+			audio.play();
+		});
+
+		analyser = new THREE.AudioAnalyser( audio, fftSize );
+
+		//
+
+		var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
+
+		//
+
+		var size = fftSize / 2;
+
+		uniforms = {
+			tAudioData: { value: new THREE.DataTexture( new Uint8Array( size * 3 ), size, 1, THREE.RGBFormat ) },
+			resolution: { value: new THREE.Vector2( renderer.domElement.width, renderer.domElement.height ) }
+		};
+
+		var material = new THREE.ShaderMaterial( {
+
+			uniforms: uniforms,
+			vertexShader: document.getElementById( 'vertexShader' ).textContent,
+			fragmentShader: document.getElementById( 'fragmentShader' ).textContent
+
+		} );
+
+		//
+
+		var mesh = new THREE.Mesh( geometry, material );
+		scene.add( mesh );
+
+		//
+
+		window.addEventListener( 'resize', onResize, false );
+
+	}
+
+	function onResize() {
+
+		renderer.setSize( window.innerWidth, window.innerHeight );
+
+		uniforms.resolution.value.x = renderer.domElement.width;
+		uniforms.resolution.value.y = renderer.domElement.height;
+
+	}
+
+	function animate() {
+
+		requestAnimationFrame( animate );
+
+		render();
+
+	}
+
+	function render() {
+
+		var data = analyser.getFrequencyData();
+
+		// transfer all frequency data to our data texture so we can use them in the fragment shader
+
+		for ( var i = 0, l = data.length; i < l; i ++ ) {
+
+			uniforms.tAudioData.value.image.data[ i * 3 ] = data[ i ];
+
+		}
+
+		uniforms.tAudioData.value.needsUpdate = true;
+
+		renderer.render( scene, camera );
+
+	}
+
+	</script>
+
+</body>
+</html>
-- 
GitLab

