Search the Community

Showing results for tags 'performance'.

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
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 211 results

  1. Hi community, I want to propose you some addition to assetManager and sceneOptimizer. If the solution already exist, said me assetManager : 1. Get loading percent, not on x file loaded but on stream data loaded when it's possible. > for more precision and to show state if you load some big files. 2. Add "abort" function and "onAbort" callback to cancel running tasks and loading files. > Currently "clean" function delete tasks in assetManager but not abort current loads. That mean if you have a big file in loading, it don't stop. sceneOptimizer : 1. Add a starter level to try optimizing render : > I tested the current sceneOptimizer and the problem is it try the best render first. If you have an older device, the website crash and the browser reload page before that sceneOptimizer can downgrade the render. So, it's a loop without ending. 2. Create two steps to optimize render : > First : upgrading. The sceneOptimizer try to reach "x" FPS with the starter level. If it's ok, it upgrade render again until when it can't reach "x" FPS. > Second : dowgrading. If the last try (or the first try with the starter level ) not reach FPS, the sceneOptimizer downgrade until when it can reach FPS. If the sceneOptimizer reach "x" FPS, it stop. > Of course, we keep "trackerDuration" : time in milliseconds between passes. > You will can restart the sceneOptimizer when you add or change something like the current version What do you think about this ? Have a nice day !
  2. Hi peeps, I've already published a similar topic not a while ago, but we couldn't really reach any conclusion: So I'm posting my demo now, maybe someone can think of something: As you can see, the tree density at the center is quite nice and realistic, and I'd like to be able to have the same density in all the other areas. There are already about 54 thousand tree sprites in this scene though, and to reach the same density everywhere I'd probably have to triple or quadruple this number, which would cause the FPS to drop substantially. Right now, the scene renders at 36-38 FPS for me. On some other devices I've tried it's way, way lower, like, 2-10 FPS on my Android phone. Keep in mind that I'd also add some buildings and roads and whatnot which would add some additional weight on the performance. As I've mentioned in another post already, I'd like to achieve something like this (made with three.js) :!/cortina Only the the trees in the proximity to the camera are shown, the rest are hidden in a very subtle way because of the green terrain texture. They also turn a little bit transparent before disappearing. Also, notice how dense the forest is and how the FPS are really good. What I've already tried without success: 1) Loading meshes instead of sprites and applying LOD mechanism resulted in very low FPS. 2) Using mesh instances instead of sprites, still very low FPS 2) Temechon kindly helped me and coded a LOD function for sprites, but unfortunately it was more or less the same FPS as without the LOD. 4) Showing all the 54k trees, but using a particle system instead of sprites, which helped to reduce the draw calls, but the FPS were still low. 5) I've implemented a "poor man's LOD". I separated the 54k trees into 9 chunks, each chunk corresponding to a specific area. Then at every frame I calculated the distance from the camera to the central point of each area. If it was close enough to the camera, I showed the area trees and if not, I removed them. This way at each frame I had to calculate distances to only 9 points instead of 54k points, which helped but visually it was not pretty at all. Even applying a brown texture on the terrain underneath the trees, the chunks of trees appearing and disappearing all at once are very noticeable. 6) I also reduced the tree image size to 128x128, just in case, but I'm not sure it had an effect on FPS. Using an image of a pine tree or a leafy tree would create much more perception of a dense forest, but unfortunately I can't use those. The scene is a winter map of a specific real-world area with leafless trees and I'm trying to be as realistic as possible. A silly idea I've also tried was using an image of a group of trees instead of an image of a single tree. It obviously looked fake, especially when rotating the camera. Some other ideas that I've had but have not tried: Solid Particle System -> as it has more effect on performance than a simple particle system and I've already tried that. Octrees -> could this help me? I've read the tutorial but I'm not sure I understand how could I apply it to sprites. I don't know how camera.maxZ works internally, but is there possibly any way to apply it only to sprites, so the nearest sprites only are visible? Could I implement my own camera that does this? tldr; I'd like to show ~200.000 trees in my scene with minimal performance drawback. Thanks a lot in advance!
  3. 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.
  4. Hi everyone, We've been working on a 3d mobile RPG game for a few weeks using Babylon.js and what we've been continuously struggling with is how challenging it is to keep 60fps on mobile. Let me share the "game" here to show you what the scene looks like: Don't laugh. Some stats: We have a ground mesh with standard material We have 4 different kinds of environment objects, tree1, tree2, rock1, rock2. We created 50 meshes of them using mesh.createInstance(). We have up to around 10 active characters in the camera. Each character has 6 meshes. I don't think we can instance them because each of them will need its own bone animation (one day -_-). Under 50 draw calls in total Running this on iphone 6 with ios 10.3.3 gives under 40 fps. We are hoping to keep it at 60 with even more stuff we want to add later on. I'm not super experienced with graphics optimizations, so could really use some advice here. A few optimizations I'm thinking of: The environment objects never change position or anything. How can we optimize for that? They use different materials, so I can't just merge them. Also, freezeWorldMatrix() on instanced meshes seem to destroy the mesh. Currently in the inspector it shows that mesh selection is taking 9.4ms and render takes 13ms. How do we bring mesh selection down? Octree can bring mesh selection down to 4.5ms but still that's quite a bit. How do we debug what's happening in the 13ms of "render"? How do we debug webGL performance issues on mobile devices in general? Any general suggestions on how to optimize for a game like this? Any inputs are greatly appreciated!
  5. low fps on iphone 6plus

    pixi.js is doing amazingly well for us on all our android and ios devices except iphone 6 plus. First discovered in our own game, later on we found that it can be successfully reproduced using On most devices, it can keep 60 fps at even 50k bunnies, which is impressive. However, iphone 6 plus seems to be an exception. FPS drops to around 30 with just 3k bunnies, and close to zero with 10k. Anyone has any clue on what's special with iphone 6 plus?
  6. Hello everyone, Is is possible to implement some occlusion or LOD-like mechanism for sprites in Babylon? I have a scene with a very large terrain and some forest areas represented by thousands of tree sprites. There are so many sprites that they actually affect performance. What I'd like to achieve is something like this:!/cortina If you watch it closely, only the the trees in the proximity to the camera are shown, the rest are hidden in a way that's almost imperceptible because of the green terrain texture. Could someone point me in the right direction? Is there a way to adapt LOD for sprites? Or could I put the camera into some kind of transparent mesh and in some way occlude the sprites behind the mesh walls?
  7. Hi, I have a scene with around ~800 non-static meshes moving around, and I find the main performance bottleneck is the time taken by Babylon calling evaluateActiveMeshes, which in turn calls computeWorldMatrix and _updateBoundingInfo on most of the meshes. However, the nature of my scene is that most of the meshes never rotate, and I separately track their locations and bounding info. So in principle, it seems like I could tell Babylon they're static (by calling freezeWorldMatrix?), and then manually update their boundingInfo objects, and set their worldMatrices to simple translation matrices. Would this be a safe approach, or has anyone tried it? Or is there some built-in way of achieving a similar result? Or does freezing the world matrix have other implications that would cause this to break? Thanks!
  8. performance limit of webkit

    I modified the phaser example named "arcade physics/gourp vs self", I change the number of object to 10000 then , off course , fps is very low But only 14% cpu, and 300m memery be used on my system Is there any performance limit exist in chrome or webkit ? How can I change it?
  9. Hi everyone, We made a simple runner demo with Phaser that works as a base for all our future projects. We are using node modules to make our development easier. We shared it on github so more people can use it and learn from it: You can try it here: It works great on every device we tested but some people reported that it is running slow on Ipad mini 1gen. We don't have that platform to test so it is hard for us to know how to improve it. Can someone give us tips on how we can improve performance for this demo on that platform? Thanks!
  10. Hello, I want to create an action-adventure platform game (similar to Swordigo). I chose Phaser because I've been using JavaScript for 5 years and I feel prepared regarding the patterns to use. I'm new to game development and I have a question: Phaser is suitable for this kind of game? Or can it cause performance problems on mobile phones? The game will have to work on iOS and Android in a WebView widget.
  11. Hey, I made a post before about scaling for high DPI monitors and thought that I came up with an acceptable solution but here I am again with some of my concerns about scaling and performance on 4k/retina displays. Even when I start from scratch and just draw a circle the performance is garbage. The weirdest thing is that the performance drops as soon as I put 1 pixel of the Chrome window on a 4k screen. So basically I have 2 screens connected and I move the Chrome window off the normal screen towards the 4k screen and immediately the frame rate drops to 30 instead of 60. I've logged the canvas and rendered size and there is no change when I put it partially on the other screen so the same stuff gets rendered. I've done the same to some other games and didn't notice this performance drop at all. It also happens with the examples and the bunny benchmark as shown in the crappy video below So my question is why the performance is suddenly so bad when I move the window over towards the 4k monitor. I would really appreciate if people have any tips on how to make sure the game looks good and performs well on 4k/retina displays. CSS scaling makes the performance better but then everything becomes extremely blurry and it's really not acceptable. Is it even possible to make web games that look great for 4k/retina displays with PIXI or in general?
  12. I am stuck in low FPS.

    I find that my game is always running at very low FPS (10 - 28 FPS) no matter what I try to improve the performance. The worst part is I don't know where to begin debugging or profiling. I have the following question, with priority in order. When FPS is low, is it always client side's problem? ( I just want to make sure if I am debugging on the right side, although I have also improved my server side in the process) How to profile it on Chrome? I have used the performance tab on Chrome but all I can see is the call tree from the ticker which goes all the way down to render function and renderCanvas function in PIXI's renderer. It doesn't help much with this information. I have tried commented out parts that are used to render different things in my game. But not leaving a single part out of my game would improve the FPS, the only way to get to 60 FPS is not to display the whole game scene (a container in app.stage) at all. I hope this question is not too specific.
  13. Phaser.Graphics anchor / pivot

    g'day g'day I've been lurking around a few forum posts addressing anchoring with Phaser Graphics objects and why you can't do it. I gathered it was something to do with it being a lower level issue with Pixi (don't quote me on that) the solution for dealing with this seemed to come down to either using pivot or generateTexture() and loading into image / sprite. Since it looks like post 2.5.0 we've lost Phaser.Graphics.pivot, I was wondering if there was any performance loss / gain by calling generateTexture() and loading into a Phaser.Image / Phaser.Sprite and anchoring from there? I guess simply put, is it cheaper to have 10 Phaser.Graphics or 10 Phaser.Images? ( bonus points for shedding light on what happened to pivot )
  14. Phaser + CocoonJS Lag Performance

    Hi in this states i uploaded my game is so laggy and i notice a bit of stopping after a platform leaves the viewport. It is a simple platformer game, hope you noticed this issue. THanks endlessState.js
  15. Hi there, i have a problem with the performance of my phaser game after i compiled it with cocoonjs i noticed that my game is so laggy. Is there someone developing games in phaser with cocoonJs that has a good performance after compiling?
  16. I have a heavy load Babylon scene (all meshes are optimized), which runs sufficiently well on desktops and tablets. The same site is slugish, slow or does not run at all on many mobiles when accesing through the mobiles browsers. I guess this is pretty normal since mobile GPUs are not as powerful as let's say tablets' GPU. So I guess the best thing to do is to test if the site is being accessed by a mobile device and divert the user to a mirror site where the textures are of lesser quality and the mesh sizes are smaller. Is that a correct solution? Is there any other ways of boosting performance Secondly, will wrapping the site into a Mobile app such as Cordova boost performance as compared to accessing the site through the mobiles' browser? Has anybody had experience with Windows apps running Babylon.js and were there any performance gains?
  17. Hi, I am trying to make a game for mobile, how can I test my game in terms of its performance, I am trying on devices but it takes my time a lot, testing the game every time. And one other question is what do you think about the phaser's future? I mean, nowadays I read about some performance issues when running phaser games on mobile. Should I choose any other programming language to make mobile games? I like phaser but if it will not good for mobile, I will have to pass any other programming language like java, instead of javascript.
  18. Hi, I'm trying to start sort of a drawing app where you can draw lines and show an image through those lines. Problem is, it is incredibly slow... So I have an "imageToReveal" sprite and mask it with the drawn lines. Now this does work in my project, but I cannot get it to work in JSFiddle. check it out here This should render the drawn shapes to a texture and set to texture to Sprite that's masking the image to reveal I don't know if this is the best way, but the simple way with a masked sprite and shapes as children didn't go well either: see this one So my question is, how do I make the first JSFiddle work? (and is it the best way) And if it is, how can I make it faster? since it drops from 60 to 40 after a single shape is put on stage.
  19. Phaser's performance on Android

    I'm surprised I can't find threads about Phaser development for Android and it's horrible performance. Generally the result of my googling is that making HTML5 games for Android is way worse than making Internet Explorer 6 hacks for websites was before. It looks like Phaser and probably most other frameworks are more or less unusable with it, so this is a huge issue. I'm early in development of a game, and after my tests I've noticed it's lagging on Android even with the simplest possible tween for one sprite across the screen (code attached). This applies both to the native Android browser and using CocoonJS with Canvas+, my test device is Galaxy Tab 3. CocoonJS claims the fps to be over 60, but in reality there's the occasional chop in movement every few seconds. On Android's Chrome browser it's ok, but obviously that's not enough. If I use the moveToXY function instead of tweens, it's closer to acceptable, but still far from perfect. Any of the tips provided in the long and pinned CocoonJS thread don't seem to apply to this case, since I suppose it's more about Android than anything else. I'm very interested in hearing people's thoughts about this, have you made not-laggy games for Android with Phaser, and if, how on earth did you succeed? window.onload = function() { var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'gameContainer', { preload: preload, create: create }); function preload() { game.load.image('robo', 'img/robo_small.png'); } function create() { var robo = game.add.sprite(0, 0, 'robo'); var tween = game.add.tween(robo);{x: 1200, y: 600}, 20000, Phaser.Easing.Linear.None); tween.start(); }};
  20. Hi, I want to offer user to disable reflections in my application so that there is gain in fps if he/she wishes to. I set ReflectionTextureEnabled in standardMaterial to false, the reflection is disabled but there is no performance gain. Removing the reflection texture from the mesh's material does increase the fps count. But I don't want to remove the reflection texture completely as user can toggle this back on again. Any strategies on how to do this?
  21. Hey guys, I'm looking for some advice on canvas scaling. We're working on a PixiJS game and want to have the canvas as big as possible based on a set aspect ratio. I've got it all working fine but when I started testing it on our benchmark devices I noticed the performance has dropped horribly. When I scale the canvas using CSS transform the performance is perfect but then the graphic quality is unacceptable. Does anyone have some advice how to get great scaling on any device (including 4k monitors) while still maintaining performance and good graphic quality? --- Good performance but bad quality scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; = '0 0'; = `scale(${Math.min(width / Constants.FIELD_SIZE.x, height / Constants.FIELD_SIZE.y)})`;, canvas.height); Good quality scaling but bad performance scaling method const canvas: HTMLCanvasElement = document.getElementById('game-stage') as HTMLCanvasElement; const width = window.innerWidth; const height = window.innerHeight; const ratio = window.devicePixelRatio * 2; canvas.width = width * ratio; canvas.height = height * ratio; = width + 'px'; = height + 'px'; if (height / Constants.FIELD_SIZE.y < width / Constants.FIELD_SIZE.x) { this.scene.scale.x = this.scene.scale.y = height / Constants.FIELD_SIZE.y * ratio; } else { this.scene.scale.x = this.scene.scale.y = width / Constants.FIELD_SIZE.x * ratio; }, canvas.height);
  22. Model size

    Hi, sorry for stupid question probably, but is model size affecting performance, lets say I have small model and camera is 3 units from it and big model with camera 100 from it. Will performance be different for them or its doesn't matter how big model is exported fro 3d max.
  23. So I've been looking into the new updates to Phaser CE (2.7.0+) and what has caught my eye the most is the updates to the way Phaser handles textures. It now seems to have the ability to handle texture compression formats for WebGL which is exciting! Previous to this, all the games I had worked in were just loading PNG RGBA data into the graphics card and having come from other engines that support texture compression for GPU RAM optimizations, it was definitely a feature I missed. I've branched on an old project I had in order to test this new compression system but I'm not sure how it would work with atlases. I was already using Texture Packer before to generate Texture Atlases for the game but they were just PNG atlases. I came across this Advanced Rendering Tutorial where it explains how to set up your Texture Packer project. I've gone ahead and done that but the examples only show the ability to load an image with those compression settings. Here is a doc reference to the load image function. Currently, I am using'key', 'texturePNGURL', 'jsonURL'); It seems the new update only supports the following two calls'factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' });'factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); How would I go about loading my atlases with the accompanying JSON information using the new compression system?
  24. Hi, I am making my first mobile HTML5 game using Phaser. Its a very simple tap game where you have to keep your character balanced. I have noticed something that is kind of strange to me. I have tested the game on: -iphone 5c, IOS 10.2.1, safari browser. -iphone 5s, IOS 10.2.1, safari browser. -Samsung Galaxy S4, android 4.4.2. I have tested the game using CANVAS mode and WEBGL mode for comparison. I observed the following: CANVAS mode: Iphone 5c < Iphone5s ---> 30fps vs 60fps avg. -----> expected this.... S4: 60fps. WEBGL mode: Iphone 5c > Iphone5s ---> 60fps vs 30fps avg. -----> did not expect this.... S4: 60fps (same). My expectation was that the 5s would play at 60fps in WEBGL mode, but it is the opposite case. On the samsung s4 it performs the same for both. In CANVAS mode, I have 15-17 draw calls . In WEBGL mode this reduces to 9 draw calls (Most of my objects are on a single atlas). I still have to add audio to the game. I can imagine that it is hard to tell what might be going on, but I can't really find a reasonable explanation for this result and its kind of dissapointing. It seems to me that I can't get a reliable result using WEBGL.... I'm thinking of sticking to CANVAS mode and optimize as much as I can. Would this be the right way to proceed? UPDATE: The Game:
  25. General optimisation help

    Hello! Does anyone have time to lend a hand with some optimisation please? I've been trying to get some dynamic ring shapes to look good and respond well, and performance seems OK on PC's (I've tested on 3 or 4 PC's with varying specs). On Macs (iMac, recent macbook pro and a mac mini) the CPU shoots up to 99% in Safari, so I'm obviously doing something wrong. Even with texture reflection and refraction turned off and lower detail it's still very jumpy and slow. I updated chrome on the mac, which seemed to help and gave much better performance - but it's still far from the performance of a PC. I have a feeling that Safari might just have a bad implementation of WebGL. The basic playground examples run really slowly too. I'm using a Lathe to create the ring, and I'm aware of the latheTesselation, which shouldn't be too high. The API says that the Lathe can be set to "updatable", and I've tried to use code to update it, but the 2 code examples that I tested just didn't work. I think this is because the update can only move existing points, and not replace them. Any time I want to update the ring parameters I just dispose of it and recreate it. Any tips are well appreciated - And sorry about the shoddy code!!