Background
I am building a proof of concept for a webvr project. After attending the react amsterdam conference last month and seeing react vr in action I thought this would be a good place to start.
I have setup a demo page here. It's just an image added to the hello world example.
Inside the Chrome browser (desktop & mobile) it looks fine, not choppy. The I visit the page with my gear vr. When in the samsung browser window the app runs fine but once I press the view in vr button (bottom left) the frame rate drops quite a lot. Enough to give you a headache after a few minutes. I have the same choppy experience with the react-vr examples here
Specs
I am using
Gear vr
Samsung Internet
Samsung galaxy S6
Android 6
The mobile device is a little old now (over a year) maybe that is causing the issue but it works very smooth before entering vr mode.
Question
Is there a way to force more processing power out of a device (Something like adding will-change: transform; or transform: translateZ(0);)?
or
Is this purely a limitation of the hardware?
or
Is react-vr adding too much overhead, is there a way to optimise? I do have a very smooth experience with the three.js cubes example
Related
I have this tetris game I programmed with the intention of learning a bit more on javascript: elcodedocle.github.io/tetrominos
I can play it in most tablet/smartphone browsers, but on my Android 2.3.6 stock browser (Samsung Galaxy Ace ST5830) it has two problems:
Zoom events are not exactly canceled by user-scalable=no viewport property: double click and two-finger zooming still work. Sometimes.
The canvas freezes, also sometimes (I'm going mad trying to determine the cause: How the heck you debug a web app running on an android browser??). I'm guessing because of a swipe or drag event triggered that shouldn't be, so it's somehow related to the above. Tapping out of the canvas makes it work again.
I'm using Kineticjs to manipulate the canvas and bind the touch events, on top of jquery-ui for the dialogs and jQuery (not jQuery mobile).
Any suggestions/ideas?
the problem is with the device's processing speed.. evrery device has its own processing speed. canvas animations are based on javascript's setInterval and setTimeout methods..which performs as per the device's processing speed..thats why canvas games are sometimes laggy on handhelds.
I am currently developing a web application focusing primarily on Chrome 24.01312.57 and IE10. In the former browser, I am experiencing a large amount of lag. However, the latter experiences little to no lag, which is quite opposite to what everyone claims.
To show you the difference, I am recording the screens of my netbook using an iPhone while scrolling down The Chrome Webstore - something Google itself created.
Testing Equipment
2 year old Gateway Netbook -Single Core Intel Atom - 1GB RAM - Win7
iPhone camera (not that great recording solution, but it is quite easy to spot the difference)
Website: https://chrome.google.com/webstore/category/home (I scrolled down quite a bit for both the browsers before starting the test for those worried of AJAX loaded content slowing down the rendering)
Results
Google Chrome 24 (No extensions) scrolling down the Webstore:
http://www.youtube.com/watch?v=njkRqiNJPIY
Internet Explorer (No addons) 10 on the same page:http://www.youtube.com/watch?v=B_E_9OzPers
Note: Look at the mouse cursor and the scroll thumb - on IE10, the mouse is always on the the thumb whereas Chrome, it is all over the place indicating a high latency between mouse movement and the actual rendering.
Bottom Line:
Before I conclude, do realize that these lags on Google Chrome are increasingly magnified as the website becomes more complex and/or the specs go lower. However, IE10 is pushing the FPS quite high even in these conditions. I also did some analysis of the Chrome timeline. In reveals that the FPS drops as you zoom out to the point where rendering takes up to ~900ms per frame (on the Google Webstore) while IE10 is still fluid smooth (and better yet it retains that smoothness on an atom netbook)
As web developers, is there some CSS property/ies that is causing Chrome to render the pages with lag?
Why is Internet Explorer rendering so quickly?
What can be some steps to make Chrome render as quickly as IE10?
PS: Bug Report: http://code.google.com/p/chromium/issues/detail?id=163092 but no recent developments on this currently.
Chrome struggles with painting, especially at high resolutions such as 2560x1440 and above. Many websites such as the Chrome Web Store, Facebook, etc. exhibit significant scroll lag on it. IE10 maintains 120 fps on my monitor while scrolling on these sites.
I just had and fixed a similar issue.
Apparently Chrome isn't too smart about their recalculation of styles, besides that being terribly slow, so I focused on preventing it from recalculating anything.
I added the 'scrolled' class whenever the scroll event was triggered, but if it was already there, Chrome kept recalculating the new styles anyway. When I modified it to be like:
if (!body.hasClass('scrolled')) { body.addClass('scrolled'); }
Chrome suddenly experienced a significant speedup (still no IE or FF, but much better than before)
It's the video card on the Netbook! You will experience similar effect on almost everithing that moves on your screen.
I have a Netbook...
The web you are testing crashed Chrome browser until not long ago...
I am developing a Game using JavaScript and HTML5 .While using the concept of canvas ,I am rendering the images on screen and then moving the coordinates to make the image look moving. When the laptop is charging the images move very fast but as soon as it is unplugged ,the speed of image falls.
On the Windows laptops you've got power options which are designed by default to reduce a processor and video performance if a laptop unplugged from a charger. Also if your browser for game's debugging is IE the windows also will reduce javascript performance for IE. The first Google link for illustrating my words: http://www.sevenforums.com/tutorials/778-power-plan-settings-change.html (you've got the same options for Windows 8).
We are making some JavaScript games. They run perfectly on iPhone and iPad and desktop as well. The biggest problem are Android devices. All tablets we have with Honeycomb OS 3.x (Samsung Tab 10.1, Motorola Xoom, Acer Iconia, etc.) are extremely slow when JavaScript is executed and content is rendered. It is better on 2.x phones, but still far behind Apple devices…
We tried to use the traditional approach with div element as well as HTML5 canvas, but even simple bouncing ball example is extremely slow (If you want to test it, access http://sie.mautilus.com/canvas).
If we disable in the debug menu on Android the Enable OpenGL Rendering it is slightly better, but still not usable for wide audience, not speaking about the fact, that normal user will not do this…
This makes the JavaScript based user interface, which is event bit complicated totally unusable on Android…
How it is that the simple bouncing ball, which was running in MS-DOS on my Intel 386 machine is unusable on high-end tablets with dual-core 1 GHz Cortex-A9 CPUs?
See also there:
http://code.google.com/p/android/issues/detail?id=17353
http://groups.google.com/group/phonegap/browse_thread/thread/fc13b40165db8a00?pli=1a
Regards,
STeN
You are correct that it's very slow on android devices, i ran into the same problem and searching the internet I only find people that agree with us.
I did a few things to speed things up (although it comes with lower quality). I also only checked on HTC Sensation and Samsung galaxy tab 10.1. I do think that you will need to use different settings for different phones.
set the screensize so my phone doesnt create a bigger canvas and then scale it down again.
scale up the scene by factor 2. This will cut the used pixels in halve, so you have actually a smaller canvas stretched over the full screen
dont use clearRect to clear the entire canvas and then redraw everything. Actually removing the clearRect at your bouncing ball example will show a lot of improvement. Clearing the areas that actually change (bats and ball) and then redraw it will be enough.
On a side not I noticed that android 2 and 4 perform faster then 3, but that is based on testing with just 3 devices, so not hard stats.
I also read that using translate3d on a canvas will trigger hardware rendering if available, but I havent checked/confirmed this.
Some code that might help you:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>
$(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)');
$(gameEl).css('-webkit-transform-origin', '0 0');
I have a problem developing a web application for iPhone. When I visit a simple example like http://code.google.com/intl/sv-SE/apis/maps/documentation/javascript/examples/map-simple.html in an iPhone and do pinch zoom the map pans when I release the fingers from the screen. This makes the map end up somewhere else than the place I zoomed to.
Is there some way to prevent the map from panning after pinch zoom release?
Unfortunately, the iPhone's use of touch screen technology - especially Cocoa - can have some odd effects when it comes to viewing a web app on a mobile device.
I cannot fathom why, but it seems like such multi-touch gestures, such as pinching, have a relatively odd effect on non-native applications.
The only thing I can suggest is using Objective-C and getting to work on porting your application to run as an app on the iDevice. This will remove the problems you are having, but it will not rid you of the issue that you are trying to develop a web app.