I'm having performance issues where frame rates are dropping majorly during animations in Safari only, but I'm having trouble identifying the issues and looked at the frames timeline. The problem is shakiness happening during animations. I don't know if this is a css or JS issue since it is smooth in Chrome.
I'm noticing that the Animation Frame (purple) and the Paint (green) are at 60fps or better. However, I notice a gray bar the extends past 60fps up to around 30fps. I'm unable to find any information about what this is or how I could reference it in my code. What is this gray bar indicative of? Thanks -image of my frames timeline
Related
Would like to experiment with fading the display towards black as the pixels get further from the seat spot of the HMD; My natural instinct is for my eyes to track anything that appears to be viewable in the field of view meaning I inevitably look away from the seat spot and spoil the illusion - was thinking if the image faded away then it would be more natural to keep within the sweat spot...
Does WMR provide any way to modify rendered frames before they are output to the displays?
It seems you are looking for post-processing camera effects. It occurs after the camera draws the scene but before the scene is rendered on the screen. If you are developing WMR App via Unity, please see this link for
how to set up the components required to create post-processing effects in your scene: Post-processing
Besides, complicated post-processing on HMD devices is not recommended, because it is computationally expensive, and you might have large FPS drop, more information please see Avoid full-screen effects
I am struggling with animating the Unity UI. It's just a simple slide up menu I have animated via the anchored position. The problem comes when the aspect ratio is changed, it will often end up completely offscreen instead of stopping in the intended position.
I'm making a 2d tile level editor (you click a tile on the loaded spritesheet and then can draw it to the main area). Although it performs fine on desktop the mobile performance is staggeringly slow, so I've been testing out various perf tweaks. Monitoring the results with framerate monitor from chrome dev tools (desktop), I noticed something I don't understand. When I click on the menu icon and the overlay menu pops out (visible on the left in the screenshot, uses css transform:translate for the animation) the frame rate skyrockets up to about the monitor refresh sync rate, even when drawing the canvas.
If I haven't touched the menu icon, the framrate is about 40fps on idle and ~15fps when drawing the canvas, but simply triggering the menu animation eliminates the framerate drop. It also seems to have a lasting effect, the idle framerate of 40fps no longer drops on repaints when the menu is closed, and when the menu is open the framerate stays up near 60fps.
So the question is twofold: why does triggering this css animation have such a HUGE effect on canvas drawing perf (15fps vs 60), and is there any way to force a consistent 60fps without having the menu open all the time?
PS* The visibility of the menu is irrelevant, leaving it on the page makes no difference but animating it in seems to affect the framerate greatly. The menu has the 'null transform hack' applied because it was triggering a repaint of the canvas it overlays, but removing only drops the fps a little at each stage of the process, the relative performance of the different states of the program are similar.
Chrome has this thing where upon using a css transformation it enables hardware acceleration.
It would be easy to verify it by moving the menu position with js instead of using css tranformation.
Regarding the second part of the question, if that's the case, a hidden or off-screen transformation should have the same effect.
Requirements: Honeycomb 3.1, Galaxy Tab 10.1
I'm working on a project that requires Parallax animation in the transition from one element to another, the elements are in a component similar to the Gallery and what I need is when the user swipes over the screen to navigate to the different groups, the elements on these groups are animated with a parallax approach.
I have tested with the basic animation approach animating the bitmaps but it's slow so currently I am testing with SurfaceView.
What do you think is the best approach to achieve this?
If you try JetBoy which comes with Android SDK, you can see the quality of a paralax bitmap scrolling on SurfaceView. I find that smooth scrolling of huge sprites and background looks of course smoother with openGL.
I am developing an application that should run equally smoothly on a web browser (IE support completely optional) and on iPhones and have tested various libraries for days, including: jQuery SVG, CAKE (Canvas Animation Kit Experiment), Burst Engine, Processing.js and Raphael, and have yet to find the right one for this experiment.
The input is optional - whether an SVG or a PNG rendered from the vector, the only two requirements for the animation library are to be able to animate (rotate) the image, and gradually apply a blur filter or a "trails"-like effect.
Should I go for SVG or Canvas, performance- and the forementioned effectswise?
Previously the project was in Flash, but regarding the trends and lack of iPhone support, I decided to switch to a more progressive software.
Here you can compare filter performance svg vs canvas yourself. Another example shows how to do an svg 3d lighting effect vs canvas 3d lighting effect
There are many nice demos over at chromeexperiments showing both canvas and svg. And there's svg-wow.org which does the same more or less.