Taking our #WebGL #HTML5 App Native

When the Web Fails..

Sometimes Web Apps (or for the marketing person.... software in the cloud) just doesn't meet the requirements for the job.  We have been looking for an open source solution that combined the Chromium browser into native binaries for OSX and Windows where we can package and distribute our WebApps as native desktop applications.  This allows us to ship the same software to all of our clients and provide both offline and online versions of the software.

Our first try was AppJS...
We were very hopeful that this platform would allow us to basically drop our web app into the native application and ship to any of our customers who wanted an offline version of our software.  The issue came when trying to deal with large complex systems.  We have been working on an Online Operating Systems called JaHOVA OS, unfortunately getting AppJS to load up JaHOVA OS became quite cumbersome.

Several of our applications are graphics intensive and utilize WebGL for rendering.  The application we were trying to port at the time was a 3D cancer visualization tool called CaPTIVE.  After tweaking CaPTIVE for about an hour to try and get any response from AppJS we began looking to see if others had a similar experience.  We saw that Thibaut Despoulain from Artillery Games had made a few post on the forums, and with his successful launch of HexGL (an HTML5/WebGL futuristic themed racing game), we thought it might we worth asking if he was successful.

@coreyclarkphd I had a proof-of-concept running but the canvas and RAF perfs where so bad we decided not to use it. Just using hw ex as base
— Thibaut Despoulain (@BKcore) February 13, 2013

From his response  we figured it was time to move on and try to find another solution

Enter Node-WebKit FTW!

"node-webkit is an app runtime based on Chromium and node.js. You can write native apps in HTML and Javascript with node-webkit. It also lets you to call Node.js modules directly from DOM and enables a new way of writing native applications with all Web technologies.  It's created and developed in Intel Open Source Technology Center"

Zhao Cheng has a slide deck that goes through some of the basics of node-webkit, but the wiki on the github site is very useful.

To test out node-webkit we decide to port over our alpha build of Omega Resistance (OR), an HTML5/WebGL Couch Co-Op Space Arcade Shooter with Gamepads. There were a few hitches along the way, but easily overcome.






         Quirks..

XHR
In OR all of the shaders and models are downloaded via AJAX calls.  Since the files are being fetched from local file store rather than a server, the response status codes are different than that of a standard server.  We test for response status code equal too 200 but with node-webkit the response status code is 0.

Shared WebWorkers
Although Shared WebWorkers seem to be available, however in our porting process the threaded loading system did not function properly.  The reason we added this system was to prevent the page from going non-responsive during asset loading.  Since all of the assets are now loaded from a local file store, the need for this system was no longer required.  So we decided to ditch it to see if we could get something running.

This problem does cause concern though, as we are currently working on building GEn3CIS: An HTML5 Based 3D Engine for Gaming and Simulations.  GEn3CIS is highly dependent upon the ability to multithread our subsystems, so for GTL to fully adopt node-webkit, this will be an issue we will have to solve.

Once we worked through these few quirks, we successfully got Omega Resistance up and running in both OSX and Windows based native executables with the same frame-rates as running in a browser.

Final Thoughts

File Size
One thing to be aware of with node-webkit is the final file size of the executable will be around 50-60Mb.  Since the executable has a complete instance of WebKit + NodeJS + WebApp the overall file size may end up being larger than you expect.  This was not an issue for us, but it is something to be aware of if small file size is important

Enigma Virtual Box
Virtual Box allows you to package the node-webkit executable with all other needed DLLs and dependent files into a single binary for Windows.  This is defiantly the approach we wanted to take with our project, but on a clean install in Windows XP the Virtual Box version of the app could not initialize WebGL, but running the application outside of the Virtual Box had no issues.  We tested the app on our Windows 7 VM and no issues.  Since the app was able to run on XP, there probably is a way around the issue of the app not initializing WebGL canvas when run inside of Virtual Box.

Chrome Developer Tools
Node-webkit allows access to the developer tools console, which is a great help when trying to debug your code.  node-webkit also allows the developer to limit the access scope of the developer tools.  You can pull up the console inside of the demos below by doing the following

• Press CTRL and  ~ to open console
• Enter "tools" at the prompt

Lets See the Demo...

Check them out yourself, tell us on Twitter how they worked...@GameTheoryLabs or @CoreyClarkPhD

OSX: Download
Windows (Enigma Virtual Box): Download
Windows: Download
Web: Play It On The Web (Chrome)

Presentation From Dallas HTML5 Meetup