HTML5, WebGL, and mobile phones (WIP)

Hi Community,
exporting to HTML5 is a good way to have your project working on desktop, mobile phones and various clients.
That’s what I did for Cubuesque, the game I recently released.
On paper, everything is fine, the game is working, but I realized that it’s running on WebGL2, and that a lot of devices don’t support it. So, people how have a bit old Iphone 6 or Samsung Galaxy won’t run the game and have just a black screen. BTW, people how recently bought a low cost phone can run the game because their phone support WebGL2.

If you plan to publish your work to HTML5, I think that it would be a good thing to adapt it to work on WebGL1, if you want it to be played on most devices.

But, it’s not so easy… First you will have to forget high quality graphics provided by WebGL2. No more reflections, translucency, and other eye candy features. Also deal with aliasing on transparent textures…
I think all of this can be compensated with good artistic composition.

So here is the setup to have your project running on WebGL1 :

  • the setup in Blender / Armory :
    – go to User Preferences, Add-ons, Armory, Advanced features, and check “Legacy Shaders”.
    –To export, you will have to add a Mobile render path
    image
    and choose it in your export settings
    image

  • the test environment : choose a web browser that have debugging tools (console) and only support WebGL1. In my case, I work under Linux and chose the epiphany Web Browser.
    image
    In blender, the first time you want to run your project, play it in browser. The Armory server will launch and you will have access to the URL served by it.
    image
    Then copy this URL and paste it to your WebGL1 web browser. Now you can close the default browser.
    The next time you want to test, just build image the project, and after it’s finished (see blender Terminal), just refresh your web browser to see the result and look at the errors.
    image

To be continued…

4 Likes