Search the Community

Showing results for tags 'optimization'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 33 results

  1. 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.
  2. 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 : (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,
  3. FPS Optimization

    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 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 : 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
  4. 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!
  5. 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) 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
  6. Releasing a Phaser game

    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.
  7. 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. 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.
  8. I'm getting ready for the js13k competition by refining and expanding my TypeScript Game Framework MINI.ts with the goal to let me make 2D games as fast as possible. My current plans are to work on Clean up Canvas Renderer Implement 2D WebGL renderer Implement Steering Behavior Refine basic physics Implement QuadTrees and Chunking Implement Terrain generation Implement some standard UI elements Improve the build process and get the TS code to generate JSDocs so that I can use Google's Closure compiler to get a smaller file size I'm looking for other ideas of features I might need later on or that make help speed up developer later on.
  9. Phaser optimization

    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: Thanks!
  10. Hi All, Likely a simple question, but can someone explain what the Mesh Selection is telling me in the Stats tab of the inspector?
  11. 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?
  12. 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;
  13. 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
  14. 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 = / 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
  15. 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 : 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
  16. 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" 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
  17. I finished something!?

    So I finally finished something, but it's still very slow especially on mobile. I'm hoping some of you help can point out why. Game is here: Code is here, all one file, with different states:
  18. Hello dear Forum, i have a Question regarding dynamic Asset Loading in Babylon.js. I was not able to find Information about this topic in the Documentation or the Forum (don´t slay me if I missed something ). So basically what I want to be able to achieve is: 1. User clicks a HTML-Button (for Example "Load Model") // Button should be outside of the Canvas if possible 2. Button calls Function with modelName as Parameter 3. Function checks if Model with modelName exists in some Kind of Library 4. If so, the Model gets Downloaded 5. Model gets rendered So, as far as i was able to find out, it is totally possible to pass Information from a HTML-Element to the Babylon Engine. But is it possible to download something at runtime (CORS is considered) that has never before been used inside the Project. The reason for this is that I want the Game to handle almost the whole "What shall i display?, Where shall i display it?, Which Components does the Object have" - Functionality dynamically without defining too much of it inside the Project. I hope I was able to give you an insight into what I want to achieve. Regards, Markus
  19. Hey Folks, I've started using the excellent Rotates Isometric plugin but quickly ran into an issue when trying to create a bigger world. The default examples (like this one) run great with a small grid but when I try to go above 50x50, framerate starts to drop off FAST. Since I want to create a good-sized scrolling world, I was wondering if there is any good solution to this? Here's the options I see: * Batch the ground tiles into one big image. BUT this still limits how many detail or dynamic sprites (trees, rocks, NPCs, etc.) I can have on top, and I can't batch those since it would mess up the sorting * Create only enough sprites to fill the screen and implement some sort of scrolling (i.e. as player moves right tiles on the left that go off-screen get moved onto right and changed to the new image that should be there) As far as I can tell tell, solution 2) is the better method, but it would still be limited to static sprites. Plus, the implementation would be a pain (unless there is a ready-made scrolling/pooling implementation somewhere?) Thanks for any feedback and thoughts!
  20. 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!
  21. Hi everyone ! Remember "Macromedia Flash" ? It is a dead technology that used to allow total freedom at the expense of HUGE computation. It has been abandoned... As much as I loved the possibilities at the time, fact is, running a somewhat simple game within your browser would require all the power and memory your computer could give, no matter how powerful, and in my humble opinion, I'm happy it has been discontinued, I HATED the way my -powerful then- MacbookPro would start to spin its fans at full speed, full noise, full heat. Now I'm a beginner in trying to master BABYLON.JS, and in my first experiments, I notice the fans of my brand new super-spec MacbookPro behave sorta the same way, soon after loading my scene, the fans start to turn fast and loud, Babylon.js pushes the computer to high temperature. And I don't want my beloved Babylon.js framework to end up like Flash !!! lol Checking demos on the official babylon.js site, I notice some of them render well without making the fans turn on (ex : but others demand too much (ex : ###So, trying to make it short, what is the good way to go in order to keep the CPU usage low ? (like in the Sponza demo)### -Textures: -What is the recommended size ? -How much CPU does it take to use bump, specular, etc... on top of the Diffuse one ? -Lights: -Is there dynamic lighting on an optimized scene ? Of which kind ? how many ? How to bake static lighting ? -Programming: -Is there a way to writing javascript code that would be better than another ? -example: Is calling "scene.getMeshByName("")" more demanding than just "mesh" ? -how does the "scene.registerBeforeRender()"should be handled ? -example: Is it a problem if calling "for (var i=0;i<scene.meshes.length;i++)" or "for (i=0;i<scene.textures.length;i++)" multiple times rather than just one time ? -Is there a way to handle/optimize memory ? Well this is just a few questions this topic can bring up ... I hope people participate with questions and answers, we can decipher the magic behind perfect programming together !
  22. Hi, Is there a limitation on the pixel size that you can use for the sprites? I'm asking this because, I've created an isometric map that loads 2 different sprite atlas depending on if you are on a desktop or mobile device. The mobile sprites have a size of 256*256px and the desktop ones have a size of 512*512px. My problem is that the desktop version has a low frame rate (1-5 fps) while on the mobile version it has a solid frame rate (60fps). If I change the game logic to use the mobile map on desktop the frame rate goes to 60fps. That's why I need to know if there is a limitation with the sprites size. Any help would be appreciated
  23. I have to recreate a Box2D game I made in Flash in HTML5. Unless I can figure out a way to pull the Box2D info from the Flash game (I did not hand code the objects, I used Box2d Flash Alchemy Port + World Construction Kit), I was planning to use R.U.B.E. to recreate the world and use Phaser with the Box2D plug-in to load it in like so. I've built 2 games using Phaser without using the built in physics systems and they work fine on my iPad, but I'm concerned about mobile performance using Box2D and want to set my client's expectations appropriately. So on to my questions... Why does the Bridge demo run so much more slowly than the Conveyor Belt demo? Just wondering if there is something I should avoid. Why does this run so much better on my iPad than the Phaser demos? I'm guessing it's because it's a simplistic library, but just wanted to point it out as an example of a Box2D demo that runs smoothly on my iPad. None of the public Phaser Box2D examples have a background image. Would adding a background image and images to all of the objects further effect performance? Is there a performance hit in using the Box2D plug-in vs. using Box2D externally like this Phaser game? Would it be insane to try to build a Phaser Box2D game at 1024x768 or larger? I'm guessing that the larger the canvas size the worse the performance. Please correct me if I'm wrong. The bottom line is, I really want use Phaser with the Box2D plug-in, but I want to make sure that it's the right tool for the job. I realize that mobile performance will never match that of a desktop, but I want the game to at least be playable.
  24. Hey guys! I have had poor performance on older devices and cant reach beyond 30fps. I added Phaser-debug to my project to get some insight on where I need to start optimizing, but Im not sure I understand the numbers. Except for these numbers, everything was zero. preUpdate4ms - stage postUpdate1ms - stage5ms - plugins render4ms - renderer Even though thses numbers only add up to 14ms, the total displayed is 30-40ms of calculations. (I have no idea where the rest are displayed. Oh well. Except for the debug plugin, Im not using any plugins. What does stage mean? Where should I look to cut the display time based on these numbers?
  25. I am making a spaceship game, to be more optimized I want to avoid calculing collisions when are far away from the player. I tried doing: 1) enemy.body.enable = false;2) Also this doesn't work. Because I never set it to true:[0].sensor = false;3) Kill and revive them: it's not the best solution, because I want them to change positions. Nothing seems to work. What can I do? This is a part of my code for collisions in p2: this.body.setCollisionGroup(enemyCollisionGroup);this.body.collides([bulletCollisionGroup, playerCollisionGroup, enemyCollisionGroup, asteroidCollisionGroup], null );this.body.onBeginContact.add( this.startConstantDamage, this );this.body.onEndContact.add( this.endConstantDamage, this );Thanks