The javascript library I have created just translates a single picture and zooms it. Touch events and mouse events are used depending on what device.
I ran this javascript code on Firefox (7.0.1), iPhone 3GS (iOS 5.0) and iPhone 4 (iOS 5.0) all with smooth performance, no problem at all.
Then I ran it on iPad 1 (iOS 5.0) with slow performance though zooming and translating the picture works.
Last test was on iPad 2 (iOS 4.3.3) and here I experienced the same slow performance while zooming as iPad 1 but the translating didnt work at all.
I have no clue what this is about, since iPhone is supposed to be alot weaker than an iPad. I would appreciate any help or comments to get me on the right track.
http://pastebin.com/wZ7e77yq
UPDATE
I just ran it on an iPad 2 (iOS 5.0) and it works flawlessly. I also tried iPhone 3GS (iOS 4.2.1) and it didnt work, same as iOS 4.3.3. This means that my application needs iOS 5.0 to run... is it really true you couldnt translate objects before iOS 5.0?
UPDATE2
I just ran it on three different iPad 1s (iOS 5.0) and it doesnt work very good. What is the big difference in between an iPhone 4 and an iPad 1? Specs are almost identical. Also the translate didnt work because the function event.pageY/X doesnt work prior to iOS 5. This was fixed by using event.touches.pageX/Y instead.
Well I was developing a small game for testing canvas performance without any special game framework so I kept it simple because I was writing it by myself. The program did nothing special, just moving a sprite around the screen with different joystick types, such as keyboard and mouse for desktop click, and touch events for iOS. I discovered the following:
Using taps direct on the canvas results in poor performance compared to touch events.
Touch events worked well with different canvas sizes up to 1024x768.
I didn't try picture zooming, but that should have be fine as well.
event.pageX, event.pageY worked without problems on iPad (iOS5).
I hope that helps.
Seems like perhaps iOS CANVAS support was the issue. iOS5 has full GPU hardware-accelerated CANVAS support, while previous versions supported CANVAS albeit very poorly.
Surprised that it does not work well on iPad 1 even with iOS 5, though. Can you try closing all currently-running apps, close all other browser tabs, and run the test again?
Related
I researched a lot about this problem and I'm going crazy trying to understand why my example is causing a crash on Firefox, and runs VERY SLOWLY con Internet Explorer and mobile devices.
I'm rendering a big (4K) image on a sphere geometry, trying to create a kind of a pano viewer. In the real application, we can go from one place to the next one, clicking on the invisible shapes that are created inside the sphere.
In the real app, we have a big (4K) video rendering so we have some stuff in a certain area that moves in a loop. However, for this demo I commented those lines (addVideoTexture and renderVideo), so I understand this is not the issue here.
Pay attention to our raycaster, I suspect it is causing big performance problems, but I don't know any other way of detecting when our mouse is going over an "action hotspot" (look above) or a "indicator hotspot" (invisible areas that would allow to go to other places when clicking).
raycaster.setFromCamera(mouse, camera);
hits = raycaster.intersectObjects(indicatorHotspotPlane, false);
The problem is that this demo is causing a crash on Firefox, and going very very slow on plenty of devices and Internet Explorer.
Thanks a lot...
Ricardo
Here is an example where you can test it:
https://jsfiddle.net/ggL3uemh/13/
The ThreeJS version is r89
The browsers where it causes problems are Firefox and Internet Explorer, and I see some iOS devices going slow too.
My app uses HTML5 canvas and uses Cordova to build an .apk file.
I have tested my app on 5 devices running varying versions of Android OS and of varying hardware capabilities. The only one which lagged was a Samsung Galaxy Ace 2, running Android 2.3.6 Gingerbread. I believe it is an OS issue because phones tested with similar/worse hardware do not lag.
When the screen is touched and remains touched, the lag is greatly reduced. I noticed that pixels seem smoothed or anti-aliased when the screen is not touched but more pixelated when the screen is touched, I believe this to be causing the lag. I prefer less pretty with no lag than the opposite. My javascript does not cause this to happen, and so I am stuck on how to resolve it.
The following did not solve the problem:
context.imageSmoothingEnabled = false;
and using CSS image-rendering settings did not help.
The javascript has touchstart, touchend and touchmove event listeners so I attempted to hack my way by faking the touchmove event even if the user was not touching the screen, although I couldn't get this working and it's not a very elegant solution anyway.
I have had this problem for weeks and want my apps to work on all devices.
Does anyone have any suggestions?
Thanks, George.
I’m having a problem with the use of sprite sheets in mobile browsers (ipad/android), a strange behavior occurs, the stage is multiplied and scaled down multiple times when i click on a sprite animation, everything works fine until the click occurs.
Any hint?
The only browser that it doesn’t occurs is the safari from the ios 6 beta in ipad 2. In the native android browser the error happens but in android chrome everything works fine.
In desktop browsers everything works fine.
UPDATE: the problem is the afterFrame, the error is that the index is not valid. I don't understand... what does the afterFrame? i have 7 frames and it gives error if the after frame is superior to 2...
What version are you using? This sounds like a bug that has been fixed in v4.0.1.
https://github.com/ericdrowell/KineticJS/wiki/Change-Log
I am creating an application that allows users to draw on the screen using the HTML5 Canvas tag.
This works great when using a mouse, and I even got it working on android using jquery touch.
The problem comes when using a windows 7 or 8 tablet. The reason for why it wont work is simple, the browser tries to scroll instead of mousedown and drag.
The reason why it works on android and not windows is due to the fact that android supports ontouchstart and ontouchend while I can't get it to work on windows tablets.
So, is there any way to get the browser to stop trying to scroll and draw on the screen?
Thanks.
I am looking at developing web apps for mobile device specifically, the iPhone but this discussion is open to mobile devices in general. I was trying some HTML5 websites on both my desktop browser and iPhone browser.
An example is: www.creativepony.com
If I understand correctly, the grass animation was made using the canvas tag of HTML5 and then using javascript to create the animation. In my desktop browser, it looks fine and very smooth. However, when I visit the website in my iphone 4 browser (iOS 4.1), the grass animation lags.
I tested with 3G and wifi. They both lag but 3G is slightly worse.
My question is, if I were to develop animation rich HTML5 + JS web app, what would be causing the lag? Is it the iPhone CPU itself? or is it the mobile browser? or just a slower internet connection on the iPhone? or something else?
I am asking because it seems like the iPhone 4 CPU is powerful enough to run some very impressive games. How can it not be able to display a HTML5+JS animation? If it is slower internet connection, the offline caching ability of HTML5 should help especially since I want to make my web app offline-capable. Or, is it the safari browser on the iPhone? Or something else entirely.
Thanks again!
Mobile Safari simply isn't very good at running Javascript animation, due to the fact that it gets powered by the CPU. Even the simplest transforms and changes to opacity can be very sluggish.
However, CSS -webkit-transition and -webkit-animation rules can be used to good effect, as they are powered by the GPU: the results can appear as smooth as native iOS animations.
I'm not sure but I think javascript does not use GPU so a game on you iphone can run smooth because of the GPU but a javascript animation can't... anyway as I said I'm not sure but you can take a look at this http://ajaxian.com/archives/javascript-running-on-the-gpu
Regards