App Manager — Soft8Soft
Description: Learn how to use App Manager to create, develop, and upload 3D web applications with Verge3D.

# App Manager

App Manager is an easy-to-use tool for creating and performing various operations with Verge3D applications. Consider it to be a mission control center for developing Verge3D-based content.

## Contents

- Running App Manager
  - A. From Blender, 3ds Max, or Maya
  - B. Using Desktop Application
  - C. From Command-Line
- First Start
- Exploring Applications
  - List on the Main Page
  - Application Page
  - Asset Store
- Creating Applications
- Importing Applications
- Operations
  - Edit Puzzles
  - Open Folder
  - Managing Application Settings
    - General Tab
    - Preloader Tab
    - UI Tab
    - Annotations Tab
    - Sharing Tab
    - Errors Tab
    - PWA Tab
  - Publish
  - Exporting Applications
  - Create Desktop/Mobile Apps
  - Create E-learning Apps
  - Move to Trash
  - Update
- Templates
  - What's a Template
  - Creating Templates
- Managing Network Directory
- App Manager Settings
  - General Tab
  - UI Tab
  - Puzzles Tab
  - Network Tab
  - Templates Tab
- License Management

#

## Running App Manager

The App Manager is implemented as website shown by the locally-run web server. This is quite similar to running an admin panel for your Wi-Fi router.

By default, the pages are served from the address:

- localhost:8668 — Verge3D for Blender
- localhost:8669 — Verge3D for 3ds Max
- localhost:8670 — Verge3D for Maya

which you can navigate to, keep in the browser tab, or bookmark. The server itself can be launched in several ways (see below).

#

### A. From Blender, 3ds Max, or Maya

The local web server is started automatically when you launch your 3D tool with Verge3D plug-in installed. Upon clicking on the App Manager button (Blender):

or menu option (Max, Maya):

the App Manager page is shown in the default web browser.

If the web server happens to be down for some reason (e.g. you updated Verge3D to a new version), this operator also restarts it.

#

### B. Using Desktop Application

The local web server can be launched even without running Blender, 3ds Max, or Maya. Simply click on the desktop icon created by the Verge3D installer (Windows-only). The App Manager page will be immediately shown in the web browser.

If the web server is already running (e.g. you launched it from the 3D editor), this desktop application just opens the App Manager in the browser.

#

### C. From Command-Line

Install Python 3, e.g. from Microsoft Store. Once you have Python 3 installed, launch Command Prompt and type:

`cd verge3d_blender`

(or whatever path you installed Verge3D in), and then for Blender version type:

`python manager\server.py BLENDER`

for Max version type:

`python manager\server.py MAX`

or for Maya:

`python manager\server.py MAYA`

Finally, open up the browser and navigate to localhost:8668, localhost:8669, localhost:8670 as usual. Users of maxOS or Linux can use the same commands, only with forward slashes.

#

## First Start

When Verge3D is first installed or updated to a new version, a splash screen is shown up:

On this screen you should select an applications folder in which your projects will be stored. You can leave the default to create a verge3d_apps subfolder in Documents. On this screen you can also switch between Light and Dark themes.

#

## Exploring Applications

#

### List on the Main Page

Upon starting or refreshing the main page, the App Manager scans the applications folder and displays all found folders as a list.

For each application in the list, the App Manager displays all .html, .gltf/.glb and 3D editor save files (.blend, .max, .ma/.mb) found in an application folder. These files can be viewed by clicking on their icons.

Application lines which contain too many files are expandable through the triangle icon near app name.

Applications can be filtered using the search field on the top.

#

### Application Page

By clicking on the application name, a more elaborate page is shown.

On the application page, all files are listed with their names, also runnable. The files on this page are filterable via the search input.

#

### Asset Store

Asset Store includes dozens of demos, tutorial projects, examples, and material libraries that are shipped with Verge3D. You can use this content to learn from or reuse it for your own applications.

You can open the Asset Store by clicking the Cart icon:

#

## Creating Applications

A new application can be created using the button on the left bar.

You may type a name for the new application, and select a template from which the app will be created.

By default, four templates are offered (you may create and add more templates for choosing from):

Standard Light
  Light-themed app which loads basic cube with silver material. Also includes an orbit camera, light source, and HDRI-based environment lighting.
Standard Dark
  Dark-themed app which loads basic cube with gold material. Also includes an orbit camera, light source, and HDRI-based environment lighting.
Blank Scene
  Blank app which does not load any models. Anyway, it comes with HDRI-based lighting setup.
Code-Based
  Very basic cube scene for hardcore JavaScript coders. Does not support Puzzles out of the box.

You can also include optional modules in the application:

Font Converter
  Truetype font converter (opentype.js). Used to load and render dynamic text objects.
Texture Decompressor
  Texture decompressor (basis_transcoder.js and basis_transcoder.wasm). Loads compressed textures in KTX format.
Physics
  Physics engine (ammo.wasm.js and ammo.wasm.wasm). Powers Physics puzzles.

Once a new application is created, there will be shown a link which you may use to go to the application page (or just close the window).

The new app will start being displayed in the main list.

#

## Importing Applications

An application ZIP can be appended (imported) to the App Manager by a simple drag-and-drop operation:

Once an application is appended, there will be shown a link which you can use to go to the application page (or just close the window).

The appended app will appear in the list of the applications.

#

## Operations

#

### Edit Puzzles

You can start adding or editing Puzzles for an application by clicking the button in the 'operations' column on the main page:

... or by using the button on the right bar when on the application page:

See more information on Puzzles here.

#

### Open Folder

You can open the application folder by clicking the button in the 'operations' column on the main page:

... or by using the button on the right bar when on the application page:

This operation will invoke the default file manager of your operating system (e.g. File Explorer on Windows 10/11).

#

### Managing Application Settings

You can open the Application Settings dialog by using the button on the right bar when on the application page:

By using this dialog you can customize how your app looks in the browsers, search engines, or social media:

The settings include:

#

#### General Tab

Title
  Application title displayed in the browser and search results.
Description
  Application description displayed in the search results.
Favicon 48x48
  Basic application icon (called favicon) shown when running your app on desktop browsers. This is also used to display your app on search engine result pages. You should use PNG format for favicon and provide correct dimensions for maximum compatibility.
Safari 180x180
  Application icon shown in Safari browser on iPhones/iPads.
Chrome 192x192, 512x512
  Application icons shown in Chrome on Android devices. Also used to display launchers of installed progressive web applications (PWA).

#

#### Preloader Tab

Image
  Preloader image. For better look you should use square-sized images in PNG, JPEG, WebP, or SVG format.
Image Size
  Preloader image width and height.
Bar Color
  Preloader bar color, gradient, or custom CSS style.
Bar Border Color
  Preloader bar border color.
Bar Height
  Preloader bar height. This does not include border, which have additional thickness of 1 pixel.
Background Color
  Preloader screen background color.
Shadow
  Only for dark-themed apps. Color and width of shadow (glow) effect for preloader image and bar.

#

#### UI Tab

Fullscreen Open
  Button to switch into the fullscreen mode. For better compatibility provide square-sized image in PNG, JPEG, WebP, or SVG format.
Fullscreen Close
  Button to leave the fullscreen mode. For better compatibility provide square-sized image in PNG, JPEG, WebP, or SVG format.
Move Forward
  Button shown on mobile devices when using first-person camera controls.

#

#### Annotations Tab

Marker Colors
  Annotation text, background, and border colors.
Marker Size
  Annotation size in pixels.
Dialog Colors
  Annotation dialog text, background, and border colors.

#

#### Sharing Tab

Open Graph Title
  Title to be shown when sharing your app in most social media channels, such as Facebook, X, Reddit, LinkedIn, etc.
Open Graph Description
  Description to be shown when sharing your app in most social media channels, such as Facebook, X, Reddit, LinkedIn, etc.
Open Graph Image
  Image to be shown when sharing your app in most social media channels, such as Facebook, X, Reddit, LinkedIn, etc. The recommended size of this image is 1200x630.
X/Twitter Image Size
  The size of the image to be shown when sharing your app on X (Twitter).

#

#### Errors Tab

WebGL Error Message
  Error message displayed when the user runs your app in a browser which does not support WebGL. You can use plain text or HTML markup to specify this message.
WebGL Error Image
  Image displayed above the WebGL error message.

#

#### PWA Tab

Use these settings to configure progressive web app features for your application.

Progressive Web App
  Make your app progressive. This means it can be installed into your system and started via taskbar/dock/start menu launcher (on desktop) or home/app screen (on mobile).
Web App Name
  Progressive web application (PWA) name. This name is used when installing your web app into the system and also as a title for the app icon. Specifying the empty value for this setting effectively disables PWA capability for your app.
Offline Mode
  Allow your app to operate without internet connection (e.g. in airplane mode). Offline mode is implemented via special service worker script (v3d_pwa_cache.js) which automatically generated and placed into the app folder. This script is responsible for creating and maintaining a permanent cache for your app assets. The Offline Mode setting can be enabled and works independently of the PWA capability.
Refresh Cache
  Once offline mode is activated for your app, the persistent app cache will be created and populated on the first launch and will be reused for all subsequent launches. Hence, it's required to refresh this cache once you made any modifications to your app (e.g. exported new scene or edited Puzzles).

#

### Publish

You can publish an application by clicking the button in the 'operations' column on the main page:

... or by using the button on the right bar when on the application page:

This operation will start uploading the application to Verge3D Network (operation cancellable), so that it becomes available online.

If uploading fails with the message "The difference between your local system time and the server time is too large", then you should correct time on your computer and try again.

After uploading is complete, a window will be shown from which you can copy the link to your app or the embedding code.

You can also use social sharing buttons and QR code generator there.

Uploaded files can be inspected or removed on the Network Directory page.

#

### Exporting Applications

You can create or upload the ZIP archive of an application folder by using the button on the right bar when on the application page:

This operation will pack your application folder and then either:

1. download the archive to your local file system, or
2. upload it to the remote folder using Verge3D Network.

As a result, your app can now be shared with your co-workers, clients, partners, or us, Verge3D developers (for debugging). This feature is also useful for backups.

If you choose to upload the archive, a window will be shown from which you can copy the link to the file uploaded to Verge3D Network.

If uploading fails with the message "The difference between your local system time and the server time is too large", then you should correct time on your computer and try again.

Uploaded files can be inspected or removed on the Network Directory page.

#

### Create Desktop/Mobile Apps

App Manager comes with the tool to convert your 3D projects to desktop or mobile apps. To perform this conversion, use the following button located on the right bar of the application page:

Read more about this tool in the following sections depending on the apps you want to create: desktop or mobile.

#

### Create E-learning Apps

With Verge3D you can pack your 3D web apps to e-learning courses compatible with SCORM 1.2 standard. Use the following button located on the right bar of the application page:

Read the following guide for more info on how to use this feature properly.

#

### Move to Trash

You can delete an application by clicking the button in the 'operations' column on the main page:

... or by using the button on the right bar when on the application page:

The application is moved to the system Trash from which it is possible to restore it.

#

### Update

If an application is based on an older version of Verge3D, a button for updating it becomes active in the 'operations' column on the main page:

The button will also appear on the right bar of the application page:

See more information on updating here.

#

## Templates

#

### What's a Template

When creating a new application, you may select a template from which the app will be created. By default, 4 templates are offered: "Standard Light", "Standard Dark", "Blank Scene", and "Code-Based".

The source files for these templates can be found in the manager/templates subfolder inside Verge3D installation folder, e.g. C:\Program Files\Verge3D_for_Blender\manager\templates. You can modify these files or create an entirely new template for use in your project.

In the templates folder, there is also a hidden template called "Embeddable" which you can use for creating React.js or Vue.js applications.

There are many possible ways to modify/improve your template. You can change the layout by editing HTML/CSS files, embed/use some JavaScript code or library, replace the UI elements or the preloader, or add some puzzles to be included in each new application by default.

#

### Creating Templates

In order to create your own template, click the Settings button on the left bar, then select Templates tab:

In the panel shown up, click + and specify the name for your new template (e.g. "My Template"), then click Apply Changes:

As a result, every time you create a new application, the option to choose your template will appear:

By default, an empty folder will be created for your application, since no files were provided for the new template. The easiest way to start with a real template is to copy some of the existing templates (e.g. "Standard Dark") and rename the copied folder according to the name of your template (that is, "My Template").

#

## Managing Network Directory

By clicking on the cloud button on the left bar, you can open the Verge3D Network directory:

Network directory lists all files, directories, or ZIP archives you uploaded there previously:

On this page you can see the size of the items as well as the date/time the assets were uploaded to the Verge3D Network (in your local timezone). For directories, date/time info corresponds to the most recently uploaded child element (file or another directory).

The first item ("/") shows some important info: the total size occupied by all your data, and last time something was uploaded to the Network directory.

You can select (with checkboxes) some items and then click on the buttons located on the right panel:

1. To download apps, or individual files back to your local Verge3D distro.
2. To remove files from the directory.

#

## App Manager Settings

By clicking the gear button on the left bar, you can open up the panel with various settings:

It looks as follows by default:

#

### General Tab

Applications Folder
  Use the specified absolute path (e.g. C:\Users\UserName\my_verge) for the applications folder.
Notify about Verge3D updates
  The App Manager will display a notification in case a new stable Verge3D version is available (enabled by default).
Add source files (models, puzzles, backups, etc.) to exported ZIP
  The export feature will pack all files, including sources, when creating a ZIP archive. This includes .blend, .max, .ma/.mb, visual_logic.xml, and the contents of the v3d_app_data folder. You can disable this if you don't want to share any source files.
Enable external server interface
  Use the IP address in your local Wi-Fi or Ethernet network instead of localhost. You can find your computer IP address from the operating system preferences: Windows, Mac, Linux. Launch the App Manager by navigating to the network address, e.g.: 192.168.1.15:8668

#

### UI Tab

Select Theme
  Switch the App Manager and Puzzles editor between Light and Dark modes.
User Manual URL

  Assign custom path to the User Manual. You might want to this in the following possible scenarios:

  - Replace the English docs by a localized version.
  - Read docs offline and faster via URL, e.g. for Blender http://localhost:8668/docs/manual/en/index.html
  - Use docs for an older Verge3D version or a preview version rather than the latest stable User Manual.

  This setting replaces manual in Blender, 3ds Max, Maya, App Manager, and Puzzles.

Simplified Mobile UI
  Use the simplified App Manager interface on mobile devices with small screens (e.g. iPhones).

#

### Puzzles Tab

Enable Performance Mode
  The Puzzles Editor will use several optimization measures aimed to improve dragging and zooming performance. User experience can vary depending on a particular browser with Chromium-based ones (Google Chrome, MS Edge, Brave, etc...) benefiting the most and others like Firefox and Safari to a lesser extent. This feature can help if your puzzles setup has grown too much to the point that it causes noticeable performance issues.

#

### Network Tab

Use these settings to configure Verge3D Network uploads and App Manager internet access.

Verge3D Network cache age (minutes)
  Set the period of time after which Verge3D Network will refresh the re-uploaded application. Set this to 0 (that is, refresh instantly) for faster iterations in development. Set this for some higher value (e.g. 1440 for a day) to make your app load faster and consume less bandwidth.
Use URL shortener for uploads
  Shorten the links to the apps uploaded to Verge3D network or generate direct (long) links. Using the direct links may be less convenient, but have the benefit of loading a bit faster. This also makes it impossible to guess about the URLs of other users' apps uploaded to Verge3D Network, which makes sense if privacy is a concern.
Publish all app files (models, puzzles, backups, etc.)
  The publish feature will upload the files that are normally not needed for running an application online, and as such are skipped by default. This includes .blend, .max, .ma/.mb, visual_logic.xml, and the contents of the v3d_app_data folder. You can enable this when you want to share the source files with your users, partners, or collegues.
Proxy Server: Host, Port, User, Password
  HTTP proxy settings used by the App Manager to get access to the internet. To use an anonymous proxy server, specify only the Host and Port settings. To use authenticated proxy, specify User and Password as well. To disable proxy, leave the Host setting blank.

#

### Templates Tab

See above.

#

## License Management

Use the Key icon in the App Manager to activate your Verge3D copy with a license key and to review your license status. When you just installed Verge3D your copy is designated as "Trial" — note the small red dot near the Key icon:

Click Enter Key and paste your license key. This will turn your Verge3D copy to the "Active" status and the expiration date will be displayed in the resulting window:

Once the maintenance subscription is expired you'll be suggested to renew your license via email. However, you can still use the older versions of Verge3D covered by your expired license.

If you're planning to use Verge3D for long time, it is optimal to take advantage of regular updates. Check your email box periodically, and watch out for the Key icon to see if a red dot is there:

## Got Questions?

Feel free to ask on the forums!