Can A VS2015 Cordova App run WebGL in the VS Android Emulator?

Question

I have looked around and I can't find the answer to the following. I want to run some 3D content in a cross platform app. I'm using VS2015 / Tools for Apache Cordova / Three.js / WebGL. When I debug my VS2015 project on the desktop (AnyCPU) and on either an iOS remote device or iOS mac simulator, my App creates a canvas, gets a WebGL context and I'm off to the races. When I use VS2015 to debug my App in the VS Android Emulator, canvas.getContext fails and Three.js throws "Error creating WebGL context".

I have downloaded (to VS2015) a VS Android Emulator using Lollipop (5.0) and launched it in free standing mode (not from my Cordova project). When I follow these MSDN Android Emulator Set Up Instructions (substitute a current version of Chrome for the default VS Emulator browser engine) the VS Emulator will correctly host and display 3D WebGL content available on the internet. But when I try to get the VS Emulator to host my Cordova project it can't make a WebGL context and lames out on me.

So my question is this: Is there a way to configure my VS2015 Cordova project to launch and debug in the VS Android Emulator and have the Emulator host my WebGL 3D content? Or is there some other trick to configuring the VS Android Emulator so that it will accept and host my WebGL project using a WebGL-enabled engine? Stumped.

Out of curiosity: what is your PC's hardware setup (CPU/GPU)? — Morrison Chang
Related post: stackoverflow.com/questions/35318029/… with link to answer thread from WebView team — Morrison Chang
@MorrisonChang Thank you for those links. But I'm not seeing those resources addressing a Visual Studio Cordova WebGL App being launched in and hosted by the VS Android Emulator. As above, I've figured out how to tweak the VS Android Emulator (running on my hardware) so that it will host WebGL content from the internet (a sample from babylonjs.com). I just can't get my VS Cordova WebGL App to play nice with the VS Android Emulator (and vice versa). Maybe I'm missing your point. Thank you again for taking the trouble to offer help. — pprchsvr
I think my point is that it may not be possible as I expect the MS team just took the existing AOSP webview emulator code and applied their changes but the underlying issues as referenced by the WebView team may still be in place. You may want to look at Crosswalk if a using a device is a non-starter crosswalk-project.org/documentation/about/… and software.intel.com/en-us/android/blogs/2014/01/02/… — Morrison Chang

pprchsvr pprchsvr · Accepted Answer · 2016-02-26T00:43:14

I have successfully gotten my VS2015 Cordova App to run correctly in the VS Emulator for Android but the path was not straight. Morrison Chang gets a very big thank you for pointing me to the Crosswalk Project, which is specifically designed to address the deficiencies in the stock Android WebView engine, most importantly, for my App, the stock engine's sketchy implementation of WebGL. The first part of the solution was to install the cordova crosswalk plugin in my Cordova App. Initially, VS2015 threw a poorly described versioning deployment error. The solution to this was simply to increment my App version number from "1.0.0" to "1.0.1" like so in the config.xml file:

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.XXXXXXXXXXXX" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">

Once the project deployed, my App had a lot of trouble getting a working WebGL context from Crosswalk. I solved that problem as follows. My App presently uses THREE r71, which creates a WebGL context with the following code snippet in the THREE.WebGLRenderer constructor:

        var attributes = {
        alpha: _alpha,
        depth: _depth,
        stencil: _stencil,
        antialias: _antialias,
        premultipliedAlpha: _premultipliedAlpha,
        preserveDrawingBuffer: _preserveDrawingBuffer
    };

    _gl = _context || _canvas.getContext( 'webgl', attributes ) || _canvas.getContext( 'experimental-webgl', attributes );

Crosswalk does not like THREE's call to .getContext() with THREE's default "attributes" values. Unless I set the "depth" attribute to "false", Crosswalk would not even return a WebGL context at all. But by setting depth:false, the VS Emulator would display overlapping meshes in a way that made no visual sense in my App, because, wait for it, there was no depth buffer. So I could at least get a WebGL context with depth:false - but it sucked. What finally worked for me was to call .getContext with no attributes at all, like so:

    _gl = _context || _canvas.getContext( 'webgl' ) || _canvas.getContext( 'experimental-webgl' );

That does the trick for me. I'll have to override the THREE.WebGLRenderer constructor and case out the Android platform scenario, but at least I have a working WebGL context and a working App now. I hope the above spares someone else the pain I just went through. Now to get the debugger to connect up to the emulator....

Can A VS2015 Cordova App run WebGL in the VS Android Emulator?

1 Answers