Skip to content

html5

Jump to bottom Edit New page
RPaladin edited this page Nov 26, 2022 · 10 revisions

Deploying to HTML5

Browser

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.

Mobile browser

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.

Embed

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>

How to run a Python localhost (Windows method)

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.

1. Create a Windows batch script

Make sure the script file's extension is of .cmd or .bat type.

e.g. My_Script.cmd or My_Script.bat

2. Edit -> Paste code:

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% 80

3. Modify file-paths

Change the PATH & EXPORT_DIR variable string paths to fit your own file-paths.

4. (Optional) Change port number

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.

5. Enter localhost:%PORT_NUMBER%

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.

Debug on mobile devices

Chrome

  1. Connect your device via USB debugging
  2. Open chrome://inspect/#devices in chrome on your host machine
  3. Configure port fowarding: 8040 → localhost:8040
  4. Press Play in blender/armory to start the project on your host machnine
  5. Open http://localhost:8040/build_[projectname]/debug/html5/ on your mobile device

Firefox

  1. Connect your device via USB debugging
  2. Open about:debugging in firefox on your host machine
  3. Configure port fowarding: 8040 → localhost:8040
  4. Press Play in blender/armory to start the project on your host machnine
  5. Open http://localhost:8040/build_[projectname]/debug/html5/ on your mobile device

armory3d.org/engine | Our wiki on GitHub | Join our Discord! | Forums | API | Haxe Manual | Games made with Armory

Clone this wiki locally