I've been working on a VR game within A-Frame. When I started testing on devices (iPhone 7/iPhone 7 Plus running Safari, and Samsung Galaxy S6 running Chrome), I began to notice the page would randomly refresh, which is an issue for us, as it restarts the game.
This is happening with the demos on their website, as well as our self-hosted game.
Has anyone experienced this issue, and/or know what the issue or the solution is?
I have been experiencing memory issues multiple times, when using iOS systems, rarely on androids.
My issues were related to memory leaks, or high memory usage causing my site to crash.It was happening mostly, when i tried loading a highRes photo on click, and apparently stuff in <a-assets> is cached partially, so Your site does not load for a day, but it uses up way to much resources when loading stuff from there dynamically. My solution, as i had little time to further investigate this issue, was loading all assets on the scene, either somewhere You can't see them, or making them invisible by setting visible to false. When switching visible-not visible, I didn't have so much memory issues, so phones could handle it, but it took longer to load.
a-frame had issues with performance on mobile before, and I found this guy had the same issues as me. It's working way better, then when those posts are from ( 2016 ), but i still have problems, solved by such workarounds. I hope this could solve Your problem.
Related
I've made a website that displays certain posts from Instagram, Facebook and Twitter. The website shows these posts in card form with certain animations and transitions. It works fine on the desktop but the goal is to run it on raspberry PIs and, when run from one of those, the animations and videos stutter. I want to reduce or eliminate the stutter and I'm considering several approaches:
web workers to offload some of the animation calculations to a separate CPU core
dynamic video compression on the server depending on what device will be playing the video
different animation methods
To figure out if any of these would help I'd want to first figure out what is actually causing the stutter but I don't know how to do this. I need a way to figure out what portion of the slowdown is due to what issue. Like, what's the impact of loading the images/videos, the impact of playing the video, of animating the elements etc. What is the best way of doing this?
Here is the working version of the site if that will help with the suggestions. Note that I'm not highly experienced with JS or programing in general and I was just starting out when I created this so it's far from optimal but now I need to figure out the best way to improve it.
This is probably a performance issue, but it could be something else. If you're using VNC Viewer or some other form of remote desktop, it could be because of that. If it's just wired to a monitor, though, it's most likely the fact that the CPU can't handle it. You could try to install a more lightweight browser, because Chromium can really take a toll on the CPU. Go to Chrome DevTools, and go to the performance tab. This should show you basically everything you need to know. I'm not sure if you're using CSS transitions or something else, so I can't really help you there. You could try NetSurf or Dillo as more lightweight browsers, though.
I've been working on an HTML5 game for close to a year now, and the newest version of Chrome (49) has completely wrecked its performance. The game that was easily running at 60FPS now struggles to get over 5-10 after updating Chrome. I've verified that it is the Chrome update using a stable version of the game and updating Chrome on my gaming PC, to see the same drop in performance.
I figured there would be something on the web or from Google about this by now, has anyone else seen this hit in performance? Is anyone aware of what has changed in Chrome that may have caused this issue?
I did notice performance issues when calling drawImage() (about 10k sprites). The issue seems to be fixed in chrome 53, so I think it was a performance regression.
I'm new to threeJS, so I decided to experiment with this example:
http://threejs.org/examples/#misc_fps
I exported some terrain that I made in blender and replaced the platform.json file. The scene was running at 55-60fps, I had no real issues with lag, but it'd gradually cause my fans to ramp up louder and louder. Eventually the page would just stop responding. Which is surprising because my computer specs are pretty good.
According to rendererstats.js my scene has 23k vertices and 7k faces. I thought maybe this was the issue, but it persisted despite cutting the count in half. I Googled around and experimented without much success. I then tried the original demo (linked above) and realized that my computer reacted the same way.
What is it about this demo that you think could be causing the problem and is there a fix? I really appreciate any help figuring this out.
Demo seems to be fine. I don't know where the problem is but I might say some facts.
Browser itself doesn't need graphic card to run, but once you open tab with webgl, it might request hardware to use it. This also might result in turning fans regardless of the WebGL app requirements. It is really hardware/firmware thingy.
I had similar problem before and it turns out my laptop was broken.
So first I suggest try to eliminate your problem, do GPU benchmark or test antoher app (games) if your device has similar problems or not.
If it doesn't then try to eliminate the problem with webgl. Try different browser with this demo. Also try more webgl apps and try to find out if there is problem with three.js apps only, or any webgl app or only this app.
If there is a problem with every app in any browser, problem will be very deep and I can't help much since I don't know your configuration.
If the problem is with this demo with any browser, but other apps are good, I guess problem might be somewhere between WebGL and your graphic card (some specific WebGL/GLSL function) so it is also very deep. It might be reported to webgl developers community where are also graphic cards vendors.
If the problem is only with one browser, it might be the browser setup or browser itself. You might try to reinstall it or report it to browser developers.
If the problem is in one browser and only this demo, it is the browser and Threejs related problem. And you can only do deeper demo benchmarking and try to report it to Threejs developers.
Sorry this might not be an answer, but it was too long for comment.
I'm having a issue which is hard to debug. I'm using a Javascript library (the JQuery Flexslider plugin) in a number of different places on my site. It's all working fine except for one particular phone where it doesn't work and slows down everything on the page.
So far, I've only seen it happen on this one device. Other devices of the same type do not have the issue. This person has an iOS that's a few versions out of date and not much memory, so I think it's a memory issue.
An old hack was to move the carousel element that has the issue on the page with Javascript, but I want to find and fix the root issue.
How can I start debugging this? I'm not sure how to test for a memory issue on a device.
If you're on a Mac, then you can plug in and use remote debugging via Safari, where you'll have access to the tools, including the profiler (not sure the state of Safari support in Windows). There are numerous resources for showing how to remotely debug a device, unless it is a really old version of iOS you should be fine, you’ll have to enable the develop menu via settings but after that its plain sailing if you know your debugging tools.
I'd agree that it doesnt really sound like a memory issue, although jQuery tends to be hungry in that respect, I dont know the plugin in question but the quality of plugins is hugely variable in jQuery-land. Old phones and old versions of jQuery certainly never played well together.
When you say one phone, you mean one type of phone + iOS version? The question isnt clear, its almost reads like you have 2 identical phones/os's where 1 works and 1 does not.
If you use Chrome you can use the Heap profiler
First open your developer tool and start recording.
Next start using your page and try to replicate your issue, stop recording and review the stats.
This is likely not a memory issue, but a cpu issue. The way jQuery does animation is processor constrained on older dvices. Factors that are easiest to handle include:
size of the page (html length and complexity)
animation steps, length, and complexity
You have a couple of options here, but the simple answer is you are asking too much of the older processor. Assuming you are using this plugin http://www.woothemes.com/flexslider/ you could try disabling or simplifying some of the transition effects. animation and animationSpeed would be the first I would suggest.
If you are interested in not changing the experience for most users you could consider tying into the start and end functions on the callback api and checking the time it took to perform the first transition, then reinitialize a simpler version of the slideshow for that device.
The hard thing here is there isn't really a right answer. If one of the above options doesn't fix it you're likely looking at choosing/building a different slideshow, degrading the experience for everyone, or determining the best way you feel comfortable with choosing who gets the degraded experience.
Can anyone explain why the provided canvas animation stutters? I've created a test stub which demonstrates the problem.
I see the stutter in FF, Chrome, IE on desktop and in FF and Chrome on Android.
Is the stutter due to garbage collection? It seems even raf generates a double on each call which eventually requires gc. If gc is the cause then html5 animation is pretty much doa. Sigh.
The same question was asked a year ago but because I'm a new member I'm not able to contact the author to find out his solution. HTML5 Canvas DrawImage Stutter / Choppiness . It is really too bad there is no way for a new user to get another user's attention, since the author of that other question may have the information I'm looking for, an simply hasn't posted it. I tried posting to his question in an effort to get his attention, but my post there was deleted as a rules violation(which is was). Guess I'm out of options. Chicken and egg problem with rep.
Ok, so after pulling my hair out for 1.5 days I think I have an answer. It appears browsers vsynch to a monitor, which I guess is the point of calling requestAnimationFrame. It appears the synch mechanism can get confused when running on a multi monitor system. I have three monitors. When I disconnect all but one monitor and restart the browser, the problem appears to go away. This kind of makes sense given that the problem manifests sporadically, ie I'm guessing when a given monitor gets out of synch with which ever monitor is providing vsynch to the browser.
Since I'm not certain about this I'm hoping others can confirm or shoot down my theory. I'll continue to (re)test with different monitor configurations, but it would be nice to get confirmation from another brain and set of eyes.
Edit 01: I'm not completely nuts. http://news.softpedia.com/news/Firefox-Nightly-Adds-Support-for-Vsync-for-Smooth-Animations-360245.shtml
Edit 02: Some chrome users/devs has discovered this or a related problem. Finally something might be done with this issue. See https://code.google.com/p/chromium/issues/detail?id=422000. BTW, IE11+ does not have this issue. Started using IE11 for baseline testing, since chrome is having QA issues lately.
Edit 03: Just ran across this q&a which is similar. Good info in the first answer. Chrome requestAnimationFrame issues