I am planning to develop a HTML5 with Three.js pages, so that i can achieve 3D screens using that and support for Mobile platforms easily in Cross platform method. I read Three.js uses WebGL, but iOS and Android browsers doesn't support it, so i cannot develop such combination apps.
Could someone please advise, whether i can develop HTML5 with Three.js pages to achieve 3D interactions on iOS and Android apps or not as web app? If not, please give me the official links where it is mentioned that it is not supported.
Thank you.
Three.js will work fine without WebGL. You can use the Canvas renderer -- it's described in the Three.js documentation, I'm sure you can find it on github using google or even Bing. It's not as fast as using WebGL, but one doesn't race Monte Carlo in a Nissan Sentra.
You should not expect high performance 3D on any mobile platform -- mostly becasue javascript performance can be numbingly slow. Try accessing some of the various Three.js examples using mobile devices (both with and without webgl) to get some idea of performance.
I tried to run Three.js Canvas demos on my iPad Air and it was awful. Usually Safari crashes and even if render works it performs 2-3 fps. So seems it's very raw on iOS devices right now
iOS Safari and Android Chrome have supported WebGL for several years now.
The issue you might be referring to is Android's WebView or iOS's UIWebView (the control you can put in a native app to display a webpage) may or may not support WebGL. WebGL is supported in WebViews as of Android 5.0 apparently although people have run into issues
Another option is to use something like CocoonJS. They apparently provide custom webview implementations for Android 4.0+ and iOS 8+.
As for performance, three.js will perform just fine on simple scenes with mobile. There are plenty of examples. 3D on mobile in general though requires optimized assets (lower polygon models, smaller textures, simpler shaders, less lights, etc...) relative to desktop and particularly with three.js
iOS and Android browser support webgl not as well as Web browser, sometimes you can reduce the render effects to make it work. This usually do. For app, android webview render ability is low. Ios have a better one.
And you can plugin some render engine into you app, such as XWalkView, Here is a post of mine how to use it to render the 3D models with three.js in my android4.2.0 App. For IOS there is also relevance solutions.
The chosen answer to this question recommends using the Three.js CanvasRenderer, but as shown here in the Three.js documentation, CanvasRenderer has been deprecated:
NOTE: The Canvas renderer has been deprecated and is no longer part of the Three.js core.
It is important to note that it can still be used for simple 3d scenes and can be found on Github here
WebGL is supported in Androids WebView v36 and above, as seen here.
Alternatively with older Android Chrome browsers WebGL can be enabled by typing: chrome://flags into the browser and selecting the Enable link that appears under the Enable WebGL header in the browser window, or by updating webview from the Android Google Play Store.
WebGL has been supported on Mobile Safari since iOS 8.0b.
At mobilehtml5.org you can see what mobile device versions support specific HTML5 features:
Sony Xperia Android 2.3 also supports WebGL.
Related
A-Frame's immersive-ar functionality will work on some Android devices I've tested with, but I haven't had success with iOS.
It is possible to use an A-Frame scene for markerless AR on iOS using a commercial external library. Example: this demo from Zapworks using their A-Frame SDK. https://zappar-xr.github.io/aframe-example-instant-tracking-3d-model/
The tracking seems to be no where near as good as A-Frame's hit test demo (https://github.com/stspanho/aframe-hit-test), but it does seem to work on virtually any device and browser I've tried, and it is good enough for the intended purpose.
I would be more than happy to fallback to lower quality AR mode in order to have AR at all in devices that don't support immersive-ar in browser. I have not been able to find an A-Frame compatible solution for using only free/open source components for doing this, only commercial products like Zapworks and 8th Wall.
Is there a free / open source plugin for A-Frame that allows a scene to be rendered with markerless AR across a very broad range of devices, similar to Zapworks?
I ended up rolling my own solution which wasn't complete, but good enough for the project. Strictly speaking, there's three problems to overcome with getting a markerless AR experience on mobile without relying on WebXR:
Webcam display
Orientation
Position
Webcam display is fairly trivial to implement in HTML5 without any libraries.
Orientation is already handled nicely by A-FRAME's "magic window" functionality, including on iOS.
Position was tricky and I wasn't able to solve it. I attempted to use the FULLTILT library's accelerometer functions, and even using the readings with gravity filtered out I wasn't able to get a high enough level of accuracy. (It happened that this particular project did not need it)
I want to export Navisworks 3D navigation models to my IPhone device , Is there any API available to achieve this. I want to create my Own App to read models into IOS - similar to Navisworks Freedom viewer for IOS.
I have lots searched on internet but couldn't find any useful.
There is no Navisworks viewer for iOS, but there is a WebGL viewer that can be embedded on mobile apps (or web or desktop too).
There is a live sample at https://360.autodesk.com/viewer
See the API at http://developer.autodesk.com
iOS sample at https://github.com/Developer-Autodesk/workflow-ios-view.and.data.api
I recommend developing your own native or web app to build a mobile 3d model viewer.
Web App - you could use Unity3d or Three.js. These communities are strong and there are plenty of resources available. The benefit here is that it would work on desktop too.
Native app - You could make a model viewer in Swift using Apple's Metal library. I am not familiar with Android 3d shader libraries.
Both of these endeavours are huge amounts of works. I hope you would keep any eye out for code you can copyright (or open source), perhaps even patent if you develop a new, complex algorithm for converting/displaying 3d data.
I am developing an AIR app targeting iPhone and Android devices and looking for a good framework that will help streamline development and performance, provide a good set of mobile optimised UI components and allow freedom to import and use Flash classes.
I've looked at Starling and Feathers which looks great for creating screens and UI components but there seems to be some limitations to this namely the inability to use the flash.display.MovieClip and flash.media.Video classes. The starling movieclip seems a little simplistic and I cannot add video to the stage.
What other frameworks are out there that would help me to structure my code and the app and also give me easy access to mobile ready UI components? I am developing on a macbook pro with Flash Pro CS6 targeting Air 3.2 for iOs
cheers
You can add MovieClips to the classic stage while Starling renders underneath, this method is not advised though because when mixing the two, there are performance concerns on mobile. This is due to the software vector rendering engine running to display the MovieClips.
What people are doing these days is using Dynamic Texture Atlas or MovieClip Converter to convert the MovieClips to Starling movieclips. Check this one out:
https://github.com/zenrobin/FlashMovieClipConverter
As for video, please check out StageVideo, as it is the hardware accelerated version of Video and is available in AIR.
http://www.overdigital.com/2012/01/09/the-ultimate-guide-to-understanding-advanced-video-delivery-with-air-for-mobile/
Having decided to go with D3.js and SVG for visualizations it now looks like SVG will work fine in a desktop browser or native shell but I'm really perplexed by the drop in performance speed on the iOS mobile platform.
According to the following tests it now looks like SVG performance is getting better and not that far behind Canvas speeds, this is the good news:
http://bl.ocks.org/2647924
http://bl.ocks.org/2647922
The bad news is that if you run these tests in the Safari browser on the new iPad the speeds drop a lot for both SVG and Canvas. The terrible news is that if you run these tests in the new Chrome browser for the iPad the speeds drop much more.
I've read that Google is forced to use the UIWebview that is not accelerated by Apple's Nitro JavaScript engine. I've also read that Apple is pushing HTML5 but the demos only run in their own Safari browser.
What is the problem here anyways? The best target for my app is mobile yet even with great API's like D3.js and HTML5 standards like SVG performance is being pinched, is this just because Apple wants to hold up progress for their own agenda? Thats how it looks to me anyways. I'm not sure what these tests look like on Android? It would be great to know. If the tests would be positive maybe I will get rid of the iPad and just go with Android already.
The bottom line is that I'm just not sure if it is feasible to make my app using HTML5 technology due to these speed issues? I also have no interest in learning Objective-C as the future is going to HTML5. I believe in the web and its standards but it looks like they are being blocked. I'm very interested in knowing solutions to this dilemma.
iOS7 has notably bad performance animating SVG with JavaScript - although static SVG drawing is massively faster. We wrote a blog on the performance of the iOS7 release, which you can see for more gory details.
Update: iOS7.1 fixed the javascript animation performance problem. It's back to 50 fps
I found d3.js/SVG on my first gen iPad massively slower than running the same app on desktop browsers (FF/Chrome/IE 9+).
I wrote up the various improvements I attempted here: http://hivemindmap.blogspot.co.uk/2013/01/html5-and-interactive-graphs.html
Performance will usually be lower on mobile devices than on desktop kit. In general their hardware is less powerful (it's geared more towards low power consumption than outright speed) and they have a hell of a lot less RAM and storage to play with. Chrome on my desktop has multiple processors, 8gb RAM and a ludicrously powerful GPU at it's disposal. On my iPad it doesn't have anywhere near that level of power.
3rd party iOS applications (including Chrome) cannot use Nitro, that much is correct. I believe this is because Nitro is able to mark memory as executable and (for security reasons) 3rd party applications are not trusted to do that. Most HTML5 stuff will work in any browser on iOS (with the possible exception of Opera Mini). Canvas and SVG animation will be slower than in Safari because it's all driven by Javascript - again the lack of access to Nitro holds them back. This is no longer true: As of iOS 8 third party apps can now use the WKWebView framework which does have access to the same high speed javascript engine as Safari.
Native code will usually be faster because it's much closer to the hardware, hitting the display APIs directly, rather than going through the web stack.
The solution is usually to simplify everything. In the same way that native game developers had to massively reduce the complexity of their 3D games to make them work on iOS devices, so web developers have to reduce the complexity of their SVGs and canvas apps. Less stuff flying around the page means higher performance, in general.
There's a number of tricks you can do, and a lot of reading around the subject. Have a read of http://www.html5rocks.com/en/tutorials/canvas/performance/, http://www.html5gamedevs.com/tag/performance/, and the rest of Google. Personally I'd build a proof of concept and test it before completely abandoning the idea :)
I've been working with software that generates textured 3D models of Roman archaeological artefacts (see map interface mockup here - click icons for models). The software (3DSom Pro) uses Flash or Java to show the models via a browser.
I need a non-flash/Java solution for web viewing iOS, but WebGL is only supported in Safari's nightly build (or - I understand - for adverts), which excludes the average user.
Has anyone successfully shown textured 3D models in a web browser on iOS? I know Pages (I think) supports native SketchUp files and iOS devices can display 3D, but in a browser...?
While three.js,( a great library for doing in-browser 3D with javascript) also supports canvas rendering instead of just webGL rendering, unfortunately mobilesafari is still fairly unstable in conjunction with three.js' canvasrenderer (what i gather from mrdoob's github discussions, this has been an issue since IOS5)
You could try to find a css3 DOM renderer, but it seems there isn't one available in conjunction with a framework that offers the ability to load textured models for you, which might be a lot of work to realise yourself.