How to make friends HTML5 with mobile OS

“ You're completely crazy about this webgl! ”, A familiar developer told me:“ Learn a new engine for one platform ?! "

But indeed, working with Unity, I get access to many platforms. Working with Blend4Web - only to one. Large companies can afford to use several technologies for porting high-quality games, in the case of indie - this is a big problem.

And what, developing a browser-based project not with Unity, I put an end to other platforms? Honestly, this conversation has greatly shaken my resolve. But recently I heard about frameworks with which you can miraculously port HTML5 to many mobile platforms.
')
Not everything was so simple. Although it was possible to find a couple of promising tools that showed decent results.

Preamble

Starting any business, you need to identify goals, choose a toolkit, estimate approximately the time and effort.

The main task is to find a framework for easy deployment of WebGL applications on popular mobile platforms. It is desirable that the toolkit be free or at least moderate in monetary requests.

As it turned out, a large number of frameworks for the task set can be found on the Internet: Appcelerator Titanium, NimbleKit, MotherApp, PhoneGap, CocoonJS, Intel XDK. Of course, this is an incomplete list, but it was with these tools that I tried to figure it out. As a result, for various reasons, a large part was eliminated. Somewhere there was “muddy” documentation and a license, one of the frameworks was inadmissibly long installed and pulled out of a bunch of libraries from the network, the third one is designed only for one operating system.

For testing, I chose a ready - made application from the Blend4Web SDK, which is called “Simple Application”. I compiled it as a single HTML file with all dependencies. Test builds were equipped with an FPS indicator in the corner of the screen.

Candidates were evaluated on several criteria: ease of integration, support for platforms, final performance. As a result, PhoneGap and CocoonJS became the undoubted leaders for me. And each of them turned out to be good for building for certain platforms, but about everything in order.

PnoneGap + Blend4Web

The first thing I was advised to see is the brainchild of Adobe Systems.

“PhoneGap is a free open-source framework for creating mobile applications.” This is the introduction on the wiki page dedicated to this technology.

When I hear the word “free”, especially with reference to a large company, I involuntarily start looking for the very hidden price. In fact, everything is very simple. PhoneGap is initially based on Apache Cordova, which is an open source framework for developing mobile applications. At its core, PhoneGap and Cordova are one and the same, only the first provides more convenient tools. Adobe Systems discourages the spent resources at the expense of cloud services in assembly. The company's policy is that these same services can be free of charge, but with some limitations. However, restrictions (1 private application and 50 MB for the size) are quite acceptable for an indie developer.

PhoneGap is capable of collecting projects for all popular mobile platforms: iOS, Android, Blackberry, Windows Phone 8, Ubuntu. Judging by the table of possibilities , the main technical and software elements of mobile phones are supported, such as accelerometer, GPS, network, etc.

PhoneGap is a wrapper around HTML5, a kind of bridge between the browser program and the native API. Therefore, the performance of the compiled application depends closely on the capabilities of the WebView component in the system. Unfortunately, not all platforms provide Webview with WebGL. This is especially true of Android, but, as they say, until you try it, you don’t know.

There are two ways to work with PhoneGap: via the command line or using the desktop application. Here only source compilation is possible with the installation of the SDK mobile platforms. Moreover, iOS requires a Mac or its emulator (I have Windows). All problems are completely solvable, if you use the compilation in the Adobe cloud.

Forgive me the command line apologists and those who want to hear lengthy explanations of the CLI commands. Here I took the path of least resistance and chose a “loser” solution. In the end, I’m interested in the practical performance of PhoneGap and the shortest way to deploy a project.

To work with the framework, you need to download a special application PhoneGap Desktop App . This program is needed to test your project in the framework environment. It does not know how to build, with its help you will not send the code to the Adobe server, but only be able to test its performance.

So, for a successful symbiosis of Blend4Web with PhoneGap, you need to create a new application using the Desktop App program. Of course, this can be done manually, but agree that it will be faster and without errors. In principle, it is enough to click on the Create new PhoneGap Project link and the program will create in the specified directory a whole bunch of files and folders.



Most folders are empty except for www. This is the place to store the collected WebGL application and PhoneGap control scripts. By default, there is already a test case that can be safely removed.

Creating a wrapper is surprisingly easy - you need one HTML file and one JavaScript. And, of course, your masterpiece.

HTML file (index.html):

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> </head> <body> <input type=button value="Start Blend4Web" onclick="{location = 'trdd_blend4web.html?show_fps'}"> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body> </html> 

This is the key file index.html. Notice the js script declaration. The first line with cordova.js is required for PhoneGap, and physically this script does not exist. Perhaps when building an application, it is automatically connected by the linker, but the second script will have to be written by yourself. Minimally, it may look like this:

 var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() { app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); } }; 

The index.js script is a copy of the official documentation. As they say, it works and everything is fine. I did not make any changes to it.

Actually, the Blend4Web application (I remind you that, to simplify integration, I compiled it as a single HTML file with all dependencies) starts when I click the Start Blend4Web button, which is described in index.html.

Before the compilation stage, it is advisable to check the performance of the bundle. Just this is the main function of the downloaded earlier program Desktop App. If there are no errors in the project structure, then the local server is started at the address indicated at the bottom of the window (see the figure above). That is, you open a browser, copy and paste the address into a string, and enjoy your brainchild. This allows you to check the created application, but is not responsible for working on real devices.

The next step is to compile the packages. Here again, two options: manually with the installation of the required SDK or in the developer cloud. Of course, I chose the second.

Working with the cloud is very simple. Project files (only the WWW folder) are packaged in a zip and uploaded to the server. In fact, this work ends. The cloud begins to miscalculate and, if lucky, you will receive packets for the main mobile platforms at the output.



By default, I managed to get packages for Android and Windows Phone. iOS was not going, because it was necessary to enter a certificate and profile, which I did not have at that time. In other cases, it is possible to upload build data (signatures, vendor ID, etc.) to the cloud.

All other platform settings are contained in the config.xml file, which is located in the root of the PhoneGap project.

Test results on real devices were mixed. The attempts to launch the application on Android have failed. I checked the program on 4 different devices and the fact that I didn’t start up on any of them inspired sad thoughts.

Of course, I rushed to look for the reasons for such a blatant inconsistency with the stated capabilities of PhoneGap. Everything turned out to be simple - WebGL support for WebView appeared only from the Android version 5.x. As you understand, not all are the owners of the latest Android systems. And my case proves it. Although partially, this should work since version 4.4.

Thus, the PhoneGap + WebGL + Android bundle was found to be inoperable. However, this does not mean that PhoneGap is not suitable for other platforms. So, for example, iOS supports WebGL for WebView since the seventh version. In most cases, Apple devices are updated when updates are released, which is not true of Android. I could not resist and tried to check the performance of the assembly under iOS.

The problem was that I didn’t have a Mac, and I didn’t want to spend time installing a virtual machine and running Mac OS in it. I found a way to create a digital signature for iOS on a Windows system. Therefore, if you do not have an Apple computer, but you need to build a project for iOS - read on.

So, PhoneGap to build an application for iOS requires Certificate (p12) and Provisioning Profile. To obtain these files, you need an Apple developer account and a real device, as well as a large amount of patience.

First you need to register the device that will be used to test the application. This is done in the “Certificates, Identifiers & Profiles” window.



The easiest way to find out the device's UDID is to open iTunes and view it in the Devices panel.



Now you need to download and install OpenSSL from slproweb.com. I used a slightly older version of Win32 OpenSSL v1.0.1p Light. The one that went by default was not installed normally. And yes, do not forget to restart your computer!



All work with OpenSSl is performed in the Windows terminal. Open it and go to the BIN folder, which is in the OpenSSL-Win32 directory. In my case, the program is installed on drive C.

First, a key and a CSR file are generated:

 openssl genrsa -out mykey.key 2048 

 openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest -subj "/emailAddress=yourAddress@example.com, CN=Name, C=RU" 

In the second line, you need to specify your email, which is used to access your Apple Developer account, name and region. If everything goes well, a file with a CSR extension will appear in the BIN folder.

The file must be uploaded to an Apple account to receive a certificate in return. This is also done in the “Certificates, Identifiers & Profiles” window. It is only necessary to select the Development item (see figure). Then simply upload the CSR file using the form on the page and in response receive a link to the .CER certificate.



However, this is not all, because PhoneGap requires a certificate in p12 format. Conversion is also performed by OpenSSL.

First convert to PEM:

 openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM 

Then in p12:

 openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out ipad_dev.p12 

The program will ask you to enter the password for the certificate, which will later be used when building the application in PhoneGap.

Now you have a certificate holder in p12 format, but you still need to create a Provisioning Profile. It is already easy. Select options like in the image below. Specify the test device and the developer panel will allow you to download the profile created.



That's all. The received files are uploaded to the PhoneGap server through the appropriate form (see figure).



And now the long-awaited results! The test build Blend4Web perfectly installed on the iPad and gave out 60 fps. The truth was a strange glow around the objects, but perhaps this is due to the use of the unstable version of the engine, which I had installed at that moment. The most important thing is that the Blend4Web application launched on iOS without any problems, which means that the road to Apple devices is open.

CocoonJS + Blend4Web

Discouraged by the poor results of PhoneGap for Android, I found on the Internet its direct competitor CocoonJS of Ludei. The main page of the site promised much higher speed than PhoneGap, as well as various tasty buns, such as multiplayer, advertising modules, analytics, push and more. Interestingly, I could not find a price for these services.

The main difference between CocoonJS and PhoneGap is the approach to using WebView. If the latter focuses on the system, then the brainchild of Ludei offers to integrate its own viewer into the application. This significantly increases the size of the final file, but it is guaranteed to work on all platforms and versions of the API.

CocoonJS does not support all mobile platforms, but is limited to Android and iOS, i.e. Windows Phone is not listed. But there are Ouya, Pokki, Tizen, Android Wear.



It is interesting to create an application with CocoonJS. Unlike PhoneGap, you do not need to download an SDK or write any kind of wrapper code. All package building activities are performed on Ludei servers. This is certainly surprising, since the proposed social functions require a certain mechanism of interaction between their code and CocoonJS.

The framework developers offer a special utility for testing the WebGL application immediately in the desired OS. The program is called CocoonJS Launcher and is available for download in the stores of Google Play and iTunes. With its help, you can run your program in the environment of the framework without compiling. I tried to use this launcher, but nothing happened. A shell crashed or hung. Perhaps this is due to the lack of RAM (on the test device used at that time was 512 MB). By the way, the compiled program subsequently worked fine on the same device.

So, to compile the Blend4Web application, all files need to be archived and uploaded to the Ludei server. The basic setting is performed in the Compile Project window (see figure above). The most important thing is to choose the correct render from the list: Canvas +, WebView +, System WebView. In the case of Blend4Web, WebView + is required (this also applies to all other WebGL engines). The remaining two options are the use of hardware drawing of the canvas or system API.

There is some difference from PhoneGap when setting up packages (logos, ID, etc.). All this is done in the Ludei panel. The set of possible options is very minimalistic and does not cover standard queries, for example, when creating an Android application. So, it will not be possible to establish special permissions (permissions). You can only download logos, sign the application, select versions and that's it.

A little later, I found a way to adjust permissions for the Android package. At one of the forums they advised to “open” the package and manually change the options in AndroidManifest.xml. However, there is another option, but I did not check it. CocoonJS developers declare correct support for projects created with PhoneGap, which has a special settings file directly for this purpose.

Let's go back to the compilation. After selecting the required platforms (see fig. Above), uploading the archive to the server, the packages will be built. Time depends on the volume. Notification of the completion of the work you will receive in your mail. The build process of the test application took about 3 minutes.

The test results on Android devices are really impressive. Everything is working. Even on the oldest and weakest device, the scene rotates without noticeable brakes. No problem, as with PhoneGap is not here. The scene was launched on several devices and the FPS reached 60 units.

findings

And where could it be without them ... So, it turned out that the WebGL application created with Blend4Web can be perfectly exported for Android and iOS platforms. PhoneGap allows you to create builds for Apple devices, and CocoonJS is best used for Android. Unfortunately, the second one when trying to build for iOS produces just a project for Xcode. I have no poppy, so this option is not suitable.

And the last - the assembly of Windows Phone is inoperative in one version. It seems that the implementation of WebGL in this system is not up to par.