基于Unity WebGL的海洋平台建造虚拟仿真系统

吕建军， 徐仁桐， 郑菊艳

(上海船舶工艺研究所， 上海 200032)

0 引 言

随着信息技术的发展，虚拟仿真实训在教育培训行业的应用越来越广泛。近年来，国内许多高校都建立了虚拟仿真实验室[1]，用于教学、培训和展示。利用虚拟仿真技术搭建具备视、听、触等多种感知的虚拟试验环境，培训人员可通过使用交互设备进行试验模拟，与虚拟对象实时交互，有效地提高实训效果。然而，目前大部分虚拟试验都在实验室进行，实验室场地和设备有限，实训教学的广度和深度易受限制。如果采用网络方式，将虚拟试验发布到网络端，学员就可以随时随地地参与到仿真试验中，快速地获取专业知识和技能，且可在试验后台评定成绩，有效监控实训效果。

Unity 3D作为一款市场占有率较高的仿真引擎，主要应用于PC端和移动端。新版Unity 3D提供了对WebGL技术的支持，能够将PC端和移动端的软件迁移至WebGL网页端，但网页端对模型的数量要求苛刻，模型面片达到一定数量就会卡顿。本文采用内存分配优化技术进行模型动态加载，可大幅提升软件性能。利用Unity 3D开发一套基于WebGL的网络版海洋平台虚拟仿真系统[2]，以海洋石油981数字样船为建造对象，进行海洋平台组立建造、分段建造、总段建造、搭载、下水、试验等网络模块的开发，通过后台服务器管理系统控制仿真任务内容和仿真工艺信息，便于统一管理。

1 系统总体设计

1.1 功能设计

系统主要针对海洋平台建造场景及交互对象进行三维建模[3]，根据建造工艺规则，将船体零部件按照工艺顺序进行节点拆解，设计数字样机控制工艺步骤，同时控制场景模型的动作，并借助人机交互界面，进行工艺信息的介绍，帮助培训人员熟悉建造工艺细节。

系统主要功能[4]包括用户信息管理、仿真任务管理、三维建造交互等。

(1) 用户信息管理。对用户权限进行管理，主要包括管理员、教师、培训人员。用户个人信息主要记录用户仿真操作的历史成绩及每个步骤的细节。

(2) 仿真任务管理。教师可控制仿真任务数量，让培训人员登录至指定模块，便于教学管理。

(3) 三维建造交互。控制零部件节点按照正确的顺序进行建造仿真。在建造过程中，可弹出关联性的考题供测评。在仿真任务完成后，弹出操作成绩及工艺流程图。

1.2 结构设计

该系统基于B/S架构开发，主要由服务端和Web客户端组成。服务端主要负责海洋平台仿真数据和虚拟场景管理。Web客户端用于仿真实训操作。系统结构如图1所示。

图1 系统结构示例

1.3 界面设计

设计一套用户界面(User Interface，UI)框架，使所有面板继承于公共基类BasePanel，并通过DoTween动画组件控制界面切换的动态效果。BasePanel面板有页面显示、暂停、继续、退出等4种状态。将状态函数写成虚函数并在子类中实现。

通过UIManager对Panel进行统一管理，其主要功能如下：

(1) 保存所有界面面板信息，通过Json读取Panel的名称、路径、预设等信息；

(2) 进行面板切换控制，运用堆栈的PushPanel、PopPanel方法进行页面切换；

(3) 管理所有面板的动态实例。

系统界面逻辑设计如图2所示。

图2 界面逻辑设计

2 关键技术

2.1 WebGL渲染

WebGL是一种三维绘图协议，为网页添加OpenGL特性支持，从而实现3D图形渲染[5]。与使用WebPlayer需要先安装浏览器插件相比，在使用WebGL时，无需额外的插件支撑便可实现Web交互式三维渲染，提高软件使用的便捷性。

在Unity中，WebGL通过il2cpp.exe将.NET IL中间语言编译成C++源码，然后通过各平台的C++编译器进行编译，达到跨平台访问的目的。对于C++源码，Unity支持asm.js和WebAssembly(或称“wasm”)两种转化方式，asm.js 是文本格式，wasm是二进制格式。考虑到二进制运行速度更快、体积更小，采用wasm方式进行转化。wasm是基于堆栈虚拟机的二进制格式，通过编译程序源码可将程序部署在Web端。以Windows平台为例，利用底层虚拟机LLVM Emscripten编译器将C++编译成.wasm文件。wasm不能直接被浏览器识别，需要通过JavaScript接口进行页面加载，从而实现3D图形网页渲染。WebGL原理如图3所示。

图3 WebGL原理

2.2 工艺编辑

海洋平台建造仿真工艺信息是培训的重点，在实际培训教学中，可能会根据需要进行动态编辑修改，例如增加工艺细节、图文描述、工艺知识点考题等，以达到多样化教学的目的。针对海洋平台建造对象和阶段进行分类，设计工艺编辑功能，可动态控制仿真逻辑工艺，Web前端可实时获取最新的工艺数据。将仿真节点按照名称进行排列，并设定顺序码，添加工艺描述，或增加图片路径，然后存储为Json格式文件。Web前端通过JsonUtility.ToJson解析Json文件，将其转成目标类，并根据名称绑定至模型结构树相应节点，从而控制仿真工艺。具体流程如图4所示。

图4 工艺编辑流程

2.3 虚拟仿真样机

为便于控制船体零部件节点，使不同种类的零部件操作具有相同的交互机制，需设计虚拟样机。将Json数据和模型输入虚拟样机，经过模型、数据的关联处理，产生交互式的建造逻辑[6]，形成具有建造顺序、吊装路径、吊装动画、工艺描述于一体的建造仿真流程[7],如图5所示。

图5 虚拟样机建造仿真流程

2.4 内存分配优化

在Unity发布程序至Web端时，船体模型量巨大会导致程序包体积大，这样在浏览器加载时易导致内存消耗过大而崩溃。在Unity WebGL程序运行时，浏览器会分配多个内存空间区域(见图6)，其中DOM、Unity堆、资源数据和代码会在访问网页时一直存储在内存中，而其他的例如AssetBundle、WebAudio等资源会根据用户选择按需加载。为此，除了将资源数据和代码量控制到最小外，通常还有减小Unity堆大小和数据动态加载2种方式优化Unity内存分配。

图6 Unity WebGL程序内存分配

2.4.1 Unity堆控制

Unity堆是用来存储对象、组件、纹理材质、Shader等的内存，其内存分配情况如图7所示。

图7 Unity堆内存结构

在程序运行中，动态内存区域会不断地存储数据和回收数据。在程序发布前，需要事先设定Unity堆的大小，其关键代码为buffer=new ArrayBuffer(TOTAL_MEMORY)，其中TOTAL_MEMORY为设定的大小。内存设定过大，易造成内存溢出；内存设置过小，易造成程序执行缓慢。为此，有必要设定一个合理的数值控制内存量。考虑到Unity无法直接得知程序占用内存大小，可采用Emscripten编译器先获取Unity堆内存的实际大小，再设定一个合理的数值。其中，Emscripten编译器采用jslib库获取内存实际占用值(静态内存+栈内存+动态内存)。运行过程如图8所示。

图8 Unity堆内存大小获取示例

2.4.2 数据动态加载

采用数据动态加载技术可直观地减小场景数据资源包的大小，减少浏览器加载负担。Unity动态加载资源有Resources和AssetBundle两种方式。Resources资源只能打包至程序中发布，并不会减小场景数据资源包大小。可采用AssetBundle作为数据加载资源，该方式的优点是可将场景中的对象、组件、材质、场景树都打包为.assetbundle包，而不需要单独加载各独立元素再合并。可将不同场景数据分别打包为.assetbundle，并存放至服务端指定目录下。Web前端在初始加载时只加载内存较小的基础程序，当用户选择指定场景后，加载相应的场景包，关键代码如下：

//path为assetbundle的路径

using (UnityEngine.Networking.UnityWebRequest uw =UnityEngine.Networking.UnityWebRequestAssetBundle.GetAssetBundle(path))

{

yield return uw.SendWebRequest();

if (uw.isNetworkError || uw.isHttpError)

{

print(uw.error);

}

else

{

AssetBundle ab = UnityEngine.Networking.DownloadHandlerAssetBundle.GetContent(uw);//得到ab包

UnityEngine.SceneManagement.SceneManager.LoadScene(sceneName);//sceneName为目标场景名

ab.Unload(false);//释放AssetBundle文件内存镜像

}

}

通过该代码，可将不同场景数据资源包动态加载至本机内存，实现按需加载，在加载完毕后及时释放内存。

3 系统应用

为验证该系统的实际效果，将其应用至高校的海洋平台建造仿真实验室中。通过搭建校内局域网、部署后台服务端，用户可直接通过网址访问前后端程序。该系统加载快、运行流畅、工艺流程清晰，能够满足教学培训要求。系统应用效果如图9和图10所示。

图9 服务端结构树

图10 三维虚拟仿真界面

系统采用内存分配后可进行浏览器内存优化，但由于每个浏览器都有最大支持内存限制，因此当开启多个WebGL仿真软件时，浏览器可能会出现崩溃现象。解决方法是建议从仿真模型本身着手，采用细节层次、低模高烘等技术优化模型本身，再配合内存分配优化方法，可有效减少浏览器的程序包加载量，提升浏览器的整体流畅度。

4 结 论

以海洋石油981数字样船建造为研究对象，基于Unity WebGL进行网页端仿真程序的开发。将复杂的船舶建造流程以三维可视化的方式模拟出来，有助于学员深入了解船舶整体结构和建造工艺信息，从而快速掌握船舶建造知识。突破Web端开发过程中的WebGL渲染、内存分配优化等技术难点，并针对海洋平台建造仿真，创新性地设计工艺编辑器和虚拟样机，方便系统的开发和后期扩展、维护。系统应用后证明，Web端海洋平台建造虚拟仿真系统能够基本满足教学要求[8]，同时所提出的关键技术解决方案对Unity网页端开发起到一定的参考作用。