Deploy WebGL applications as native iOS or Android applications? –

Development issue/problem:

Does anyone know how to implement a WebGL application as a native application for iOS or Android? Commercial middleware is acceptable, although an open source project is preferable. Thank you so much!

How can I solve this problem?

Solution 1:

After the answer from Joris (which seems to be based on the work of Nathan de Vries), here is the code I needed to enable WebGL in the iOS 5.0 SDK:

Somewhere above the version of the view controller:

@interface UIWebView()
– (invalid)_setWebGLEnabled:(BOOL)newValue;
@end

Make UIWebView programmable and activate WebGL :

UIWebView *webDetailView = [[UIWebView mapping] initWithFrame:mainScreenFrame] ;

id webDocumentView = [webDetailView performSelector:@selector(_browserView)] ;
id backingWebView = [webDocumentView performSelector:@selector(webView)] ;
[backingWebView _setWebGLEnabled:YES] ;

I created a sample application that demonstrates running WebGL in full screen mode from UIWebView for iPhone / iPad, using the WebGL Scratchpad http://glsl.heroku.com as a target. Be aware that some of these examples may even cause the iPad 2 to lock, resulting in a difficult restart. The performance of this site seems to show why WebGL is not yet officially supported in the Mobile WebKit.

Of course, as said, there is no guarantee that this will work on future versions of iOS, and your application will be rejected from the App Store. It is only very useful for recreation and internal testing.

An example of WebGL running on my iPad 2:

Solution 2:

WebKit on iOS actually supports WebGL from version 4.x (I don’t know which version .x). It is enabled in the web view used by the iAd frame, it is disabled in all other cases of using the WebKit (Safari and UIWebView) WebGL.

You can activate WebGL via the private API (this does not go through the login process). In the subclass Webview :

– (void)setWebGLEnabled:(BOOL)enableWebGL {
UIWebDocumentView* webDocumentView = [self _browserView];
WebView* backingWebView = [webDocumentView webView];
[backingWebView _setWebGLEnabled:enableWebGL];
}.

(via)

This allows you to at least start experimenting with WebGL on iOS.

Not sure about WebGL support on Android. Relatively recent comments on this topic in the Android tracker suggest that it is not yet available.

Good table with WebGL support in (mobile) browsers : If I can use WebGL

The best thing you can do now seems to be to incorporate your own WebKit compatible version of WebGL into the skin of your iOS and Android applications.

Solution 3:

Since the iOS version of WebKit doesn’t support WebGL by nature, I think you have two choices:

• Implement the WebGL API in the WebView JavaScript context itself, redirecting calls to native OpenGL via an iframe RPC or other. Unfortunately there is no clean way to invoke (Objective) C functions from JavaScript on iOS. Performance can be a problem.
• AOT compiles or interprets third-party JavaScript at runtime and implements WebGL from there. JIT compilers are not allowed on iOS, so something like V8 will not work. Appcelerator Titanium compiles JavaScript statically, as far as I know, and also has an interpreter. You could use it, but you would still have to implement the WebGL glue yourself.

I don’t know of any existing WebGL bridge for iOS, so I think you should write one yourself or have someone else do it. A problem you may not be able to solve if you are using something other than WebGL for display – such as HTML, 2D, etc. – but you can’t use WebGL to display your files. Combining a WebView display with an OpenGL frame buffer is quite a challenge.

I don’t know much about Android, but because the rules are less strict there, you might want to put a WebGL-compatible browser on it.

Solution 4:

I don’t think there are any simple conversion tools. To create native applications, you probably need to take your WebGL code base and rewrite it in OpenGL for both platforms.

Solution No 5:

It’s not finished yet, but ForPlay could serve as a common development platform for Android and WebGL on GWT.

Solution No 6:

Installing WebKit and your application resources (.js, textures, etc.) in an iOS or Android application doesn’t seem too complicated. Since Google and Apple are major contributors to the WebKit project, I think the necessary support (for multitouch and others) is already in place.

PS: many iOS applications use interpreted javascript or Lua. There are rules to prevent your application from executing code from third parties (especially from the Internet) instead of the code you would put in your own application.

EDIT: I think in order to use WebGL and go through Apple’s validation process, you need to set up your own web view using Webkit (built from source code), because activating WebGL in the web view provided by Apple will result in rejecting your application.

Solution No 7:

There are several possibilities to implement a native WebGL application. EjectaGL is an excellent implementation of WebGL, but it is somewhat more difficult to master (http://codehum.com/stuff/ejectagl/).

Another option is Ludei, who recently announced support for WebGL for iOS and Android. It is easy to use and supports HTML5 Canvas acceleration in 2D and 3D with WebGL. It also allows you to monetize your application through IEPs, advertisements and various extensions. It is much easier to test with the CocoonJS Launcher application and its cloud compiler.

www.ludei.com
http://blog.ludei.com/webgl-demos-arrive-to-google-play-store/

Solution No 8:

Try Phonegap. Allows you to create native HTML+CSS+JS applications using the Webkit’s default installation on your operating system. And it provides a bridge between JavaScript and its counterparts, so you can do things that are not possible in pure web applications.

Good luck!

Related Tags:

unity webgl download,unity webgl mobile,unity webgl build,unity webgl not loading,unity webgl 2020,unity share webgl game,unity mobile web game,unity webgl mobile 2018,unity webgl mobile performance,unity webgl call of duty,unity webgl is not supported on mobile,unity webgl gyroscope,unity webgl ios,unity webgl disable mobile warning,unity webgl 2,webgl safari,cross platform mobile app,best platform for android development,pwabuilder,apache cordova,xamarin,react native,phaser 3 android,deploy phaser game to android,phaser to cordova,phaser 3 android game,phaser native app,ionic 3 game development,webgl 3d,webgl support