Performance doubts(commercial project)

Well this is the goal of .width and .height sprite properties

1 Like

I think (and I may possibly be wrong) that what you mean for three sprites, green, orange and red they all have to belong to the same size blue rectangle. So that the file is like this


Whereas @gao wants the sprites packed like this


and you would need positional information as well as width and height information

1 Like

I agree :slight_smile: this is not ideal but I wanted to offer an intermediate solution :slight_smile:

1 Like

Yes, @JohnK. This is what it meant :slight_smile:

1 Like

@Deltakosh do you think that we could add this higher level to the engine(reading UVs, size, position from json)? or it’s better to stick with middle-level API?

1 Like

Is what I did with JSON in previous post using assetsManager in PGs Babylon.js Playground and #1 and #2 what you mean by middle-level API?


i meant more like json generated by TexturePacker - Create Sprite Sheets for your game!, and just use it via simple API i.e let sprite = createSprite("my_spritesheet/test_frame.png").

Anyway guys, thanks a lot for you help!. Really appreciate it. After weekend i will start working on some PoC but seems like i can adapt babylon to my needs.

Have a nice weekend guys!!


That makes me happy :slight_smile:


The concept of “Loop Damper” was a big performance optimization for our project.

Also this example shows 3 concepts within a pattern we call: AnmLoopz.

AnmLoopz: Damper, Removal, and Routing. : )

var alpha = 0;
scene.registerBeforeRender(function aLoop() {
    if(config.stopLoop){  scene.unregisterBeforeRender(aLoop); return;  } //AnmLoop Removal-.
    config.mesh.position.y += 0.01 * Math.cos(alpha); //Example: hoverAnm-.

    if(++alpha%2===0 || alpha%3===0){return;} //AnmLoop Damper-.
    //other lesser performant anmz.

The loop above only animates on ODD frames NOT divisible by 3. Eg. 7… etc. Output dampened.
You can also use that to easily animate many things simultaneously. Routing Frames.

   //AnmLoop Routing Pattern-.
   if(++alpha%2===0){  /*anm path 1-.*/   } 
   else if (alpha%3===0){  /*anm path 2*/ }
   else if (alpha%5===0{ /*anm path 3*/ }
   else { return } 

Techniques like that, is how we keep (commercial project) at 60 FPS.




TexturePacker looks interesting and I am going to have a go at adding a method of using it in sprite creation. To keep existing methods and effects on these sprites it will probably look something like this

(.ext means .jpg, .png etc)

var spm = new BABYLON.SpritePackedManager("name", url); // url will point to packed image as filename.ext and JSON will be filename.json;
var mySprite = new BABYLON.Sprite("name", spm);
mySprite.fileName = "individual sprite filename"; // eg spriteName.ext

//also have
mySprite.cellIndex = number; //relative to the place sprite added to packer, eg second sprite added will be 1;

Cannot guarantee it will be done or how long it will take so you still need to rely on your adaptation of Babylon. I will keep you informed.


@JohnK thanks, that’s awesome news :slight_smile:

1 Like

Different size sprites texturepacker format now available

Docs on their way


Regarding point 3, it sounds like you are asking about spritesheet support at an actual mesh level (3d mesh), in which case, unless I’m missing something, Babylon still does not support yet with instanced meshes. I.e. Spritesheet support for instanced meshes take 2 – Unless I am misunderstanding, or unless you are looking for 2d only (in which case sprite manager should work fine).

I’d still kill for instanced mesh sprite support built into the framework @Deltakosh :slight_smile:

1 Like

You can provide your own renderLoop and decide to skip one frame every two frame

Can you please show me a example render loop to skip all odd frames? =) Thank you!

1 Like
let odd = true;
engine.runRenderLoop(() => { if (odd) scene.render(); odd = !odd; });

Oh no. it’s embarrassing. :upside_down_face: the solution is so simple :smiley:
Thank you @JCPalmer

1 Like

I fail to see how this can be used to cap FPS, it will just halve the rendering cost no? How does this function block rendering? It doesn’t appear to, as an empty function block does the same thing as your false condition, and doesn’t appear to make a change in the scene.

I still run at max FPS when using this, with no change.

Unless there is more to it that’s not described?

1 Like

The function forces rendering one on two RequestAnimationFrame only so basically one on two frames only.

1 Like

It is as @sebavan says. Your browser runs things, based on your hardware, once every time your display refreshes when done through RequestAnimationFrame. That will be higher for XR headsets, etc.

@douglasg14b what you see for FPS might not be accurate, especially if you are looking at the browser’s profiler. It would be being fooled, as it had no real idea that on half the times it called your render loop nothing actually happened.

1 Like

What I mean is that that function doesn’t appear to block rendering, paste this and run it in a playground. An empty function (Or no call to engine.runRenderLoop()) still renders the scene as normal, how does explicitly asking your scene to render again, inside a function that doesn’t appear to block rendering if that call is not made, “skip” frames?

I propose that this is actually asking the scene to render extra times.

A quick playground test seems to corroborate that

Toggling commenting the following out:

let odd = true;
engine.runRenderLoop(() => { if (odd) scene.render(); odd = !odd; });

If this is true, then omitting the if (odd) condition should cause even higher resource utilization over normal?

And it does:

1 Like