[TUTO] Analyzer

[Stvsynrj]

Hi guyz !

 

Here is a little tutorial about the analyzer in Babylon.

 

This is the effect we will try to do here : http://synergy-development.fr/webaudio2/

 

We will make a grid of cube moving with the music

var analyserEffect = {        // our master scene	scene: null,        w: 10, // width of our grid cubes        h: 10, // height of our grid cubes    	    createScene: function(engine) {        // create our scene and set it's background color to black	var s = new BABYLON.Scene(engine);        s.clearColor = BABYLON.Color3.Black();	        // our main camera. We dont want the user to be able to move it, so, no attached controls.	var camera = new BABYLON.ArcRotateCamera("camera", -0.87, 1.1, 600, BABYLON.Vector3.Zero(), s);	            // Here we create 3 lights, 2 grey and 1 yellow/orange, something like gold.        var pl1 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-200, 200, -100), s);        pl1.diffuse = new BABYLON.Color3(219 / 255, 138 / 255, 73 / 255);        pl1.specular = new BABYLON.Color3(219 / 255, 138 / 255, 73 / 255);        var pl2 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(200, 200, -100), s);        pl2.diffuse = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255);          pl2.specular = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255);        var pl3 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-100, 250, 100), s);        pl3.diffuse = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255);        pl3.specular = new BABYLON.Color3(226 / 255, 217 / 255, 184 / 255);                        // let's create a shadow generator for each lights        var shadowGenerator1 = new BABYLON.ShadowGenerator(1024, pl1);        var shadowGenerator2 = new BABYLON.ShadowGenerator(1024, pl2);        var shadowGenerator3 = new BABYLON.ShadowGenerator(1024, pl3);        // Our main cube. We make it invisble, we only need it to create instances for our grid cube.        var b = BABYLON.Mesh.CreateBox("b", 20, s);        b.isVisible = false;                // First, we create our "cool" material         var mat = new BABYLON.StandardMaterial("m", s);        mat.diffuseColor = new BABYLON.Color3(0.1, 0.5, 0.5); // We will move it later        mat.bumpTexture = new BABYLON.Texture("assets/img/grained_uv.png", s); // A cool bumpmap               // Scale it 2 times as our grid will be big        mat.bumpTexture.uScale = 2.0;        mat.bumpTexture.vScale = 2.0;        // A also cool reflection map. Set it to spherical mode and a really little level of reflection        mat.reflectionTexture = new BABYLON.Texture("assets/img/metal.png", s);         mat.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE;         mat.reflectionTexture.level = 0.1;        // Assign our material to our main cube.        b.material = mat;        // Standard material for the container we will create        var mat2 = new BABYLON.StandardMaterial("m", s);        mat2.diffuseColor = new BABYLON.Color3(0, 0, 0);                // Now we will construct our grid        var analyser_map = [];                        var i=0;        // Our grid will be 20x20        for (var x=-this.w; x<this.w; x++)        {            for (var y=-this.h;y<this.h; y++)            {                        // Create instances                analyser_map[i] = b.createInstance("b", 10, s);                // Multiply x & y to have space between cubes                analyser_map[i].position = new BABYLON.Vector3(x*25, 0, y*25);                                                                                // Add the cubes to shadow render list                shadowGenerator1.getShadowMap().renderList.push(analyser_map[i]);                shadowGenerator2.getShadowMap().renderList.push(analyser_map[i]);                shadowGenerator3.getShadowMap().renderList.push(analyser_map[i]);                analyser_map[i].receiveShadows = true;                i++;            }        }        // Create a doublesided (to have lights inside) ball as a container        var ball = BABYLON.Mesh.CreateSphere("s", 16, 1250, s, false, BABYLON.Mesh.DOUBLESIDE);        ball.material = mat2;                // Add an HDR filter to get "WOW" effect         var hdr = new BABYLON.HDRRenderingPipeline("hdr", s, 1.0, null, [s.activeCamera]);        hdr.brightThreshold = 0.2; // Minimum luminance needed to compute HDR        hdr.gaussCoeff = 0.5; // Gaussian coefficient = gaussCoeff * theEffectOutput;        hdr.gaussMean = 1; // The Gaussian blur mean        hdr.gaussStandDev = 5; // Standard Deviation of the gaussian blur.        hdr.exposure = 1.0;        hdr.minimumLuminance = 0.2;        hdr.maximumLuminance = 1.0;        hdr.luminanceDecreaseRate = 0.3; // Decrease rate: darkness to light        hdr.luminanceIncreaserate = 0.5; // Increase rate: light to darkness        hdr.gaussMultiplier = 1.0; // Increase the blur intensity                    // Create our analyzer and attach it to the current scene        var analyzer = new BABYLON.Analyser(s);        BABYLON.Engine.audioEngine.connectToAnalyser(analyzer);        analyzer.FFT_SIZE = 1024;        analyzer.SMOOTHING = 0.9;                    var workingArray;        s.registerBeforeRender(function ()         {           // Our timer           var t = Date.now() * 0.005;            // Get the analyzer's FFT            workingArray = analyzer.getByteFrequencyData();                        for (var i=0; i<analyser_map.length; i++)            {                // Now we will scale our cubes with the fft data.                // Note that we only take the first 64 channels to have a "diagonal" effect on the equalyzer                 analyser_map[i].scaling.y = 0.1 + workingArray[i%64] / 20;                                            }            // Here we are rotating colors            var r = 0.5 + 0.5 * Math.cos(t / 12.0);            var g = 0.25 + 0.25 * Math.sin(t / 5.0);            var b = 0.5 + 0.5 * Math.cos(t / 6.0);                    // And then affect them to our materials            mat.diffuseColor = new BABYLON.Color3(r, g, ;            mat.ambientColor = new BABYLON.Color3(r, g, ;            mat2.diffuseColor = new BABYLON.Color3(r/2.0, g/2.0, b/2.0);            mat2.ambientColor = new BABYLON.Color3(r/2.0, g/2.0, b/2.0);            // let's move the camera round our grid cubes            camera.alpha = t / 50.0;                                 });                // Return the scene        this.scene = s;        return this.scene;        },        // Render the scene    	renderScene: function()    	{    		this.scene.render();            	}}

// Now how to call it     var analyserScene = analyserEffect.createScene(engine);        var music = new BABYLON.Sound("Music", "assets/audio/High_Roller.mp3", analyserScene,        function () {            music.play();        }, { streaming: true });        engine.runRenderLoop(function ()    {        analyserEffect.renderScene();    });

Hope you'll enjoy ! Comments are welcome

 

Stv.

[jerome]

Superb!!!  

Although I get a very low framerate on my old laptop. Maybe it would be faster with a SPS instead than with instances, dunno ... unless the shadows are the bottleneck for my slow machine

 

About the sphere : if you need the light only inside, you might choose the value BACKSIDE for the parameter sideOrientation, instead of DOUBLESIDE, this would be twice less vertices to render (a sphere is always many vertices)

 

I'll test it asap on a decent computer !

 

I'm a big fan ever of any of your animated musical demos 

[Stvsynrj]

Yes, for the sphere i'm ok, dunno why i put doublesided ....

But i dont think that the grid cubes (20x20x8) with 3200 vertexes is the thing that hurts fps, i suscpect more the HDR filter to be the one who kiss the fps

[davrous]

Thanks ! A great tuto.

Yes, Steve loves the post processes effects which are nice but kills the perf on almost all devices

David