trajektorijus Posted August 2, 2017 Share Posted August 2, 2017 Hey fellas, I have been playing with this prototype animation a year ago. And now I decided to develop the real thing. The only problem is that V4 introduced major FPS drops for some reason. Can someone explain me what's going on? V3: https://codepen.io/trajektorijus/pen/BzONov (smooth) V4: https://codepen.io/trajektorijus/pen/aymBeP (terrible frame drops) I am not sure how should I optimise this. I am fairly new in the field, so if someone could through an advice I would be very happy. Tried enabling cacheAsBitmap on the image sprite elements, but that did nothing (only messed up the mask positions and animations). Even when I turn off the rotations and all the animations the fps is just as bad. Cheers! Quote Link to comment Share on other sites More sharing options...
xerver Posted August 2, 2017 Share Posted August 2, 2017 The demos didn't load for me so I will start by asking: Have you profiled the code and seen what is causing it to be slow? Quote Link to comment Share on other sites More sharing options...
trajektorijus Posted August 3, 2017 Author Share Posted August 3, 2017 Hi, thanks for a quick response! They didn't load because I use crossorigin.me to make external images work, which is very slow sometimes... Sorry about that. I tried profiling. Most of the time is spent in the animate function. Which tells me very little what is actually wrong. Quote Link to comment Share on other sites More sharing options...
xerver Posted August 3, 2017 Share Posted August 3, 2017 I got the same perf on both the v3 and v4 versions of your demo. Consistently 60 fps, and majority of the time in profile was spent idle or logging the frame time. This held true for me in both Chrome and Firefox. I also forced it into canvas mode, and it still performed well in the v4 demo. Can you provide more details about what you are experiencing, your platform, and can you upload a CPU profile so i can examine it? Quote Link to comment Share on other sites More sharing options...
trajektorijus Posted August 3, 2017 Author Share Posted August 3, 2017 Well, I am working on an old laptop. It's Lenovo Y580, i7-3610QM, GTX660m, 16GB Ram, Windows 7 Ultimate 64bit. All I want is the FPS to stay at at least 30. If the screenshots aren't enough I can do a video recording of both demos. The difference is really noticeable. I am not nitpicking here. V3 is solid 60fps, and V4 drop to just a few FPS at times. On the actual app, I am building, the situation is even worse (attached). I hope the screenshots will be helpful, thanks! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 3, 2017 Share Posted August 3, 2017 idle is high enough to think that its GPU problem, something is wrong with fillrate. Try "legacy:true" in renderer options. Quote Link to comment Share on other sites More sharing options...
trajektorijus Posted August 3, 2017 Author Share Posted August 3, 2017 Thanks for the suggestion, Ivan. But that didn't do the trick... Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 3, 2017 Share Posted August 3, 2017 Does it depend on screen size? Also lets try "renderer.textureGC.mode = PIXI.GC_MODES.MANUAL" Quote Link to comment Share on other sites More sharing options...
trajektorijus Posted August 3, 2017 Author Share Posted August 3, 2017 I tried setting the manual mode with legacy flag and without it, but it produced no improvement... Yes, when I scale down the window a lot, I am able to get the 60fps. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 3, 2017 Share Posted August 3, 2017 Then its related to changes in filters. I dont know how to simply use non-pow2 temporary renderTexture with filter to simulate old behaviour. I can easily embed ColorMatrixFilter's shader https://github.com/pixijs/pixi.js/blob/dev/src/filters/colormatrix/colorMatrix.frag into https://github.com/pixijs/pixi-plugin-example, put your stuff into renderTexture and then draw with that shader, but, im too busy with other things. Also, demo doesnt work for me. Btw, what if you remove the filter? Quote Link to comment Share on other sites More sharing options...
trajektorijus Posted August 3, 2017 Author Share Posted August 3, 2017 You are right! If I remove the ColorMatrixFilter. Then I get 30FPS! Awesome! That's something. Tried applying different filters and all of them introduces major lag. I might survive without the filters, but if you can think of a solution to improve the performance, I am all ears! Thanks anyway, for finding the source of the lag! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 3, 2017 Share Posted August 3, 2017 I cant view your example properly , so I dont know the case. There are several ways, either to achieve same performance as v3, either make it better with optimizations. First one doesnt care about your case, for the second i need to understand what are you doing. Quote Link to comment Share on other sites More sharing options...
xerver Posted August 4, 2017 Share Posted August 4, 2017 For future reference, screenshots of profiles are not super helpful Instead save the file and upload it as an attachment. That will allow me to open it in my tools and explore. If adding filters is causing you lag, it is likely an issues with your GPU specifically. Could be texture swapping due to memory constraints, driver issues, or any number of things. Best thing to do from here is to build a small example, as little as is necessary that reproduces your issue. Then use something like WebGL inspector to see what WebGL is doing and debug the GPU process. Ideally you can share that small example and we can help you there. Quote Link to comment Share on other sites More sharing options...
trajektorijus Posted August 4, 2017 Author Share Posted August 4, 2017 Sorry, yes, that was stupid of me... Here are those profiles. I actually tried uploading them, but for some reason was unable to do so. I have decided that I will manage without the filters. I didn't really need them anyway. Anyway, thanks for your help, guys. Edit: just tested on my 5k iMac and here the story is different. V3 is waay slower than V4... v3.cpuprofile v4.cpuprofile xerver and ivan.popelyshev 2 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.