项目管理

自版本 15.09,SDK 中包含一种项目管理功能,使它成为可能 ︰

  • 浏览完整列表和文件结构的项目;

  • 启动应用程序,在查看器中运行导出的场景,在Blender中打开blend文件;

  • 创建和配置新的应用程序,包括那些基于现成的模板;

  • 构建应用程序和并打包方便地部署在远程的服务器;

  • 将应用程序资源 (纹理、 音频和视频文件) 转换为其他格式,以确保跨浏览器和跨平台的性能;

  • 自动重新导出应用程序的所有场景,包括导出到 JSON 和 HTML 格式;

  • 删除项目。

项目管理器

SDK的首页的 工具 项中可以运行 项目管理 应用 。启动后,该应用程序将输出 SDK 中的所有当前项目列表。

项目管理的命令位于页面的顶部。

_images/project_manager_actions.png
返回首页

返回到 Blend4Web SDK 索引页。

新建工程

打开 项目创建 向导。

导入项目

打开 project import 对话。

导出项目

打开 project export 页。

隐藏项目

可以用来隐藏项目。如果已经隐藏了此类项目,则此命令替换 显示项目 命令。

帮助

打开 帮助文件.

用于管理特定项目的命令在它的右侧。

注解

根据项目的类型的一些命令可能无法使用。

_images/project_manager_commands.png
  1. 编译项目 (WebPlayer JSON 和 WebPlayer HTML 项目不可用)。

  2. 检查是否缺少或不必要的API模块(WebPlayer JSON 和 WebPlayer HTML 项目不可用)。

    激活此选项将使项目管理器检查应用程序使用的模块,并将检查结果的结果输出到控制台。可能的警告消息如下:

    1. 如果一个或多个API模块从项目的文件夹中丢失,将会显示以下信息:

    模块 ‘module_name’ 在 ‘project_name.html’ 项目丢失,请包括它或运行 `Update Modules`.

    _images/project_manager_check_modules_missing.png

    这些缺失的模块可以被添加到项目中的 Update Modules 按钮

    1. 如果项目具有未在程序代码的任何地方使用的一个或多个的API模块,将显示以下信息:

    在 `project_name.html` 中的 `不正确的模块 `module_name` , 请删除它或运行 `Update Modules`.

    _images/project_manager_check_modules_required.png

    这些不正确的模块可以从项目中用 “更新模块” 按钮删除。

    1. 在已检测缺失/不需要的模块没有任何问题的情况下,将显示以下信息:

    模块检查完毕。在 `module_name.html`. 中检测到没有问题

    _images/project_manager_check_modules_complete.png
  3. 从项目重新导出blend文件。

  4. 转换媒体资源。

  5. 导出和下载项目档案。

  6. 移除项目

注解

项目的所有路径都是从它的.b4w_project 文件中检索。

该项目的名称旁边,有链接到 项目信息页面 。这里也指定应用程序类型。应用程序可以具有下列类型之一:

播放器

可以使用 Web 播放器播放应用程序。

开发

开发中的应用。

构建

编译应用程序。

项目创建向导

该工具用于创建新的项目是列入项目管理应用程序中,由主页面上 [Create New Project] 按钮执行。

_images/project_manager_create_project.png

[Back to Projects] 按钮可以用来返回到项目管理的主页面,而 [Help] 按钮可以用到访问 帮助文件.

  1. 项目名称习惯为 “apps_dev/project_name”, “deploy/assets/project_name”, “blender/project_name” and “deploy/apps/project_name” 等名称的项目目录。

  2. 在浏览器中所示的项目标题。

  3. 项目作者的名字。

  4. 添加应用程序模板。标准应用程序模板 ︰ html 文件,css 文件,js 文件将添加到项目目录 “apps_dev/project_name”.

  5. 添加场景模板。标准的 json 文件将添加到 “deploy/assets/project_name” 目录;blend文件将添加到 “blender/project_name” 目录。

  6. 使用材质库。材质库的Blend文件会复制到项目文件夹 “blender/project_name”,资产文件复制到 “deploy/assets/project_name” 目录。

  7. 复制项目管理脚本。Project.py 脚本将复制到项目目录。

  8. 所有的项目文件将位于相同的目录中。在小项目中最好使用此选项,如课程和范例。只有 Web Player JSONWeb Player HTML 项目类型可以用此选项。

  9. 项目的类型。有几个选项 ︰

    • External - 项目管理器将使用引擎文件在 deploy/apps/common/ 目录下运行项目。

      当项目部署时,只有应用程序文件将被编译。deploy/apps/common/ 文件夹将被复制到项目目录。

      如果您不需要以任何方式更改引擎文件使用此选项;

    • Copy - 引擎文件将直接从 deploy/apps/common/ 目录复制到应用文件夹。

      当项目展开时,唯一的应用程序文件进行编译,而引擎文件仍保持不变(所以你不能修改引擎本身);

    • Compile -引擎源代码应用程序的脚本一同编译;

      这个选项可以用于修改引擎本身的代码;

    • None -项目管理器不会将引擎文件复制到应用程序文件夹,也不将它执行任何操作生成应用程序。应用程序开发人员将不得不手动执行他们所需要的一切;

    • Web Player JSON - 项目下的 json 文件通过SDK里的web播放器播放;

    • Web Player HTML - 项目被打包到单独的 html 文件,包含所有所需的资源。

  10. Javascript 优化级别。

    • “简单” — — 变量的名称替换代码;

    • “先进” — — 进行了代码优化;

    • “只空格” — — 只有空格从代码中移除。

  1. 网络播放器的URL属性。此选项卡仅当 Engine Binding Type 参数设置为 Web Player JSONWeb Player HTML 时可用。

    • “显示FPS” 用于显示在玩家的右上角的FPS计数器。

    • “自动旋转摄像头” 让场景加载后立即自动旋转相机。

    • “禁用社交网络按钮” 禁用控制面板上的社交网络按钮。

    • “背景透明” 启用渲染区域的透明度。

    • “使用压缩纹理” 使精缩和压缩纹理加载(以DDS格式)。

创建一个 Web 播放器应用程序

网络播放器应用的主要优点是易于在网站上部署这种应用。

_images/project_manager_create_web_player_project.png

创建一个Web Player应用程序很简单。所有你需要做的,当创建一个新的项目选择时在引擎绑定类型面板下面选择 Web Player JSONWeb Player HTML 选项。

可用于在Web播放器项目的参数大多是和任何其他类型的项目一样的。唯一的例外是被称为网络播放器PARAMS组参数。

项目设置

_images/project_manager_web_player_parameters.png

如果 Web Player JSONWeb Player HTML 选项已启用,此面板才可用。这里列出的参数在本质上是运行该项目的Web播放器应用程序将使用的URL。

部署项目

您完成您的项目后,在项目管理器的主页面从 Operations 面板选择 deploy project 选项。该项目将被导出,打包成一个单一的存档,并下载到您的网页浏览器存储所有下载文件的文件夹。

若要将项目放在网页上,你必须提取此文档,并用FTP,SSH或由支持的任何其他协议服务上传文件(html 文件和 assets 目录)发送到Web服务器。

注解

将项目文件上传到Web服务器上,应保留对其文件的归档和相关路径的内部结构。

一个Web播放器的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文件,它是使用的Web应用程序播放器,并包含实际场景中的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

命令

回到项目

返回到项目管理的主页面。

帮助

打开 帮助文件.

项目参数

项目名称

项目名称

项目的标题。

在浏览器中所示的项目标题。

项目作者 / 公司

该项目的作者或开发商公司的名称。

项目图标

该项目的图标。

应用程序

项目应用程序。

引擎绑定类型

设置项目类型

项目路径 (开发目录)

项目的目录。

项目配置

项目的配置文件。

构建目录

项目构建目录。

Blend 目录

项目的blend文件目录的位置。

资产目录

项目的媒体资产所在的位置目录。

URL 参数

URL 参数 列表用来启动应用程序。

JavaScript 混淆级别

Javascript 优化级别。

JS编译通过列表

该项目的JavaScript文件汇编直通例外列表。

CSS编译通过列表

该项目的样式表编译直通例外列表。

构建忽略列表

项目编译中的例外列表。

部署资产目录

资产将被放置部署项目的目录。

部署资产URL前缀

get_std_assets_path() 所报告的资产目录部署项目中URL路径前缀。

部署忽略列表

项目的部署例外列表。

项目编辑

简单的基于Web的界面可以编辑项目文件,通过项目的标题旁的 [编辑] 链接。

_images/project_manager_edit_project.png

编辑窗口的左侧部分包含所有 .html从项目目录.css.js 文件的列表(./apps_dev/ <project_name>),开始与主体工程文件 .b4w_project 。右侧包含当前选定的项目文件与高亮的语法内容(没有文件默认情况下选中)。

注解

这个界面可以仅用于编辑项目的开发版文件,但不能编辑建建好的版本。

可在页面底部找到了 Save File 按钮用来保存当前选定的项目文件。

项目导入

导入项目工具是在 [Import Project(s)] 链接

点击该链接会打开标准的文件开启对话框,你可以选择需要导入的项目。

项目导出

项目输出窗口可以通过 [Export Project(s)] 链接访问。

_images/project_manager_export.png

命令

回到项目

返回到项目管理的主页面。

隐藏项目

隐藏项目。如果已经隐藏了此类项目,则此命令替换为 [显示项目] 命令。

帮助

显示帮助页。

导出项目

可以用来导出所选的项目。

项目参数

选择

显示项目是不是选择了要导出。

名字

该项目的目录的名称。

名称

项目的标题。

作者

项目作者的名字。

档案名称

导出的项目打包的档案名称。

高级项目管理

高级项目管理器由经验丰富的开发人员使用,在需要更多的灵活性和需要自动化项目开发过程中使用。

高级项目管理器使用 project.py 脚本并手动编辑 .b4w_project 配置文件。

Project.py 脚本可以在 Blend4Web SDK 目录文件夹的 ../apps_dev/ 目录下找到。

依赖

项目管理系统在所有操作系统都可用。但是,某些操作可能需要安装附加依赖项。为了检查是否满足所有依赖项,请使用以下命令 ︰

./project.py check_deps

对于MS Windows用户:

python project.py check_deps

对于脚本运行它需要安装Java和 设置PATH系统变量.

注解

Java 是默认包含在 Windows 版本的 SDK。在 Linux 和 macOS 它应该手动安装。

Resource Converter 也使用其自己的描述的外部工具集,在 另外章节 描述.

项目清单

可以用下面的命令查看的 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. 包含项目的场景导出的文件。

此外,部署命令可以创建另一个目录中,但它通常放置在 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配置文件,其中包含的部分,属性和值。

模块 [info]

包含项目的元数据:

作者

该项目的作者或开发商公司的名称。

名字

项目名称

名称

在浏览器中所示的项目标题。

图标

该项目的图标。

Section [paths]

包含项目路径:

assets_dirs

项目的媒体资产所在的位置目录。

blend_dirs

项目的blend文件目录的位置。

blender_exec

Blender的可执行文件路径。

build_dir

项目构建目录。

deploy_dir

项目部署的目录。

Section [compile]

apps

项目应用程序。

css_ignore

该项目的样式表编译直通例外列表。

engine_type

设置项目类型

ignore

项目编译中的例外列表。

js_ignore

该项目的JavaScript文件汇编直通例外列表。

优化

Javascript 优化级别。

use_physics

指示您的项目是否使用物理或没有。默认 - 使用物理。

use_smaa_textures

指示您的项目是否使用SMAA纹理与否。当前未使用。

version

项目版本。

Section [deploy]

assets_path_dest

资产将被放置部署项目的目录。

assets_path_prefix

get_std_assets_path() 所报告的资产目录部署项目中URL路径前缀。

ignore

项目的部署例外列表。

override

在部署阶段替换现有的输出目录。请谨慎使用。

Section [url_params]

网络播放器项目的可选部分。 包含 URL 参数 来启动项目应用.

创建项目

./project.py init myproject

此命令将创建在当前目录指定名称的项目。默认情况下,项目目录只包括一个配置文件。

可用参数:

  • -A | --copy-APP-templates (可选)创建项目目录的标准应用模板 (<my_project_name>_dev.html, <my_project_name>.js, <my_project_name>.css).

  • -B | --bundle (可选)所有项目文件将被放置在一个单独的目录。

  • -C | --author (可选)写作者的还是公司的配置文件名。

  • -o | --optimization (可选)写在配置文件中的脚本优化级别。

  • -P | --copy项目-script (可选)在项目目录中创建 project.py 脚本的副本。

  • -S | --copy-场景templates (可选)创建目录 deploy/assets/<my_project_name>blender/<my_project_name> (<my_project_name>.json/.bin<my_project_name>.blend 相应的).

  • -T | --title" (可选)写在配置文件的标题。编译时,里面将使用 <title> HTML元素。

  • -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" (可选)添加CSS样式异常为了不编译它们。

  • "-j | --js-ignore" (可选)添加脚本例外为了不编译它们。

  • “-o | --optimization” (可选)指定JavaScript文件的优化级别: whitespacesimple (默认)或 advanced

  • "-t | --engine-type" (可选)定义的应用程序编译类型。四种型号可供选择: external (默认), copy, compile, update.

  • “-v | --version” 加版本和脚本和样式的路径。

编译器要求

  • 在一个HTML文件必须存放在目录的根目录如果 -a 选项被禁用

  • 脚本和样式可以存储在应用程序的根目录和子文件夹中

自动 Blend 文件导出

python3 project.py -p myproject reexport

此命令将重新导出混合在 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" 资产目的地目录(“资产” 默认情况下)。

  • "-E | --assets-prefix" 资产网址前缀(默认情况下“资产”)。

  • “-o | --override” 如果它存在删除目录。

  • “-s | --assets” 用场景资源指定目录。

  • -t | --engine-type (可选)写在配置文件中的引擎类型。

移除项目

python3 project.py -p myproject remove

删除的项目。被删除的目录是从项目配置文件检索。

应用程序升级新版本的SDK

当升级新的SDK版本往往两个问题就出来了:

  1. 引擎的新和旧版本的模块不匹配。

  2. 旧的和新的引擎API不匹配。

为了更新应用程序的开发者版本导入模块列表转到项目源代码目录 apps_dev/my_project 和执行模块列表生成脚本:

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

对于MS 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 不兼容性可能需要重构您的应用程序。所有的改变放在了 发行说明.