iOS: HTML5 with Three.js development

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.