How To Export For Webgl Mobile


#1

First of all, I’d like to thank the creator of Armory 3D, this project is amazing!
Now, regarding this topic:
On Armory3D website, there are two webgl examples:
Desktop: https://armory3d.org/demo/animation
Mobile: https://armory3d.org/demo/animation_mobile
How do I export for webgl​ mobile?


#2

I can’t speak for iOS, making a HTML5 build should work on all devices. In the armory exporter set the graphics to “mobile”.

A native android build may also be what you are after;
To export for mobile go to the
Armory Exporter > Target > Android
Build, then Publish.

You will need to download Android Studio to then make an apk for your project to work on your android phone.
In your file browser directory a build of your game will be in a new folder within your blender file’s directory. The “android-native-build” folder contains the file that Android Studio can run a build of.
While you have Android Studio running it will prompt you to download a number of updates and packages in order to make a build of your work. Plug your phone into your PC and good luck compiling.


#3

Same goes for iOS, it all comes down to graphics settings. Kha tooling makes sure your game runs on webgl. The bottleneck is really just the power of your device and how much it can handle. But if you want to run your game natively on your device follow @Chucker’s advise.


#4

Hi! Thank you for your help!

I tried with the following configurations:
Armory Player -> Browser
Armory Exporter -> Target: HTML5 and Graphics API: Auto (the other option was WebGL but I think auto is the same)
Armory Render Path -> Mobile Preset

I built and published the standard Blender scene (just a cube and a camera). It worked in desktop Chrome but not in my Android Chrome (all I saw was a black screen). However, the mobile demo from the Armory website (https://armory3d.org/demo/animation_mobile) runs fine on my Android Chrome…

Any idea on what might be the problem or what are the exact settings of that mobile demo from the Armory website? Is the blend file of that demo available somewhere?


#5

Hi, I’m still unable to publish with the same configurations as the animation demo for mobile from Armory website. Anyone got any clues?


#6

What phone do you have?


#7

My phone is kinda crappy actually, it’s a Wiko with Android, Jerry Marshmallow 6.0.

But it still runs webgl stuff, including the mobile animation demo that is available on the Armory 3D website.

However when I build and publish the standard Blender scene (a camera and a cube), all I see on my phone is a black screen (on desktop it’s fine though).

The settings I tried were these:
Armory Player -> Browser
Armory Exporter -> Target: HTML5 and Graphics API: WebGL
Armory Render Path -> Mobile Preset

I’m using the latest version of Armory with Blender 2.7, maybe I should try an older one? Or maybe there are other graphical settings I should change? Or maybe I need to specify somewhere that my target is WebGL 1 and not WebGL 2?


#8

Ok, I tried testing with Internet Explorer on my desktop: again, I’m able to open the mobile animation demo from Armory website and it runs smoothly, but when I try to open my scene, it doesn’t work. IE’s console showed the following errors:

SystemImpl.hx:350: Could not initialize WebGL 2, falling back to WebGL.

SCRIPT5022: Error: Could not compile shader:
Shader compilation errors
(1, 14): syntax error, unexpected IDENT_TOK, expecting NEWLINE_TOK

File: kha.js, Line: 1, Column: 581534

Any clues?

Also, I’d like to add the reason I became interested in Armory was exactly the fact that I could run the mobile animation demo on my crappy phone and on old browsers like Internet Explorer.
I was looking for something that would allow me to create webgl stuff that would run on the most devices possible.

Three.js and Babylon.js would do the trick, but they lack an editor; PlayCanvas has an editor but it forces the users to host their projects on their website; I love Unity but last time I checked its webgl exports were buggy on desktop and didn’t work at all on mobile; last I heard Unreal’s webgl support was still in an experimental phase; Godot 3.0 exports for webgl 2 but not webgl 1 (they said they’ll correct that on 3.1 but I don’t want to “wait for Godot”)…

So when I heard about Armory and checked the mobile animation demo I was amazed! However I’ve been unable to recreate the same results, so if anyone has any clue I’d be very grateful!


#9

Should I change the settings under the Armory Project tab (it has 4 groups of options: build, flags, window and modules)?
Or maybe I should change something under the Armory Render Path tab, on top of choosing the Mobile Preset?
Any ideas?
Also, do you guys know if the blender file of the Mobile Animation Demo from Armory website is available on the GitHub repository? I looked for it but couldn’t find it…


#10

The mobile preset just disables some rendering features for performance and changes render technique. The “mobile” demo in your browser is just showing off how it looks with the mobile preset. There is nothing “mobile” about it other than it having lower rendering settings to accommodate the average device.

Webgl should work fine can you show us the material you’re trying to compile?

SystemImpl.hx:350: Could not initialize WebGL 2, falling back to WebGL.

This is not an error btw, it’s just saying that webgl 2 is not available and will be using webgl 1 instead.

SCRIPT5022: Error: Could not compile shader:

This however shows there is a problem compiling the shader. Please provide a blend file if you can?

You’re currently targeting webgl, im not sure if you still want to compile natively to android/ios?


#11

Thanks for your reply!
I’m just using the Blender standard scene, with 1 camera, 1 light and 1 cube with the default material. The scene is this:
armoryTest.blend (508.3 KB)
What kind of material should I use for Armory / Webgl 1?


#12

Your file seems to compile just fine here. So you compile that scene and doesn’t run in your browser?

You should just work with whatever material you build. The render settings decide what gets included in the shader.


#13

Btw did you update the SDK?

Under window > Toggle System console. This will show a black window with command prompts

Back to blender

Go to preferences > add-ons > armory > update SDK.

In the system console you can see data being downloaded. It’s done if nothing happens after a few seconds. Clean your project and restart blender.

If you get an error make sure you install git first. It’s the option next to update sdk


#14

Ok, I downloaded the new version of Armory (version 0.5) and now the mobile webgl export works fine, just like the example on Armory’s website! :slight_smile: