html5
Create a new preset in Properties - Render - Armory Exporter and select HTML5 (JS) target. Hit Publish to export HTML5 files.
Resulting files will be located at blend_file_location/build_projectname/html5.
Note: To run the index.html you need to copy these files to a web server or start a local server. When playing HTML5 project from Blender, Armory starts a local server automatically.
Note: Armory will target webgl2 by default. If you require webgl1 support, enable Legacy Shaders option in Armory add-on preferences.
Note: To further minimize export size, check Optimize for size.
Create a Mobile path in Properties - Render - Armory Render Path. Afterwards, assign the mobile path to the Render Path slot in the Armory Exporter.
Note: Armory will target webgl2 by default. If you require webgl1 support, enable Legacy Shaders option in Armory add-on preferences.
Embedding Armory projects into existing web pages is straightforward. Once the project is published, inspect exported index.html file. Take note of the <canvas> and <script> elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Armory</title>
</head>
<body style="margin: 0; padding: 0;">
<p align="center"><canvas align="center" style="outline: none;" id='khanvas' width='1280' height='720' tabindex='-1'></canvas></p>
<script src='kha.js'></script>
</body>
</html>Exported HTML projects will require a localhost structure in order to run properly. Luckily Blender already ships with Python which can easily create one for us.
Make sure the script file's extension is of .cmd or .bat type.
e.g. My_Script.cmd or My_Script.bat
Edit the created script and paste in the batch code from below:
@echo off
SET PATH=python;C:\Program Files\Blender\3.3\python\bin
SET EXPORT_DIR=D:\Projects\Armory3D\build_%PROJECT_NAME%\html5
python -m http.server -d %WEB_DIR% 80Change the PATH & EXPORT_DIR variable string paths to fit your own file-paths.
Change the port number 80 to a different port if you want to use a different port or if the port is already in use.
In a browser, if the port is still set to 80, enter localhost (80 is default) or localhost:80 into your browser's URL address.
If you have changed your port value than enter localhost:%PORT_NUMBER% instead.
You can debug an application running in the browser on your mobile device using devtools on your host machine.
- Connect your device via USB debugging (chrome, firefox)
- Open the device inspect menu on your host computer (chrome, firefox)
- Configure port fowarding:
8040→localhost:8040 - Press Play in blender/armory to start the project on your host machine
- Open http://localhost:8040/build_[projectname]/debug/html5/ on your mobile device
By default armory launches the default browser set by your operating system when the Play command ist run.
You can override this behaviour be setting a custtom launch command using the ARMORY_PLAY_HTML5 envrionment variable.
The string value of this variable is a template which gets tranformed using the following parameters:
-
hostThe hostname of the webserver providing the application (default=localhost) -
portThe port of the webserver (default=8040) -
widthThe width of the application window -
heightThe height of the application window -
urlThe full url used to launch -
pathThe path part of the url -
dirThe build directory -
browserThe name of the default browser
Set the default launch command:
export ARMORY_PLAY_HTML5='$BROWSER $url'
export ARMORY_PLAY_HTML5='$BROWSER http://$host:$port/$path'
export ARMORY_PLAY_HTML5='$BROWSER http://$host:$port/$dir/debug/html5'Launch chrome in application mode and open the devtools:
export ARMORY_PLAY_HTML5='chrome --app=$url --new-window --window-size=$width,$height --auto-open-devtools-for-tabs'List of chrome command line switched: https://peter.sh/experiments/chromium-command-line-switches/
Launch fireforx in new window and open devtools
export ARMORY_PLAY_HTML5='firefox --new-window --window-size $width $height $url --devtools'