Deploy WebGL applications as native iOS or Android applications?

Question

Does anyone know of a way in which you can deploy a WebGL app as a native iOS or Android app? Commercial middleware is acceptable, although an open project would be preferable.

Answer 1

As the iOS version of WebKit doesn't support WebGL natively, I think you have two options:

• Implement the WebGL API in the JavaScript context of a WebView yourself by forwarding calls to the native OpenGL via iframe RPC or so. There isn't a clean way of calling (Objective-)C functions from JavaScript on iOS, unfortunately. Performance could be a problem.

• AOT-Compile or interpret the JavaScript in a third-party runtime, then implement WebGL from there. JIT compilers are disallowed on iOS, so something like V8 won't work. Appcelerator Titanium statically compiles JavaScript as far as I know, and also has an interpreter. You could use that, but you'd still need to implement the WebGL glue yourself.

I'm not aware of any existing WebGL bridges for iOS, so I think you will need to either write it yourself or get someone to do it for you. One problem that might not be possible to overcome is if you use anything other than WebGL to display stuff - e.g. HTML, 2D <canvas>, etc. Combining WebView display with an OpenGL framebuffer is going to be rather tricky.

I don't know much about Android, but considering the rules are more relaxed there, it might be possible to embed a WebGL-compatible browser there.

Answer 2

WebKit on iOS actually supports WebGL, as of 4.x (not sure which .x version). It is enabled in the webview used by the iAd framework, all other uses of WebKit (Safari and UIWebView) have WebGL disabled.

It is possible to enable WebGL using private API's (this will not pass the submission process). In your webview subclass:

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

(via)

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

Not sure about WebGL support on Android. Fairly recent comments on the issue in the Android tracker suggest it is not available yet.

A nice support table for WebGL in (mobile) browsers: When can I use WebGL

Best way to go for now seems to be to include your own WebGL enabled version of WebKit in your application wrapper for both iOS and Android.

Answer 3

Bundling WebKit and your app's resources (.js, textures, etc) into an iOS or Android application doesn't sounds too much difficult. I'm assuming that since Google and Apple are major contributors to the WebKit project, all the required support (for multitouch and other stuff) is already there.

PS: many iOS apps use interpreted Javascript or Lua. The rules are there to prevent your app to execute 3rd party code (esp from the internet), not the code you'd bundle in your own app.

EDIT: To clarify, I think you'd need to implement your own web view using webkit (built from source) in order to use WebGL and pass Apple's screening process, as activating WebGL in the Apple-provided web view will get your app rejected.

Answer 4

As an extension to Joris' answer (which appears to be based on the work of Nathan de Vries), the following is the code I needed to enable WebGL within the iOS 5.0 SDK:

Somewhere near the top of your view controller implementation:

@interface UIWebView()
- (void)_setWebGLEnabled:(BOOL)newValue;
@end

Programmatically creating a UIWebView and enabling WebGL:

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

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

I created a sample application that demonstrates WebGL running in a iPhone / iPad fullscreen UIWebView, using the WebGL scratchpad site http://glsl.heroku.com as a destination. Be wary that some of those examples there will grind even an iPad 2 to a halt, potentially leading to a hard reboot. The performance there seems to indicate why WebGL is still in an officially unsupported state in mobile WebKit.

Of course, as has been stated, this is not guaranteed to work on future iOS versions and will get your application rejected from the App Store. This is only really useful for hobby work and internal testing.

An example of WebGL running on my iPad 2:

Answer 5

Try Phonegap. It allows you to build "native" HTML+CSS+JS apps using the standard Webkit installation on your OS. And it provides a javascript-to-native bridge to allow you to do things not possible in pure webapps.

Answer 6

There are a couple of options to be able to deploy a native WebGL app. EjectaGL is a great WebGL implementation but a little bit harder to master (http://codehum.com/stuff/ejectagl/).

Another option is Ludei that recently announced their support for WebGL on both iOS and Android. It is easier to use and supports acceleration for HTML5 canvas in both 2D and 3D through WebGL. It also provides a way to monetize your app using IAPs, ads and plenty of extensions. It is much easier to test using the CocoonJS Launcher App and their cloud compiler.

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