Ajout d'un visualiseur en WebGL

index.php

@@ -30,12 +30,108 @@
 </div>
     </div>
     <div class="row">
-        <div class="col-sm-4 col-md-2 col-md-offset-5">
+        <div id="subplayer" class="col-sm-4 col-md-2 col-md-offset-5">
             <div id="player"></div>
         </div>
     </div>
+  <script src="src/three.js"></script>
+  <script type="x-shader/x-vertex" id="vertex_shader">
+		varying float i;
+		uniform vec3 gravitySource0;
+		uniform vec3 gravitySource1;
+		uniform vec3 gravitySource2;
+		uniform vec3 gravitySource3;
+		uniform vec3 gravitySource4;
+		uniform vec3 gravitySource5;
+		uniform vec3 gravitySource6;
+		uniform vec3 gravitySource7;
+		uniform vec3 gravitySource8;
+		uniform float gravityStrength;
+
+        void main()
+        {
+            // a compléter
+			vec3 _normal = normal*mat3(modelMatrix);
+			vec4 _position4 = modelMatrix*vec4(position,1.0);
+			vec3 _position = _position4.xyz/_position4.w;
+			vec3 _g = gravitySource0-_position;
+			float _i = dot(normalize(_normal),normalize(_g));
+			vec3 d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i = length(_i);
+            gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+
+			_g = gravitySource1-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			_g = gravitySource2-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			_g = gravitySource3-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			_g = gravitySource4-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			_g = gravitySource5-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			_g = gravitySource6-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			_g = gravitySource7-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			_g = gravitySource8-_position;
+			_i = dot(normalize(_normal),normalize(_g));
+			d = _i*gravityStrength/(length(_g)*length(_g)) * _normal;
+			i += length(_i);
+			gl_Position += projectionMatrix*vec4(d, 1.0);
+
+			i = i/5.0;
+        }
+    </script>
+
+  <script type="x-shader/x-fragment" id="fragment_shader">
+		varying float i;
+        void main()
+        {
+            // a compl�ter
+			if(i < 0.33) {
+				gl_FragColor = vec4(0.0, i*3.0, 1.0, 1.0);
+			} else if (i < 0.67) {
+				gl_FragColor = vec4(i*3.0-1.0, 1.0, 2.0-i*3.0, 1.0);
+			} else {
+				gl_FragColor = vec4(1.0, 3.0-i*3.0, 0.0, 1.0);
+			}
+
+		}
+    </script>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="assets/app.bundle.js"></script>
   <script src="assets/player.bundle.js"></script>
+  <script src="src/vizulisation.js"></script>
 </body>
 </html>

src/player.js

 import Vue from 'vue'
 
-new Vue({
+
+window.player = new Vue({
     el: '#player',
     data: {
-        audio: new Audio('http://www.radioking.com/play/radio-nuit-info'),
+        audio: new Audio('http://listen.radioking.com/radio/116593/stream/155905'),
         playClass: 'glyphicon-pause',
         cover: '',
         title: '',
@@ -48,7 +49,7 @@ new Vue({
         this.audio.onloadedmetadata = function () {audio.play()}
         this.reloadData()
     },
-    template: '<div class="thumbnail"><img v-bind:src="cover" alt="cover"/><div class="caption">' +
+    template: '<div class="thumbnail" id="player-thumbnail"><img v-bind:src="cover" alt="cover" id="player-img"/><div class="caption" id="player-caption">' +
     '<p class="text-center">{{ title }} - {{ artist }} <a href="#" v-on:click="togglePlay" class="btn btn-default">' +
     '<span class="glyphicon" v-bind:class="[playClass]" aria-hidden="true"></span></a></p></div></div>'
 })
\ No newline at end of file

src/vizulisation.js

+//$(document).ready( function () {
+
+    let scene = new THREE.Scene();
+    let camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 1000);
+    let renderer = new THREE.WebGLRenderer();
+    renderer.setClearColor(0x111111);
+
+    document.getElementById('player-thumbnail').insertBefore(renderer.domElement, document.getElementById('player-caption'));
+    //renderer.domElement.setAttribute("class", "pull-right");
+    renderer.setSize($('#player-thumbnail').width()-2, $('#player-thumbnail').width()-2);
+
+    let light = new THREE.DirectionalLight(0xffffff);
+    let clock = new THREE.Clock(true);
+
+    scene.add(light);
+
+    let myUniforms = {
+        gravitySource0: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource1: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource2: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource3: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource4: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource5: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource6: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource7: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravitySource8: {type: "v3", value: THREE.Vector3(0, 0, 0)},
+        gravityStrength: {type: "f", value: 12500.0 * 3}
+    };
+
+
+    let shaderMaterial = new THREE.ShaderMaterial({
+        /* d�commenter la ligne ci-dessous pour disposer de vos
+         variables de type uniform dans les shaders. */
+        uniforms: myUniforms,
+        shading: THREE.SmoothShading,
+        vertexShader: document.getElementById('vertex_shader').textContent,
+        fragmentShader: document.getElementById('fragment_shader').textContent
+    });
+
+//let gSphere = new THREE.Mesh(new THREE.SphereGeometry(1),
+//    new THREE.MeshLambertMaterial({color: 0xffff00})
+//);
+
+//scene.add(gSphere);
+
+// introduire ici un nouveau noeud ayant pour g�om�trie un maillage
+// triangulaire et ne pas oublier de l'inclure dans la sc�ne
+    let planG = new THREE.PlaneGeometry(150, 150, 150, 150);
+    let plan = new THREE.Mesh(planG, shaderMaterial);
+    scene.add(plan);
+
+    plan.rotation.x = -Math.PI / 2;
+
+//let cube = new THREE.Mesh(new THREE.BoxGeometry( 100, 100, 100), shaderMaterial);
+//scene.add(cube);
+//cube.position.x = -150;
+//cube.position.z = 50;
+
+//let sphere = new THREE.Mesh(new THREE.SphereGeometry( 50, 32, 32 ), shaderMaterial);
+//scene.add(sphere);
+//sphere.position.x = 150;
+//sphere.position.z = 50;
+
+    let starsMaterial = new THREE.PointsMaterial({color: 0xFFFFFFF});
+
+//let triangle = new THREE.Points( createTriangularMesh(100, 2), starsMaterial );
+//let triangle = new THREE.Mesh(createTriangularMesh(100,9), new THREE.MeshLambertMaterial({color: 0xffff00}));
+
+//scene.add( triangle );
+
+
+    camera.position.z = 175;
+    camera.position.y = 100;
+//camera.position.y = 300;
+    camera.lookAt(new THREE.Vector3(0, 0, 0));
+
+    let audio, audioStream, analyser, source, audioCtx, canvasCtx, frequencyData;
+    let init = function () {
+        audio = window.player.audio;
+        audio.crossOrigin = "anonymous";
+        audioCtx = new AudioContext();
+        analyser = audioCtx.createAnalyser();
+        source = audioCtx.createMediaElementSource(audio);
+        source.connect(analyser);
+        analyser.connect(audioCtx.destination);
+        analyser.fftSize = 32;
+        frequencyData = new Uint8Array(analyser.frequencyBinCount);
+        //renderer.init({count: analyser.frequencyBinCount, width: window.innerWidth, height: window.innerHeight});
+    };
+
+    init();
+
+    function render() {
+        requestAnimationFrame(render);
+        analyser.getByteFrequencyData(frequencyData);
+        myUniforms.gravitySource0.value = new THREE.Vector3(-100, 50 - frequencyData[0] / 255.0 * 35, 0);
+        myUniforms.gravitySource1.value = new THREE.Vector3(-75, 50 - frequencyData[2] / 255.0 * 35, 0);
+        myUniforms.gravitySource2.value = new THREE.Vector3(-50, 50 - frequencyData[4] / 255.0 * 35, 0);
+        myUniforms.gravitySource3.value = new THREE.Vector3(-25, 50 - frequencyData[6] / 255.0 * 35, 0);
+        myUniforms.gravitySource4.value = new THREE.Vector3(-0, 50 - frequencyData[8] / 255.0 * 35, 0);
+        myUniforms.gravitySource5.value = new THREE.Vector3(25, 50 - frequencyData[10] / 255.0 * 35, 0);
+        myUniforms.gravitySource6.value = new THREE.Vector3(50, 50 - frequencyData[12] / 255.0 * 35, 0);
+        myUniforms.gravitySource7.value = new THREE.Vector3(75, 50 - frequencyData[14] / 255.0 * 35, 0);
+        myUniforms.gravitySource8.value = new THREE.Vector3(100, 50 - frequencyData[16] / 255.0 * 35, 0);
+        renderer.render(scene, camera);
+    }
+
+
+    clock.start();
+    render();
+//});
\ No newline at end of file