Jump to content

Recommended Posts

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  :D

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...