Управление проектами

Начиная с версии 15.09, SDK включает систему управления проектами, которая позволяет:

  • просматривать список и внутреннюю структуру имеющихся проектов;

  • запускать приложения, просматривать сцены в программе-просмотрщике, загружать исходные файлы сцен в Blender;

  • создавать и конфигурировать новые приложения, в том числе на основе готовых шаблонов;

  • осуществлять сборку приложения и его конверсию в форму, удобную для последующего размещения на сервере;

  • конвертировать ресурсы приложения (текстуры, звуковые и видео-файлы) в альтернативные форматы для обеспечения кроссбраузерности и кроссплатформенности;

  • автоматизировать повторный экспорт всех сцен из состава приложения, включая файлы в формате JSON и HTML.

  • удалять проекты.

Менеджер проектов

Приложение Project Manager доступно из раздела Tools главной страницы SDK. При запуске приложение выводит список из всех проектов, находящихся в установленном SDK.

Команды для управления проектами находятся в верхней части страницы.

_images/project_manager_actions.png
Back to Index

Возвращает на индексную страницу Blend4Web SDK.

Create New Project

Открывает мастер создания новых проектов.

Import Project(s)

Открывает диалог импорта проектов.

Export Project(s)

Открывает страницу экспорта проектов.

Hide Stock Projects

Позволяет скрыть стоковые проекты. Если они уже скрыты, место этой команды занимает команда Show Stock Projects.

Help

Вызывает справку.

Команды управления конкретным проектом находятся справа от него

Примечание

Некоторые команды могут быть недоступны в зависимости от типа проекта.

_images/project_manager_commands.png
  1. Сборка проекта (недоступно для типов проекта WebPlayer JSON и WebPlayer HTML).

  2. Проверка отсутствующих или неиспользуемых модулей API (недоступно для типов проекта WebPlayer JSON и WebPlayer HTML).

    При активации этой опции менеджер проектов проверяет модули, используемые приложением, и выводит результаты проверки в консоль. Ниже приведены возможные предупреждения:

    1. При отсутствии одного или нескольких модулей API в папке проекта выводится следующее сообщение:

    Module `module_name` is missing in the `project_name.html` project, please include it or run `Update Modules`.

    _images/project_manager_check_modules_missing.png

    Отсутствующие модули могут быть добавлены в проект при помощи кнопки Update Modules.

    1. Если в проекте присутствует один или несколько модулей API, не используемых в программном коде, выводится следующее сообщение:

    Incorrect module `module_name` in the `project_name.html`, please remove it or run `Update Modules`.

    _images/project_manager_check_modules_required.png

    Модули, не используемые в проекте, могут быть удалены из него при помощи кнопки Update Modules.

    1. В том случае, если никаких проблем не обнаружено, выводится следующее сообщение:

    Module check complete. No problems detected in the `module_name.html`.

    _images/project_manager_check_modules_complete.png
  3. Реэкспорт блендеровских сцен в проекте.

  4. Конвертация медиа ресурсов.

  5. Экспортирование и дальнейшая загрузка проекта.

  6. Удаление проекта со всеми зависимостями.

Примечание

Все пути берутся из конфигурационного файла .b4w_project.

Рядом с именем проекта находится ссылка на информацию о нём. Там же указан тип приложения. Приложение может иметь один из следующих типов:

Player

Приложение запускается при помощи веб-плейера.

Dev

Приложение для разработки

Build

Скомпилированное приложение.

Мастер создания проектов

Мастер создания новых проектов входит в состав приложения Project Manager и вызывается по ссылке [Create New Project] на главной странице этого приложения.

_images/project_manager_create_project.png

Кнопка [Back to Projects] используется для возвращения на главную страницу менеджера проектов, а кнопка [Help] вызывает справку.

  1. Имя проекта. Текущим именем будут названы директории в “apps_dev/имя_проекта”, “deploy/assets/имя_проекта”, “blender/имя_проекта” и “deploy/apps/имя_проекта”. Для лучшей совместимости рекомендуется использовать буквы и нижнее подчеркивание.

  2. Название проекта. Это имя будет показываться в заголовке веб-браузера.

  3. Имя автора проекта.

  4. Добавить шаблоны приложения. В директорию проекта “apps_dev/имя_проекта” будут добавлены стандартные шаблоны приложения: html-файл, css-файл, js-файл.

  5. Добавить шаблоны сцены. В директорию “deploy/assets/имя_проекта” будет добавлен стандартный json-файл; в директорию “blender/имя_проекта” - blend-файл.

  6. Использовать библиотеку материалов. Blend-файлы библиотеки материалов будут скопированы в директорию проекта “blender/project_name”, файлы медиаресурсов - в директорию “deploy/assets/project_name”.

  7. Скопировать скрипт менеджера проектов. Скрипт project.py будет скопирован в директорию проекта.

  8. Все файлы проекта будут находиться в одной директории. Предпочтительно использовать для маленьких проектов, таких как уроки и примеры. Для данной опции доступны только проекты типа Web Player JSON и Web Player HTML.

  9. Тип собираемого проекта. Здесь возможны варианты:

    • External - для запуска приложения Менеджер проектов использует файлы движка в каталоге deploy/apps/common/.

      При сборке проекта компилируются только файлы приложения, в то время как папка deploy/apps/common/ копируется в директорию проекта.

      Этот вариант используется, когда не требуется изменять файлы движка.

    • Copy - файлы движка прямо копируются в папку приложения из каталога deploy/apps/common/.

      При сборке проекта компилируются только файлы приложения, но не движка (т.е. сам движок не может быть модифицирован);

    • Compile - исходники движка компилируются вместе со скриптами приложения.

      Этот вариант применяется, если необходимо внести изменения в исходный код самого движка;

    • None - движок не копируется в директорию проекта, также менеджер проектов не производит никаких действий при сборке проекта. Разработчик приложения должен самостоятельно производить все необходимые операции;

    • Web Player JSON - json-файл, находящийся в проекте, запускается при помощи веб-плеера в составе SDK;

    • Web Player HTML - проект состоит из html-файла, внутри которого находятся все необходимые ресурсы.

  10. Уровень оптимизации javascript.

    • “Simple” - в коде заменяются имена переменных;

    • “Advanced” - производится оптимизация кода;

    • “Whitespace Only” - в коде удаляются только пробелы.

  1. URL-атрибуты Веб-плеера. Эта вкладка доступна только если параметр Engine Binding Type имеет значение Web Player JSON или Web Player HTML.

    • “Show FPS” - включает счётчик кадров в секунду в правом верхнем углу окна веб-плеера.

    • “Auto-rotate camera” включает автоматическое вращение камеры сразу после загрузки сцены.

    • “Disable social network buttons” используется для отключения кнопок социальных сетей на панели управления.

    • “Background transparency” используется для установки прозрачности области отрисовки.

    • “Use compressed textures” используется для включения загрузки уменьшенных текстур и текстур с компрессией (формат DDS).

Создание приложений для Веб-плеера

Главное преимущество приложений для Веб-плеера - простота размещения подобных приложений на веб-страницах.

_images/project_manager_create_web_player_project.png

Создать приложение для Веб-плеера несложно. Для этого достаточно при создании нового проекта выбрать опцию Web Player JSON или Web Player HTML на вкладке Engine Binding Type.

Проекты для веб-плеера обладают практически тем же набором параметров, что и проекты других типов. Единственное исключение - группа параметров, известная как Web Player Params.

Настройки проекта

_images/project_manager_web_player_parameters.png

Эта вкладка доступна только в том случае, если включена опция Web Player JSON или Web Player HTML. Перечисленные здесь параметры по сути представляют собой URL-атрибуты, которые веб-плеер будет использовать при запуске проекта.

Размещение проекта

После завершения работы над проектом, выберите опцию deploy project на панели Operations, на главной странице менеджера проектов. После этого проект будет экспортирован, запакован в архив и загружен в папку, которая используется вашим веб-браузером для загрузки файлов.

Чтобы разместить проект на веб-странице, распакуйте архив и загрузите файлы, находящиеся в нём (html-файл и директорию assets) на веб-сервер с помощью FTP, SSH или любого другого протокола, поддерживаемого сервером.

Примечание

После загрузки на веб-сервер должна сохраняться внутренняя структура файлов архива и их относительные пути.

После этого приложение типа Web Player HTML можно разместить на веб-странице с помощью контейнера iframe. Ниже приводится пример HTML-кода, который можно использовать для этого:

<!DOCTYPE html>
<html>
<head>
    <title>An Example Application</title>
</head>
<body>
    <iframe width="800" height="500" allowfullscreen src="/tutorials/examples/web_page_integration/example_scene.html"></iframe>
</body>
</html>

Размещение JSON-проекта происходит почти так же, но вместо одного HTML-файла используется комбинация веб-плеера и JSON-файла, содержащего саму сцену.

<!DOCTYPE html>
<html>
<head>
    <title>Another Example Application</title>
</head>
<body>
    <iframe width="800" height="500" allowfullscreen src="/apps/webplayer/webplayer.html?load=/tutorials/examples/web_page_integration/example_scene.json&show_fps"></iframe>
</body>
</html>

Информация о проекте

Эта страница содержит информацию о выбранном проекте и доступна по ссылке [info] рядом с его названием.

_images/project_manager_info.png

Команды

Back to Projects

Возвращает на главную страницу менеджера проектов.

Help

Вызывает справку.

Параметры проекта

Project Name

Имя проекта

Project Title

Название проекта. Это имя будет показываться в заголовке веб-браузера.

Project Author / Company

Имя автора проекта или название компании-разработчика проекта.

Project Icon

Пиктограмма проекта.

Applications

Приложения проекта.

Engine Binding Type

Тип собираемого проекта.

Project Path (Development Directory)

Каталог проекта.

Project Config

Конфигурационный файл проекта.

Build Directory

Каталог, содержащий скомпилированный проекта.

Blend Directory(s)

Каталоги, в которых располагаются blend-файлы проекта.

Assets Directory(s)

Каталоги, в которых располагаются медиаресурсы проекта.

URL Params

URL-параметры, применяемые при запуске приложения.

JavaScript Obfuscation Level

Уровень оптимизации javascript.

JS Compilation Pass-Through List

Список исключений для компиляции JavaScript-файлов проекта.

CSS Compilation Pass-Through List

Список исключений для компиляции таблиц стилей проекта.

Build Ignore List

Список исключений для сборок проекта.

Deployment Assets Directory

Каталог, который будет содержать медиаресурсы размещённого проекта.

Deployment Assets URL Prefix

URL-префикс пути к папке медиаресурсов размещённого проекта, возвращаемый функцией get_std_assets_path().

Deployment Ignore List

Список исключений для размещения проекта.

Редактирование проекта

По ссылке [edit] рядом с названием проекта доступен простой веб-интерфейс для редактирования файлов проекта.

_images/project_manager_edit_project.png

Левая часть окна редактора содержит список всех .html-, .css- и .js-файлов, находящихся в папке проекта (./apps_dev/<имя_проекта>), начинающийся главным файлом проекта .b4w_project. Левая часть окна содержит текст выбранного файла (по умолчанию ни один файл не выбран) с подсвеченным синтаксисом.

Примечание

Этот интерфейс может использоваться только для редактирования файлов версии для разработки, но не файлов собранной версии.

Для сохранения выбранного файла используется кнопка Save File в нижней части страницы.

Импорт проектов

Средства импорта проектов вызываются по ссылке [Import Project(s)].

Нажатие на эту ссылку вызывает стандартный диалог открытия файла, где можно выбрать файл проекта, который требуется импортировать.

Экспорт проектов

Окно экспорта проекта вызывается по ссылке [Export Project(s)].

_images/project_manager_export.png

Команды

Back to Projects

Возвращает на главную страницу менеджера проектов.

Hide Stock Projects

Скрывает стоковые проекты. Если они уже скрыты, место этой команды занимает команда [Show Stock Projects].

Help

Вызывает справку.

Export Project(s)

Экспортировать выбранные проекты.

Параметры проекта

Select

Демонстрирует, выбран ли проект для экспорта.

Name

Имя каталога проекта.

Title

Заголовок проекта.

Author

Имя автора проекта.

Archive Name

Имя архива, в который будут запакованы экспортируемые проекты.

Расширенное управление проектами

Расширенное управление проектами используется опытными разработчикам, которым необходима как большая степень гибкости, так и возвожность автоматизировать все рабочие процессы, связанные с разработкой приложений.

Для расширенного управления проектами следует использовать скрипт project.py и ручное редактирование конфигурационных файлов .b4w_project.

The project.py script can be found in the ./apps_dev/ folder of the Blend4Web SDK directory.

Зависимости

Система управления проектами работает на всех операционных системах, однако для некоторых операций может потребоваться установка дополнительных зависимостей. Проверить, установлены ли необходимые зависимости, можно с помощью команды:

./project.py check_deps

Для пользователей ОС Windows:

python project.py check_deps

Для работы скрипта необходимо установить java и записать ее в переменную среды PATH.

Примечание

Java по умолчанию входит в Windows-версию SDK. Для Linux и macOS её требуется установить вручную.

При конверсии ресурсов также используется набор внешних приложений, описанных в соответствующем разделе.

Список проектов

Список всех проектов в SDK доступен посредством следующей команды:

python3 project.py -p myproject list

Структура проекта

Типовое приложение, разрабатываемая с помощью системы управления проектами имеет вид:

blend4web/
    apps_dev/
        myproject/
            project.py
            .b4w_project
            myproject.js
            myproject.css
            myproject_dev.html
    blender/
        myproject/
            myproject.blend
    deploy/
        apps/
            myproject/
                myproject.js
                myproject.css
                myproject.html
        assets/
            myproject/
                myproject.json
                myproject.bin

Как видно, это приложение состоит из 4 различных директорий:

  1. apps_dev/myproject. Содержит исходные файлы приложений проекта.

  2. blender/myproject. Содержит исходные файлы сцен проекта.

  3. deploy/assets/myproject. Содержит экспортированные файлы сцен проекта.

  4. deploy/apps/myproject. Содержит экспортированные файлы сцен проекта.

Кроме того, операция развёртывания (deploy) может создавать ещё одну директорию, однако она обычно располагается за пределами SDK и её название и расположение зависит от структуры директорий на конечном сервере.

Конфигурационный файл проекта (.b4w_project)

Конфигурационный файл проекта включает всю необходимую информацию о проекте, в том числе его заголовок, метаданные, каталоги, а также информацию для сборки и размещения приложения.

[info]
author = Blend4Web
name = myproject
title = MyProject
icon =

[paths]
assets_dirs = deploy/assets/myproject;
blend_dirs = blender/myproject;
blender_exec = blender
build_dir = deploy/apps/myproject
deploy_dir =

[compile]
apps =
css_ignore =
engine_type = external
ignore =
js_ignore =
optimization = simple
use_physics =
use_smaa_textures =
version =

[deploy]
assets_path_dest = assets
assets_path_prefix = assets
ignore =
override =

Это станадртный конфигурационный INI-файл, состоящий из разделов, включающих параметры и их значения.

Section [info]

Содержит метаданные проекта:

author

Имя автора проекта или название компании-разработчика проекта.

name

Имя проекта

title

Название проекта. Это имя будет показываться в заголовке веб-браузера.

icon

Пиктограмма проекта.

Section [paths]

Containts project paths:

assets_dirs

Каталоги, в которых располагаются медиаресурсы проекта.

blend_dirs

Каталоги, в которых располагаются blend-файлы проекта.

blender_exec

Путь к исполняемому файлу Blender.

build_dir

Каталог, содержащий скомпилированный проекта.

deploy_dir

Каталог развёртывания проекта.

Section [compile]

apps

Приложения проекта.

css_ignore

Список исключений для компиляции таблиц стилей проекта.

engine_type

Тип собираемого проекта.

ignore

Список исключений для сборок проекта.

js_ignore

Список исключений для компиляции JavaScript-файлов проекта.

optimization

Уровень оптимизации javascript.

use_physics

Указывает, использует ли проект физику. Использования физики включено по умолчанию.

use_smaa_textures

Указывает, использует ли проект текстуры SMMA. Не используется на данный момент.

version

Версия проекта.

Section [deploy]

assets_path_dest

Каталог, который будет содержать медиаресурсы размещённого проекта.

assets_path_prefix

URL-префикс пути к папке медиаресурсов размещённого проекта, возвращаемый функцией get_std_assets_path().

ignore

Список исключений для размещения проекта.

override

Заменить существующую директорию вывода при развёртывании. Использовать с осторожностью.

Section [url_params]

Необязательный раздел настроек проектов для Веб-плеера. Содержит URL-параметры, применяемые при запуске приложения.

Создание проекта

./project.py init myproject

Команда создает проект с указанной именем в текущей директории. По умолчанию в директории проекта будет находиться только конфигурационный файл.

Доступные опции:

  • -A | --copy-app-templates (необязательная) создает в директории проекта стандартные шаблоны приложения (<имя проекта>_dev.html, <имя проекта>.js, <имя проекта>.css).

  • -B | --bundle (необязательная) все файлы проекта будут размещены в одной директории.

  • -C | --author (необязательная) записывает в конфигурационный файл имя автора или компании.

  • -o | --optimization (необязательная) записывает в конфигурационный файл тип оптимизации скриптов.

  • -P | --copy-project-script (необязательная) создает скрипт project.py в директории проекта.

  • -S | --copy-scene-templates (необязательная) создает в директориях deploy/assets/<имя проекта> и blender/<имя проекта> (необязательная) стандартные шаблоны сцены (<имя проекта>.json/.bin и <имя проекта>.blend соответственно).

  • -T | --title" (необязательная) записывает в конфигурационный файл заголовок проекта. При сборке он будет добавлен в html-тэг <title>.

  • -t | --engine-type (необязательная) записывает в конфигурационный файл тип собираемого приложения.

Пример:

./project.py init -AS -C Blend4Web -o simple -T MyProject -t external myproject

Данная команда создаст директорию myproject, в которой будут находиться файлы: myproject.js, myproject.css, myproject_dev.html и .b4w_project.

Файл .b4w_project будет выглядеть следующим образом:

[info]
author = Blend4Web
name = myproject
title = MyProject
icon =

[paths]
assets_dirs = deploy/assets/myproject;
blend_dirs = blender/myproject;
blender_exec = blender
build_dir = deploy/apps/myproject
deploy_dir =

[compile]
apps =
css_ignore =
engine_type = external
ignore =
js_ignore =
optimization = simple
use_physics =
use_smaa_textures =
version =

[deploy]
assets_path_dest = assets
assets_path_prefix = assets
ignore =
override =

Разработка нескольких приложений в составе проекта

В проекте может содержаться несколько приложений. Для этого необходимо в конфигурационном файле указать соответствующие HTML-файлы через точку с запятой:

...
[compile]
apps = myapp1;myapp2;
...

Сборка проекта

python3 project.py -p myproject compile

Собирает проект в директории deploy/apps/myproject.

Доступные опции:

  • "-a | --app" (необязательная) указывает на HTML-файл, относительно которого будет собираться приложение для проекта.

  • "-c | --css-ignore" (необязательная) добавляет в исключения стили, которые не будут скомпилированы.

  • "-j | --js-ignore" (необязательная) добавляет в исключения скрипты, которые не будут скомпилированы.

  • "-o | --optimization" (необязательная) используется для указания метода оптимизации js-файлов. Доступные варианты: whitespace, simple (по умолчанию) и advanced.

  • “-t | –engine-type” (необязательная) определяет тип компилируемого приложения. Доступны четыре варианта: external (по умолчанию), copy, compile и update.

  • "-v | --version" добавляет версию к адресам скриптов и стилей.

Требования, накладываемые компилятором:

  • В корне директории должен находится единственный html-файл, если не указана опция -a.

  • Скрипты и стили могут находиться как в корне проекта (приложения), так и во вложенных папках.

Автоматический экспорт blend-файлов

python3 project.py -p myproject reexport

Повторно экспортирует blend-файлы в форматах JSON и HTML.

Доступные опции:

  • "-b | --blender-exec" путь к исполняемому файлу blender.

  • "-s | --assets" определяет директорию с ресурсами сцены.

Конвертация ресурсов

python3 project.py -p myproject convert_resources

Конвертирует внешние ресурсы (текстуры, звуковые и видео-файлы) проекта в альтернативные форматы для обеспечения кроссбраузерности и кроссплатформенности.

Доступные опции:

  • "-s | --assets" определяет директорию с ресурсами сцены.

Более подробно о процессе конвертации ресурсов сказано в соответствующем разделе.

Развертывание проекта

python3 project.py -p myproject deploy DIRECTORY

Сохраняет проект во внешнюю директорию со всеми необходимыми зависимостями.

Доступные опции:

  • "-e | --assets-dest" задаёт директорию для файлов ресурсов (по умолчанию “assets”)

  • "-E | --assets-prefix" задаёт URL-префикс для файлов ресурсов (по умолчанию “assets”)

  • "-o | --override" удаляет директорию, если она существует.

  • "-s | --assets" записывет в конфигурационный файл путь к файлам ресурсов.

  • "-t | --engine-type" (необязательная) записывает в конфигурационный файл тип движка.

Удаление проекта

python3 project.py -p myproject remove

Удаляет проект. Удаляемые директории берутся из конфигурационного файла.

Обновление приложений на новые версии SDK

В процессе обновления на новые версии движка чаще всего возникает две проблемы:

  1. Несоответствие модулей новой и старой версии движка.

  2. Несоответствие старых и новых API движка.

Для того, чтобы обновить список модулей, подключаемых в необфусцированной версии приложений, необходимо перейти в директорию с исходными файлами приложений apps_dev/my_project. Затем необходимо вызвать скрипт, генерирующий пути к файлам движка:

python3 ../../scripts/mod_list.py

Для пользователей ОС Windows:

python ..\..\scripts\mod_list.py

Примечание

Стоит отдельно отметить, что для запуска скриптов требуется интерпретатор языка Python версии 3.x

В консоли появится список модулей, которые необходимо скопировать и вставить в главный HTML-файл:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" src="../../src/b4w.js"></script>
    <script type="text/javascript" src="../../src/anchors.js"></script>
    <script type="text/javascript" src="../../src/animation.js"></script>
    <script type="text/javascript" src="../../src/assets.js"></script>
    <script type="text/javascript" src="../../src/batch.js"></script>
    <script type="text/javascript" src="../../src/boundings.js"></script>
    <script type="text/javascript" src="../../src/camera.js"></script>
    . . .
</head>

Несоответствие API решается рефакторингом кода приложения. Все изменения подробно описываются в замечаниях к релизам.