Search the Community

Hello, I'm a developer at Colonist.io and we are looking to increase the game performance on all devices. To test performance, we run multiple instances to force our computer to work harder. We noticed that one of the biggest FPS word is the Player Container View which only displays content and it has zero animations. When we hide it using PIXI.JS Developer Tools, FPS increase by ~15 on all instances. We already started optimizing by using `cacheAsBitmap`, however it is not possible to cache the whole container as content inside it changes from time to time (text and colors). We tried enabling `cacheAsBitmap` by default, disable it on every change, and enable it again after that, however it has some issues such as not being able to listen for `onClick` and a small but noticeable jitter. Some notes: - We are using PIXI.JS 5.3.12 - Spector.js only reports 9 draws - Attached is the structure of every single player container and what we are optimizing - We are aware that all GUI should be made with raw HTML and CSS but we want that to be our last resort. - Sprites are loaded and rendered with the following logic: // This gets run before the game starts export function loadImages() { for(const img of getImagesToPreload()) { const imgPath: string = UIImagePathController.getImagePath(img.name + img.extension) PIXI.Loader.shared.add(img.name, imgPath, {crossOrigin: true}) } PIXI.Loader.shared.onProgress.add(loadProgressHandler) PIXI.Loader.shared.load(assetsFinishedLoading) } // This is an example of how we load a texture static getTextureForCard(cardEnum: CardEnum): PIXI.Texture { const cardData = CardDataController.getCardDataForCard(cardEnum) if(cardData == undefined) { logError('getTextureForCard', [cardEnum]) return PIXI.Loader.shared.resources.card_rescardback.texture } return PIXI.Loader.shared.resources[cardData.imageFileName].texture } I don't really know what the approach here should be. Any help is appreciated. Thanks!

Congrats on v5 you awesome people! So a long time ago I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links. Screenshots: https://timetocode.tumblr.com/post/164071887541/much-progress-screenshots-show-in-game-terrain Video of line of sight https://timetocode.tumblr.com/post/163227386513/11-second-video-tree-blocking-line-of-sight It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's https://www.redblobgames.com/articles/visibility/ To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it. It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook. TY TY

Hello community! What my game demands My game is round based and in every round I spawn certain types of powerups that can be picked up by players. In the settings before the game starts it is already decided what types of powerups will spawn, but the server generates on the fly the next powerup that needs to spawn with the following information: time its spawns, the type of powerup, the coordinates where it needs to be rendered. This information is sent to the clients, which then render the next powerup on the screen. To give a concrete example: In a game powerups of 3 different types can spawn, then every few seconds the server sends the command to the clients to render a powerup of type z at position (x, y). If a round goes 3 minutes, it could mean that for example around 60 powerups (new sprites) will spawn. How I solve it currently Each powerup has its own class with a static texture (PIXI.Texture.from(path to svg file)) which loads a .svg file. If the client received the command to spawn a powerup, a new sprite is created (new PIXI.Sprite(powerupClass.texture)) and certain properties of this new sprite are defined (setTransform(x, y), width, height, anchor). Afterwards the sprite is added as a child to the powerup PIXI.Container(). When a powerup is picked up, I loop through the children of the container and remove the correct child based on its id. As you can see I already re-use the texture of each powerup, so multiple new sprites are created from a single texture again and again. My question is if there is any obvious way to optimize this further? Or is this something where I should not invest any effort into optimizing it since any optimization would see almost no performance gains?

Need some serious guidance with SceneOptimizer. I promise I have thoroughly read through the wiki page https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-SceneOptimizer-tool I believe I have included the scene optimizer javascript correctly. Not sure if I am implementing the code correctly. Basically, I'm trying to downgrade rendering on slower devices (eg Samsung Galaxy S4). Using this code below, I never see anything coming through on the console.log when testing on my Linux Debian laptop in Chrome 38. Javascript include: <script src="/libs/babylon/babylon.1.14.js"></script><script src="/libs/babylon/babylon.sceneOptimizer.js"></script>Code: var _canvas = document.getElementById("renderCanvas");var _engine = new BABYLON.Engine(_canvas, true);BABYLON.SceneLoader.Load("", "babylon/room.babylon", _engine, function (scene) { // Wait for textures and shaders to be ready scene.executeWhenReady(function () { // Optimize scene rendering BABYLON.SceneOptimizer.OptimizeAsync(scene, BABYLON.SceneOptimizerOptions.HighDegradationAllowed(), function() { console.log('FPS target reached'); }, function() { console.log('FPS target NOT reached'); } ); // ...I've tried changing out High to Low and Medium but I'm never seeing the log. Leading me to believe I'm not implementing right. Also not sure, even if I get a log from it that it is degrading. I'm unable to find any other examples from a Google search. Can someone provide a very very simple working example where it will just auto degrade whenever the frame-rate starts dropping below 30? Thank you so much. And thank you for such a brilliant library. I'll share my project when it's done.

Hi, I've noticed that switching between states or entering next state causes frame drop in my game. First off all I need to say that I'm using Phaser.State in a little bit different way. I've split my game in multiple sections, like: IdleState, MovingState, AnimatingState, BonusGameState, etc....I was testing the game on my desktop PC, disabled practically all my code and also hidden all display objects. The only thing left in my game was testing the state switching, which resulted to be the main issue for the frame drop. It happens only twice, once you enter a new state. First frame drop (from 60FPS -> 20FPS) happens almost at the entering phase, and the 2nd happens always around 2.3s later. And this is super annoying especially because you can notice flicker in Moving & Animating state, even though we're talking here only about two occasions of frame drop per state. I would like to know what could be the most expensive method/command inside StateManager -> clearCurrentState() and StateManager -> setCurrentState(key) ? I wouldn't like to break everything apart now, just because of this. Is there a way to optimize anything here?

Hi guys I will be spending the next few hours (attempting to) creating a code snippet that optimizes meshes, by doing automatic merging. My objective is to: 1) Automatically identify meshes that share same materials, and merge them into a single mesh. 2) Merge all meshes that don't share material into one single mesh all meshes, by using submeshes and multimaterial, automatically. The idea is to have an automatic optimization based I have spent a long time researching on forum and reading docs. However, if something like this has already been done, and I didn't find it.. please let me know Meanwhile.. I'll be coding and making tests the next hours

Hi, Is it relevant to apply a pooling system to Phaser's Tweens in optic to reduce the garbage collector invocation ? Because this subject as already been asked but dont find a clear answer : Thanks

Hi Thanks for the great BJS and TOB exporter, the meshes could be generated from Blender and rendered in BJS environment efficiently. However I find out something interesting that JS heap increases when the mesh is instanced in the scene. But the heap size could not be decreased when the mesh is disposed. I’m curious whether this will cause some memory issues(such as memory leak). Here is the demo of the system: https://willlinifm.github.io/Playground_bjs/index.html The Source code is as the following or the link : https://willlinifm.github.io/Playground_bjs/js/Scene.js If the playground is better for debugging, please try this link. The implementation and the outcome are nearly the same. (Click Sphere to generate mesh //// Click ground to dispose it) https://www.babylonjs-playground.com/#4GQCEL#2 The attachment are the heap snapshots ! 。The heap1 snapshot is took before the mesh is made an instance by TOB-generated-js file 。The heap2 heap snapshot is took after the mesh is made an instance by TOB-generated-js file. We can find that the heap size is increased. 。The heap3 snapshot is somehow hard to understand that when the mesh dispose function is called, the heap size still raise a high level compared to the first snapshot. NO~~ My questions are 1. If the meshes are generated and the Js heap size is increasing at the same time. Will it cause the memory issue and make the system run slowly? 2. How to make the best to decrease the heap size after mesh dispose process. 3. I’m not sure, but during watching the snapshot constructor information, I find there may be some looping references within BJS/TOB/MeshFactory structure. Will it cause the GC(Garbage Collection) unable to release memory? Thank you ! BJS and everything here are awesome!

Once a ray is created, is it possible to dispose/delete the Ray so it can be cleared by JavaScript garbage collection? For instance, what happens to the Rays that are using a disposed mesh as an origin?

Hello, I have a pretty complex scene built and I am having very heavy lag issues. Even though I have a lot of meshes, they are all instances of default ones... so I don't think there's any reason I should be getting only ~10 FPS. Could anyone provide me with any sort of clue as to why my performance is so low? By the way, each of those cylinders are composed of many layers of cylinders. There's usually 3 cylinders (the middle one, the border, and the outline) and under them could be at least 3 others stacked (the ones that look like shadows). Aside from that, each little "group" that you see in the screenshot has a "mapMesh" object which the cylinders are parented to. All those mapMeshes are parented to a worldMesh. For the GUI text and images, each letter/image is an instance of a previously generated text/image. Each letter is parented to a wordMesh, which is then parented to a labelMesh, which is then parented to the mapMesh or the cylinder in the case of the ones on top of it. The background with a gridMaterial has size 300 x 300 and gridRatio of 4. There's also a linear fog which starts at the end of the camera (usually 50 units apart from cylinders in the y axis) and ends at 50 units after that and has a density of 0.01. After this scene is fully generated, there isn't much coding running at all... no animations or anything, it's pretty static. However, I cannot freeze world matrices because I might need to move the cylinders. I appreciate any help, really stuck on how to improve performance here and not degrade the quality of my scene.

Hi everyone, I know it's possible and advised to use InstancedMesh when several meshes share the same geometry and the same material. Is there some recommended optimization to do when two meshes share the same geometry but have different materials ? For example with this case : http://playground.babylonjs.com/#T4Z2V9#1 (here VertexData object is already loaded) Is there something better than two calls to "applyToMesh" ? Like obj1.geometry = obj2.geometry, this kind of thing... (my question is based on the fact that Unity explicitly share the same geometry across objects, even when Materials are different. But perhaps it's only done to optimize data packing / loading and has no impact at runtime...) (I'm fairly sure I have already found this question somewhere, but can't remember the answer nor find where it was...) Thanks a lot for your inputs ! Have a nice day,

Hi guys, I am currently working on a game where you control a person throught a maze. It's my first babylon js application so i'm learning on the go. I managed to create a good base for the game, a character that you can move around on a world, with a good camera management ect.... My next step is to make the game multiplayer, with NodeJS and Socket.io. The thing is that I noticed that my application can be quite slow sometimes and I think it will be bad for the following of my project. After some recherch I came accross some SceneOptimization tutorials and I applied them, without much results... I also tried to remove every shadows on the game but there is still some major fps drops Thats why I finally come to you with the hope that someone can help me. The current version of the game is available at this link : http://test.labyloup.com I also attach the sources with this message. I know it's not a very good practice to throught a big chunk of code and ask for help, but at this point I really don't know what to do (maybe there is nothing to do) FPS.7z

Hi All. Maybe it seems strangely but how I can before use scale9 for sprite2D, scale this sprite without scale9 and after that applying to this sprite scale9? Why I need this? For optimization! I have canvas size 1280x720, then I am make the size for this canvas 640x360 and scale = 2 and for all sprite2D objects on this canvas I set scale = 0.5 and in results we have few resolution for canvas and good quality for all sprite2D objects. But some sprites uses scale9 and if I set scale 0.5 for this sprites, then this sprites at once uses scale9 but I need use just scale 0.5 and after that apply scale9. This is what I get if scale of canvas = 1 and the button scaleX = 1.5, scaleY = 1 (uses scale9) But what I get if scale canvas = 2 and button scaleX = 0.75, scaleY = 0.5 (uses scale9) Need to apply scale 0.5 as original scale and then apply for a new size of sprite the scale9 grid. How I can to do this? Thanks!

Hi, I do have a mesh with a huge amount of vertices (Meshlab say 1800000 vertices, after unifying duplicates still 304000 vertices). Its stored in an STL File. I import it as a mesh as shown in the example below It's doing well on a PC with FPS of almost 60fps. But using mobile devices I end up with 10-20 FPS. So, I am looking for an optimization solution. I read all the HowTo on your Web page. Since its only one model - instancing or cloning does not help. I thought about using LOD or Auto LOD. But trying that the framerate totally drops. See here (lines 43-45) https://www.babylonjs-playground.com/#XG8RH3#1 From Unity I know that they split or slice models with lots of vertices in slices of max 16k vertices. Is there a way in BabylonJS to split huge meshes into slices of sub-meshes to improve FPS performance? Another idea is to keep the amount of vertices/triangles for the main areas of the model and decrease it for others. Do you support such a feature? What would you suggest to improve the performance while keeping the information? I know its a trade-off. Thx for your hints. See you

I'm looking for ways to optimize a scene I created in the Playground. This scene is based on previous work from another thread, I just added some objects and logic to mimic a small game. It uses native CannonJS for the PFS-camera and movement of the monster models. I used the code and model from the instances demo. From line 16, you can turn on and off physics for the monsters, skeletal animations, the skybox, trees, shadows, procedural textures(grass), and whether or not the monsters should lookAt and follow the player. As well as specify the amount of trees + the range and amount of monsters. https://www.babylonjs-playground.com/#FZZV7K#23 I'm only hitting around ~30 FPS with this example. Is a scene such as this too heavy for WebGL and browsers? The trees are instances, so unless I clone and merge them, I don't see what could be changed there. Maybe a smaller, compressed texture. The monster models all have skeletons and animations, so no instances or merging can be used here. Disabling physics seems to give some FPS boost, so maybe using a worker would do some good in this example. I'll give this a try, and see what effect it has on overall performance. Here's a minimized version, with most things stripped, and 50 monsters without animations. https://www.babylonjs-playground.com/#FZZV7K#24

Hey guys, I'm about to release a game made with Phaser 2.8.2 targeting Desktop browsers. I was wondering if there's anything I need to do to make sure the code runs as optimized/smooth as it can on players browser? In native world, I would simply create a "release" type build with compiler optimizations enabled. Is there such a thing? Thanks.

Hello, How to optimize this? 96 draws, 707 calls. 40 cards and they are drawn separately. all textures are in one atlas, all cards are on the same parent. The card object is a sprite in which the sprite in which 2 sprites for shirt and card face and 4 textures for this. Card class code on the gist: https://gist.github.com/maxmonax/fd8ea7605a7558986aa152c63338f9fd Thanks!

Hi All, Likely a simple question, but can someone explain what the Mesh Selection is telling me in the Stats tab of the inspector?

Hello, when I make 3D models I usually make a texture atlas to reduce number of DrawCalls. Is that the case for PIXI? Do we need to make an atlas for PIXI or maybe PIXI renderer handles multiple graphics efficiently? If not is there a good tutorial out there?

I need to load a large scene, the model comes from UAV scanning generated, I hope to be able to smooth loading on most devices, including mobile phones. In my solution, I need to release objects outside the view (objects and materials are released), but I found that the BJS's own Frustum Clipping did not release the object outside the view, but I will use LOD, I will load multiple precision models, if not released, LOD will be meaningless, how can I do, I need to rewrite BJS code? I tried to use incremental load, it did not release the memory of the object, but I found in Debug Layer when moving the viewport the total vertices in the change, I do not know what reason? But the total meshes not change；http://www.babylonjs.com/Demos/Espilit/

Hi folks! New to the forum, but looking forward to share and consume knowledge and info with you all! I have a question that has bothered me since I started writing shader based gl code, how to optimize the rendering pipeline in the best way. I've read a ton of GL books and gone through countless tutorials on the subject, but each one just touch on the basics on how to get things working. Not on how to actually set up a optimized and clean rendering pipeline for a working graphics engine. The parts that stand out in my case is how to handle textures and shader programs in a good way, and what standard I should go after when it comes to handling of these precious resources. The basic question is, how many times in a single render cycle should I be allowed to change 1: Shader program, 2: Texture. To take a real life example on a game that I'm working on at the moment, I first do my general rendering that uses 2 textures, one for sprites and one for font sprite, the textures I use is quite big, 2048^2 as I'm working on a HD version of a game. Here I'm pondering on perhaps using a 4096^2 texture as well, looks like most devices can handle these sizes, and I can cram in pretty much all the gfx assets I need onto one of those babies. But is it good practice? Do I win anything when it comes to rendering speeds, and is the win big enough to handle large complex sprite maps like that? Or can I have 50-100 different texture images that I can pick from during a single cycle? The second parameter is the Shader program, same goes here really, I have a shader for general sprite handling, and a shader for the font renderer, but I also have a special shader for post fx that I use for a FBO that will be the final scene in the pipeline. I think there will be more programs involved here, and I might need to switch between them during a rendering cycle. Is it to much to switch shader programs 10-20 times in a single cycle, or is it within acceptable limits? The engine setup that I have today works quite well and I can't really find any problems with rendering speeds, but I want to push this a bit, I'm working on a particle engine that I want to use, and that will bring an additional shader into the equation, and probably additional sprite maps that needs loading. What I really want to know is if there's some kind of standard to comply with, would be great to have some frames to work within when it comes to the rendering pipeline. Looking forward to hear your input on these questions!

Hello everybody, I'm doing a little game plateform for fun and for the ground management and for more speed, I wondered if was worth better not use (for optimization) : - Tilemap : But I feel that after a certain number of box it starts to slow down... (and i can use player.body.blocked.down to know il player is landing) OR - Objects that define the ground and far fewer (but i loose player.body.blocked.down to know il player is landing) And that's make -> And all mixed -> I manage this with tiled like that -> What is the best practice to design ground and manage ground collision to keep a max of fps ? thank for help and this great forum Here the sources.zip

Hey guys! I'm pretty new to this forum and to PIXI.js so please excuse me if I'm posting in the wrong place. I am creating a game similar to guitar hero, but for piano (basically a synthesia clone). Here is a link to my JSFiddle I have the basics setup how I want, but I am running into some performance issues. I need the game to run at a solid framerate with up to ~10,000 notes in a level (not all being displayed at the same time of course). Currently, the note graphics are created and added to the stage within a group and animated downward. When they are added, their visible property is set to false and is only set to true when the are within the view. Here is my animation loop: function animate() { gameTime = performance.now() / 1000 - startTime; // CULLING loop // loop to go through all notes and see if they should currently be visible for (i = 0; i < numNotes; i++) { // if the note should be visible, make it visible if (gameTime + offset > notes[i].startTime && gameTime < notes[i].stopTime + offset) { if (notes[i].graphic.visible == false) { notes[i].graphic.visible = true; } } // if the note should not be visible, set visible to false else if (notes[i].graphic.visible == true) { notes[i].graphic.visible = false; } } // set y pos based on gameTime group.y = (ySlope * -1 * gameTime); // or set it manually // group.y += 8; renderer.render(stage); requestAnimationFrame(animate); } The frame rate is currently not where I want it to be, so I am hoping that someone can show me where I can make some optimizations. Feel free to play around with the JSFiddle. Thanks, Micah

Hey everyone, I'm trying to create a warehouse viewer app. I need to display A LOT OF meshes (I'm using only deformed cubes). I tried the optimization processes I saw in the tutorials, but I'm probably missing something, because my scene is slow (5 fps).. I'm currently using instances, I saw it was normally the best idea in my case (all the mesh will stay in their position, no move, no transform, no material change). Is it the right choice ? I tried with cloned objects too but the result was worse in my case (or I was doing something wrong?).. NOTE : I'm using "scene.pick()" which is using apparently a lot of CPU (or GPU), because in the app I will use the mouse lock API (and use the screen's center as the cursor). Here is the playground : http://www.babylonjs-playground.com/#KDCLN#3 I also have a bug on the floor, the shadow-like things, I don't know what it is, if someone has an idea.. Thank you guys

Hi guys, i want to add a quality control to my project so a user can change the quality of the scene to reduce lag / improve performance on low-end machines, I stumpled over the "Auto-LOD" https://doc.babylonjs.com/tutorials/In-Browser_Mesh_Simplification_(Auto-LOD) but it doesn't quite do the trick, indices only reduced slightly & no change to vertices. Take a simple sphere made with 20 segments/subdivs, var sphere = BABYLON.Mesh.CreateSphere("sphere", 20, 2, scene); This sphere contains 5808 indices & 1035 vertices, But if i create the sphere with 10 segments instead, var sphere = BABYLON.Mesh.CreateSphere("sphere", 10, 2, scene); This sphere only contains 1728 indices & 325 vertices. Is there any way available to reduce the actual "quality" of a mesh (live) without using the LOD or Auto-LOD systems? (i need to use it on custom 3d models aswell). For the sphere as an example. I want to go from 20 -> 10 segments if quality is reduced by 50%, is this possible to do "on-the-go" or would it be better to force a reload and then load the meshes/models with the requested quality? Any ideas/input would be greately appreciated Cheers