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.
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 have a successful kids educational maths game made in Adobe Flash ActionScript 1, its a fairly simple game but there is animations for example a plane crashing into our logo and breaking it apart.
Could I use HTML5 and tools such as PhoneGap and get it to work like it does now in an iPad App and get Apple to accept it on there App Store? I'm drawn towards HTML5 because its non-propriety and has a promising future but will it be able to replicate the game. I've noticed the featured games on the PhoneGap website aren't very interactive/game like compared to Adobe AIR app examples.
Thanks
You could definitely recreate the game in HTML5 and use PhoneGap to package it for iOS. As long as you follow the app store guidelines, there's no reason why the game wouldn't be accepted by Apple.
The game logic seems straightforward enough and should, therefore, be relatively easy to translate to JavaScript. However, I think there may be significant effort involved in reproducing the animations you have, to an acceptable level of performance, using standards-based web technologies.
There are a few avenues I can think of which it might be worth your while exploring:
Google's swiffy will convert SWF files to HTML5 so you can use them on devices which don't support Flash. I have used it successfully to convert a reasonably complex Flash animation, however the performance of the animation on the device, when it was packaged as a native app for iOS using PhoneGap, was significantly worse than the Flash version. I'm not sure whether the tool would be capable of converting the whole game (definitely not if it's pulling in dynamic data), but you could certainly use it to translate the individual animations of the game.
Adobe Edge is an animation tool similar to Flash for creating animations in HTML. I've not used it so I don't know whether it's any good. However, it is still a relatively new product and a quick search for character animations using Adobe Edge wasn't particularly encouraging.
The CreateJS toolkit for Flash Professional is a free extension which will convert Flash animations to JavaScript using the open source CreateJS framework (which looks superb and may be a good starting point for rebuilding the game should you decide to convert it).
Convert the game logic from ActionScript 1 to ActionScript 3.0, reuse all your existing animations as is, and package the game for iOS using the Adobe AIR packager. Inevitably the performance won't be comparable to native, but I think it should be acceptable for this type of game.
I think in your case I would probably go for option 4, primarily because you'll save yourself the effort of recreating / converting existing animations in another technology. I would definitely encourage you to embrace HTML5 and associated technologies but would suggest you use them on a new project which will allow you to plan around its particular strengths and weaknesses.
I'm looking into a solution that will allow to use OpenStreetMap data to render a 2D top-view vector-based map in iOS, instead of using pre-rendered tiles from a server. Similar to Apple and Google Maps in iOS6+.
I've done extensive research on this matter, but didn't found too much information.
There are a number of iOS apps that do this, but no information on how they implement it. A couple of these apps are:
ForeverMap 2 by skobbler
Galileo Offline Maps
OffMaps 2
The first 2 apps work similar to Apple and Google Maps. The map is drawn in real time whenever the zoom changes.
The last one appears to be using a slightly different approach. It renders the vector data at specific zoom levels and creates tiles which are then used as normal tiles downloaded from a tile server. So the rendering engine could actually be a tile source for the Route-Me library, but instead of downloading the tiles it renders them on the fly.
The first method is preferred.
[Q] I guess one could switch between methods fairly easy, once the OpenGL ES renderer is in place. I mean you could use the renderer as a source for Route-Me to create tiles, or you could use it as a real-time drawer, similar to a game. Am I right?
The closest solution I found is OpenStreetPad. However, it is using Core Graphics instead of OpenGL ES, so the rendering is not hardware accelerated.
Mapbox stated they are working on vector tiles and they'll probably provide an iOS solution for rendering, however it may use Mapnik so I am not sure how efficient will that be. And there's no ETA on since mid 2013.
[Q] Do you know of any other libraries, papers, guides, examples, or some other useful information on how to approach this? Basically how to handle the OSM data and how to actually use OpenGL ES / GLKit to draw that data on the device. Maybe some of the people who have done it can share a few things?
Old question, but there's a new answer.
WhirlyGlobe-Maply will render tile based vector maps on iOS. http://mousebirdconsulting.blogspot.com/2014/03/vector-maps-introduction.html
The technology that powered skobbler's ForeverMap 2 and their current GPS Nav & Maps app is now available on a pay-per use basis. See their developer platform.
Note: they also have a free tier that can be used to develop/launch small apps.
They render the map using OpenGL and "vector data tiles". This vector data tiles contain information regarding road geometry (so you can have routing), POI data & other map features. (eg. boundary limits).
There is a list of OSM-based applications for iOS. It also includes a few open source projects, for example Navit. Navit seems to render the map using SDL/OpenGL. See the Navit iOS wiki page for more information.
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.