improve fps

[babaorhum]

Hello every babylonian,

I'm coding for an afterwork a little game with babylonjs http://www.babylonjs-playground.com/#21IMDW#8, http://animatum3d.jessicaguillot.fr/ with fog, vrdeviceorientationfreecamera, and some boxes, my mates and I have been looking for ways of explanation regarding our 12fps.

from 250 units meshes to clones no improvement

I adjust the number of clones to 250 instead of 1000 but biggers, no results

I cut in half the size of the scene from 1000 to 500, nothing happend

I commented the mirror material on the clones, nothing

First we thought of having trees instead of theses boxes, but considering the fps number we are not sure about importing meshes or doing the tree generation thing as their is two meshes each times instead of one for us.

The goal of the game is to find a rabbit somewhere,

but it is already so low on our smatphone already that we kept on a small design.

Perhaps we are all wrong or on the wrong way but you're not and you will have for sure great ideas to improve it and make it great  

we still want to add sounds coming from everywhere for the immersive experience with headset and VR glasses and a rabbit but first we need to fix the fps thing first,

thank you for the help, the library, the fog whom looks awesome and your help again,

btw new playgroung looks great, fullscreen a bit tricky at first on smartphone...

thanks again,

Jessica

[jerome]

Maybe the Solid Particle System could be your friend for this : http://doc.babylonjs.com/overviews/solid_particle_system

[aWeirdo]

both the PG & demo runs at 60 fps for me..

Something you can do is as @jerome mentioned and use SPS,
another option, when it's just boxes with no changes in material &/ geometry, using instances would be far more performant than clones  

Edit;
Simplified performance "guide" when creating several "instances" of the same mesh
1. SPS (best, but slightly more complicated than the others,  no drawbacks for your use)
2. Instances  (better, no drawbacks for your use)
3. Clones  (good)
4. induvidual meshes (bad)

[babaorhum]

Hello Jerome,

thank you for such a quick reply woudn't expect one until tomorrow I just edit the playground link as I think the other one may be wrong

have a nice day

[babaorhum]

I'm trying the instances right now and changing either

As I said I just change the playgroungd link

I'll have a look on sps

thanks @aWeirdo

[aWeirdo]

Still 60  
 

[jerome]

@babaorhum in the PG, you don't need all the stuff like declaring the engine or running the render loop as everything is done for you by the Playground itself

Just declare the variable createScene() : http://www.babylonjs-playground.com/#21IMDW#9

[babaorhum]

thank you,

on the playgroung, it's not to bad exept there is no more full screen button  @jerome 

why is it bad on  http://animatum3d.jessicaguillot.fr/ at the same time same smartphone here the code of the website ;

window.addEventListener('DOMContentLoaded', function() {

      function toggleFullscreen(elem) {
        elem = elem || document.documentElement;
        if (!document.fullscreenElement && !document.mozFullScreenElement &&
          !document.webkitFullscreenElement && !document.msFullscreenElement) {
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          }
        }
    }

    document.getElementById('renderCanvas').addEventListener('click', function() {
    toggleFullscreen();
    });

    document.getElementById('renderCanvas').addEventListener('click', function() {
    toggleFullscreen(this);
    });

    // get the canvas DOM element
    var canvas = document.getElementById('renderCanvas');

    // load the 3D engine
    var engine = new BABYLON.Engine(canvas, true);
    //engine.switchFullscreen(true);


    var createScene = function() {
        // create a basic BJS Scene object
        var scene = new BABYLON.Scene(engine);
        scene.gravity = new BABYLON.Vector3(0, -9.82, 0);

        // create a FreeCamera, and set its position to (x:0, y:5, z:-20)
        var camera = new BABYLON.VRDeviceOrientationFreeCamera("camera1", new BABYLON.Vector3(0, 2, -20), scene);
        //var camera = new BABYLON.GamepadCamera("Camera", new BABYLON.Vector3(0, 3, -45), scene);
        camera.inputs.add(new BABYLON.FreeCameraGamepadInput());
        camera.inputs.attached.gamepad.gamepadAngularSensibility = 250;

        camera.applyGravity = true;
        // target the camera to scene origin
        camera.setTarget(BABYLON.Vector3.Zero());

        // attach the camera to the canvas
        camera.attachControl(canvas, true);
        camera.ellipsoid = new BABYLON.Vector3(3, 2, 3);
        scene.collisionsEnabled = true;
        camera.checkCollisions = true;

        //Fog
        scene.fogMode = BABYLON.Scene.FOGMODE_EXP;
        //  scene.fogDensity = 0.09;
        scene.fogStart = 20.0;
        scene.fogEnd = 60.0;
        scene.fogColor = new BABYLON.Color3(0.9, 0.9, 0.85);

        // create a basic light, aiming 0,1,0 - meaning, to the sky
        // light1
        var light = new BABYLON.PointLight("dir01", new BABYLON.Vector3(-250, -500, 250), scene);
        light.position = new BABYLON.Vector3(250, 500, -250);
        light.intensity = 1;


        // create a built-in "ground" shape; its constructor takes 5 params: name, width, height, subdivisions and scene
        var ground = BABYLON.Mesh.CreateGround('ground1', 1000, 1000, 2, scene);
        //Creation of a repeated textured material
        var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
        groundMaterial.diffuseTexture = new BABYLON.Texture("assets/ground.jpg", scene);
        groundMaterial.diffuseTexture.uScale = 50;
        groundMaterial.diffuseTexture.vScale = 50;
        groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        ground.material = groundMaterial;

        // boxes material
        material = new BABYLON.StandardMaterial("kosh5", scene);
        material.diffuseColor = new BABYLON.Color3(0, 0, 0);
        material.reflectionTexture = new BABYLON.CubeTexture("assets/skybox", scene);
        material.reflectionTexture.level = 0.2;
        material.specularPower = 64;
        material.emissiveColor = new BABYLON.Color3(0.1, 0.1, 0.1);
        //material.alpha = 0.95;

        // Fresnel
        //material.emissiveFresnelParameters = new BABYLON.FresnelParameters();
        //material.emissiveFresnelParameters.bias = 1;
        //material.emissiveFresnelParameters.power = 2;
        //material.emissiveFresnelParameters.leftColor = BABYLON.Color3.Black();
        //material.emissiveFresnelParameters.rightColor = BABYLON.Color3.White();
        var boxParent = new BABYLON.MeshBuilder.CreateBox("box", 1, scene);
        boxParent.material = material;


        var meshPositionX = [];
        var meshPositionZ = [];
        for (var i = 0; i < 1000; i++) {

            var RandDom = function getRandomIntInclusive(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            var randomHeight = RandDom(20, 30);
            var PosX = RandDom(-500, 500);
            var PosZ = RandDom(-500, 500);
            var box = boxParent.createInstance("box: " + i); // change new mesh to cloning/instances to improve fps
            box.scaling = new BABYLON.Vector3(10, randomHeight, 10);
            var boxHeight = box.getBoundingInfo().boundingBox.extendSize.y; // get you the height
            box.position = new BABYLON.Vector3(PosX, boxHeight, PosZ);
            box.checkCollisions = true;
            meshPositionX.push(box.position.x);
            meshPositionZ.push(box.position.Z);
        };
        boxParent.setEnabled(false); // hide the parent box

        // Skybox
        var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/skybox", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.disableLighting = true;
        skybox.material = skyboxMaterial;

        // Shadows
        //var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);
        //shadowGenerator.getShadowMap().renderList.push(box);
        //shadowGenerator.useExponentialShadowMap = true;

        //ground.receiveShadows = true;

        //sounds

        var music1 = new BABYLON.Sound("", "sounds/tool.mp3", scene, null, { loop: true, autoplay: true, spatialSound: true, maxDistance : 300 });
	      music1.setPosition(new BABYLON.Vector3(PosX, 0, PosZ));

        var laugh = new BABYLON.Sound("", "sounds/laugh.mp3", scene, null, { loop: true, autoplay: true });
        laugh.setDirectionalCone(90, 180, 0);
        laugh.setLocalDirectionToMesh(new BABYLON.Vector3(1, 0, 0));
        laugh.attachToMesh(boxParent);
        //finally, say which mesh will be collisionable
        ground.checkCollisions = true;
        skybox.checkCollisions = true;

        BABYLON.SceneOptimizer.OptimizeAsync(scene, BABYLON.SceneOptimizerOptions.HighDegradationAllowed());

        return scene;
    }
    // call the createScene function
    var scene = createScene();

    // run the render loop
    engine.runRenderLoop(function() {
        scene.render();
    });

    // the canvas/window resize event handler
    window.addEventListener('resize', function() {
        engine.resize();
    });
});

thanks again we are stuck...

have a nice day

[GameMonetize]

Can you try without this:

BABYLON.SceneOptimizer.OptimizeAsync(scene, BABYLON.SceneOptimizerOptions.HighDegradationAllowed());