CSG dynamic substracting causing FPS drops

Hello Babylon.js forum!

So, I’m beginning my journey with Babylon and I thought that I’ll make my first game to not only better understand processes of making them but also get better at writing javascript. My game is supposed to be a isometric rpg/shooter type with modifiable terrain (because that will be a crucial part of my main mechanic - which will be - using terrain blocks to use them against your opponents), that last thing is where my problem begins.

Here is the code that I made for Babylon playground:

var createScene = function ()
    let isPickedUp = false;

    const scene = new BABYLON.Scene(engine, {useGeometryUniqueIdsMap: true});


    var camera = new BABYLON.ArcRotateCamera("FollowCam", 2.35, 0.3, 50, BABYLON.Vector3.Zero(), scene);

    const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 2, 0), scene);
    light.intensity = 0.7;

    var ground = BABYLON.MeshBuilder.CreateBox("Ground", {width: 50, height: 25, depth: 50});       //Main terrain
    ground.position.y = -12.5;
    ground.checkCollisions = true;

    var telekinesis_hole = BABYLON.MeshBuilder.CreateBox("Hole", {width: 2, height: 2, depth: 2});      //Cut out shape
    telekinesis_hole.isVisible = false;

    //CSG pick function
    scene.onPointerDown = function (evt, pickresult)
        var pickResult = scene.pick(scene.pointerX, scene.pointerY);        //Koordynaty 2D danego miejsca w scenie

        //If mesh is not picked up yet
        if (pickresult.hit & isPickedUp === false)
            //isPickedUp = true;        //If picked up
            isPickedUp = false;         //If not picked up (here just for testing)

            var targetPoint = pickResult.pickedPoint;

            var ground_csg = BABYLON.CSG.FromMesh(ground);
            var telekinesis_hole_clone = telekinesis_hole.clone("Hole");
            telekinesis_hole_clone.position = targetPoint;

            var csgmesh = ground_csg.toMesh();

            ground = csgmesh;     //Overriding terrain to save changes

        if(pickresult.hit & isPickedUp === true)
            //If mesh is picked up (not using yet)

            //isPickedUp = false;

    return scene;

I made one big box mesh which is simulating what will happen with terrain in my game, and made another box (set to invisible) which is my cut-out shape which I’ll use with CSG. In my game I want to use pointer position to substract those smaller box shapes from my main terrain mesh (so in short - making holes wherever I click). It does work BUT after like 30 clicks/substractions my FPS is starting to slowly drop to a point where single click takes like 500/600ms. I suspect that it may be some problem with GarbageCollector and variables that I try to dispose but I am totally unable to understand what exactly is causing those FPS drops/how to prevent them, so I would like to ask if anyone knows what is happening here?

Hi @Azetaris and welcome to the forum and the Babylon.js family.

First of all please let me suggest that you will get more response with a link to the playground you created rather than giving the code.

You may be better off starting with a number of boxes rather that subtracting from a large box, eg Babylon.js Playground

Have a look at

and also Thin Instances | Babylon.js Documentation

Hi, thanks for suggestion and welcoming - yeah, I actually tried to get link from my playground but couldn’t figure out how to do it so I just copy/pasted it here, next time I’ll try with a playground link.

Thank you for this playground, this SPS example is indeed better quite a lot performance-wise, but isn’t it just making selected boxes invisible instead of removing them? My goal is to make clicked holes disappear (so for example - if I would dig under my character (which would be standing on this terrain) it would fall down / or if I would cut out a shape that my character would be able to go through - it would go through), is this possible with SPS? I remember trying this system some time ago but I couldn’t get those particles to check for collisions so I had to make it the way I showed in my first post (there it does work but those FPS drops after 30+ substractions are the problem).
Thanks for answer!

It is possible to check if particles do collide with each other or another mesh but it does require extra coding and checking for visibility Physics and Solid Particles | Babylon.js Documentation

There is also a new feature added to the original SPS that allows particles to be deleted Expanding Solid Particle Systems | Babylon.js Documentation

I actually tried to get link from my playground but couldn’t figure out how to do it

Just save the playground and then copy and paste the address from the browser url location bar

1 Like