韦维

[摘 要] 虚拟仿真实验是利用现代数字媒体技术服务教学、提高教学效果的重要技术手段。采用网页与网络数字媒体技术的在线三维虚拟仿真实验教学项目，能够充分发挥移动数字媒体的便捷性、交互性和社交性等优势，让实验教学共享化、开放化。WebGL是在线三维虚拟仿真实验项目的核心技术，随着近年来大量的JS三维交互引擎、在线制作平台的出现，极大地降低了设计和开发难度，甚至可实现免编程的可视化交互设计，为虚拟仿真实验项目的开发提供了丰富的技术工具。

[关键词] WebGL;虚拟仿真;实验教学;在线教学

[基金项目] 2019年度广西艺术学院高等教育改革工程立项项目“虚拟仿真实验在传媒类专业课程教学中的应用研究”（2019JGY49）

[作者简介] 韦 维（1981—），男（壮族），广西柳州人，艺术学硕士，广西艺术学院影视与传媒学院广告学系助理研究员，主要从事互动广告、数字媒体技术研究。

[中图分类号] C229.29   [文献标识码] A   [文章编号] 1674-9324（2021）26-0108-04   [收稿日期] 2021-03-23

2017年以来，教育部大力推进虚拟仿真实验室的建设，在中共中央办公厅、国务院办公厅印发的《加快推进教育现代化实施方案（2018-2022年）》文件中，要求加快推进智慧教育创新发展，开展国家虚拟仿真实验教学项目等建设。2020年11月3日，教育部发表《新文科建设宣言》，提出要积极推动人工智能、大数据等现代信息技术与文科专业的深度融合，积极发展文科类新兴专业，推动原有文科专业改造升级，实现文科与理工农医的深度交叉融合，打造文科“金专”，不断优化文科专业结构，引领和带动文科专业建设整体水平的提升。2021年全国两会前夕，民革中央向全国政协十三届四次会议提交了《关于升级虚拟仿真实验教学，更好服务创新型人才培养的提案》。因此，把虚拟仿真技术有效地融入教学活动，既符合国家坚定文化自信的发展策略，也是教育改革和创新的重要内容。

虚拟仿真实验是指综合各种数字多媒体、信息网络、虚拟现实等当今各种先进的媒体技术来服务教学活动的一种教学实验方式。2002年，美国新媒体联盟（New Media Consortium，NMC）主导的“地平线研究项目”预测和描述了对教育教学产生重要影响的新兴、主流和最有前景的教育信息化技术及其发展趋势。其按年度、分系列发布的《国际教育信息化地平线报告》被视为教育信息化建设与发展的风向标，备受世界各国教育界的关注[1]。2016年前后，多个虚拟现实、增强现实设备投入商用，相关硬件设备及技术落地，虚拟现实技术所带来的沉浸式体验给虚拟仿真教学带来了新的可能，也伴随着虚拟现实技术的热潮让虚拟仿真实验教育得到更多的重视和发展。

WebGL（Web Graphics Library）是网页构建语言Html（HyperText Markup Language）相关技术体系中负责高性能图形渲染的接口，为网页提供直接调用显卡（GPU）进行复杂图形渲染的指令通道，从而提高网页的图形渲染效果和性能，是基于Html技术实现在线三维交互内容的核心技术。随着具有较高兼容性的Html 5.0和WebGL 2.0的出现，以及移动媒体硬件性能的提高，以手机、平板为主的移动媒体也能够进行一定的三维图像渲染，给在线虚拟仿真实验项目的设计和开发带来了可能。

一、在线三维虚拟仿真技术的优点

虚拟仿真实验能够有效提高教学质量，要发挥好网络信息技术、虚拟现实、混合现实、全景影像等新兴媒体表现技术的优势，通过立体视觉、三维空间、人机交互等方式，提供超越以往的沉浸式认知和学习体验。沉浸式体验的学习方式能够让教学内容从抽象的理论知识和课本中走出来，以具象、动态、多视角的方式与学生互动，从而提高学习效果。目前，常见的提高沉浸式体验的单项技术有双目视觉、全景视觉、三维渲染、三维交互、体感交互等。虚拟现实就是大量地综合运用了这些技术，能够带来较完整和自然的沉浸式体验。虚拟现实技术虽然比沉浸式体验效果较好，但是发展到大众实用阶段还有一段距离，价格、软件和硬件都有一定的要求和限制，通常只能在固定的场所使用。这导致其不适用于对内容分享和传播有较高要求的领域，如新闻传播、广告活动等，也不适合一些需要通过线上分享形式传播的虚拟仿真实验项目。如果一条以新闻为内容的虚拟仿真作品在观看时还需要佩戴沉重的虚拟现实眼镜、下载安装指定的应用程序才能看到，那么就很难让这条新闻信息传播到大众当中。采用WebGL技术来创作和开发的在线三维虚拟仿真作品，可以像传统的网络页面那樣，通过手机、平板电脑等移动设备方便快捷地分享给其他用户。虽然WebGL目前的视觉表现力远比不上原生的App或本地程序，但是其利于信息传播的诸多特性非常适用于对画面渲染质量要求不高的虚拟仿真实验领域。其优点主要体现在以下几个方面。

1.跨平台、跨设备。Html5与WebGL都是构建网页的技术标准，由于其相对以往标准具有更先进性和兼容性，受到各大平台的支持，能够顺利在Windows、苹果、Linux跨系统访问，同时支持桌面电脑、手机、平板等多平台访问，既方便实验项目的使用，也方便项目的设计和开发。

2.便于分享和传播。使用WebGL设计与开发的虚拟仿真内容，在使用时不需要额外地安装软件，也不需要安装复杂的硬件设备，直接打开网站页面或者分享的链接即可使用。实验参与者也可随时分享给别人，二次分享传播非常方便，也很容易地迁移到微信小程序、小游戏的分享平台中，利用社交软件进行传播。

3.便于教学评估和评价。由于H5本身就是一种网页设计语言，能够发挥网站服务器的优势，结合大数据分析平台、人工智能等技术手段进行教学效果的评估和评价，虚拟仿真实验不再是一个个彼此独立的实验单元，而是一个可以进行大规模并行实验的“实验云”。

4.具有一定的沉浸式体验。三维视觉画面能够给实验者带来更多的实验观察角度，更接近自然世界的视觉体验，也能够提供更好的交互空间。H5技术范畴中负责图像和三维表现的WebGL技术虽然比不上专业的OpenGL、DirectX效果，但是随着计算机、手机显卡性能的提高，WebGL 2.0 已经能够提供具有实用价值的三维画面渲染，满足非三维演示性内容表现的需要。

二、在线三维内容的创作和开发模式

在传统的Html网页设计领域，由于对交互性、表现力要求不高，不需要使用三维图形接口WebGL，所以简单的网页设计与制作难度比较小。但是，当需要使用H5来制作在线的三维虚拟仿真实验项目时，由于需要使用WebGL进行三维图形渲染、贴图以及物理引擎等复杂的图形和交互开发，其创作的难度就提升了很多。为了提高开发效率，业界通常很少会直接使用GLSL进行开发，而是采用封装好WebGL功能的JS引擎进行开发。此外，随着当今媒体技术的发展，现在开始出现基于在线平台和免编程的在线三维交互内容的创建平台，降低了开发的难度。

（一）使用封装WebGL的JS引擎的开发模式

JS（JavaScript）是H5网页构建技术范畴中主要负责交互部分的脚本语言，也是控制图形渲染、与WebGL图形接口通信的语言。为了提高WebGL的开发效率，降低开发难度，出现了一些封装WebGL的JS引擎。这些引擎将WebGL开发过程中复杂的渲染流程封装为面向设计的接口，从而使开发者把更多的精力放在内容的设计上，而不必过多地关注底层的实现。目前，国内的JS引擎主要有三大引擎Cocos、Egret、LayaAir，国外的主要有ThreeJS、Babylon等。

1.Egret。Egret是白鹭科技的一套H5交互开发方案，包括Egret Engine等多个H5网页内容开发工具，其中一些优秀的软件给H5的创作带来了很多便利。例如，H5骨骼动画工具Dragon Bones、可视化H5交互创作软件LakeShore等。Egret是国内一个出现比较早的JS引擎，但是其目前的发展速度比较缓慢，开发者的社区活跃度不高;LakeShore已经停止更新两年多;EgretPro的稳定性还有待提高。

2.LayaAir。LayaAir是LayaBox推出的交互引擎，由于相对较早地提供了稳定的H5 3D渲染功能，在2018年微信开放小游戏平台后的第一年里，使用该引擎制作的3D微信小游戏占比超过93%。

3.Cocos。Cocos长期以来在2D游戏、交互领域被大量使用，在3D方面的发展比较慢，是国内三大引擎中最晚提供实用3D图形功能的引擎，直到2019年7月才推出支持H5 3D功能的CocosCreator3D。但是由于其在2D交互游戏开发领域积累的经验，其软件的稳定性和易用性相对较好。在2021年2月8日CocosCreator3.0发布后，整合了Cocos引擎的2D与3D两套产品功能，统一了开发流程。

4.Three.JS。Three.JS从2009年开始推出，是一个轻量级的Web GL引擎，也是目前中文资料最多、使用最广泛的3D引擎之一[2]。其核心库简洁高效，但仅仅是一个3D图形JS库，使用者需要自行解决3D图形之外的技术问题，如物理引擎、音频、输入控制等，此外还要自己配置开发环境等问题。

（二）使用在线Html5创作平台的创作模式

随着网络技术的发展，开始出现了一些能够在线编辑三维H5的平台。这些在线编辑平台主要面向初级使用者，提供了快速构建作品的各种工具，极大地降低了创作难度。其优势主要有：（1）快速便捷的设计与开发环境。只需网页浏览器就可以进行作品编辑，提供所见即所得的可视化编辑界面，免去传统开发模式烦琐的开发环境搭建步骤。（2）平台提供作品的云存储空间。在线平台上开发的内容，能够直接发布到平台提供的服务器存储空间上，免去导出和上传H5程序代码的过程，不用考虑搭建和维护服务器、域名管理等复杂的流程。

目前，能够实现在线Html5三维交互式内容创作的平台相对较少，能够实现的功能比较单一，如国内的IVX、国外的Playcavans。

1.IVX。IVX是国内的一个在线Html5交互内容创作平台，其平台本身拥有强大的Html5二维交互内容的创作能力[3]。在三维方面，该平台的最新版本能够实现复杂的三维模型、动画导入，支持法线贴图、高光贴图、光照贴图等复杂的渲染特性。平台还提供基于事件机制的可视化三维交互创作工具，使原有复杂交互内容的创作模式从程序员的编程开发模式转变为设计师的可视化创意设计模式。

2.Playcavans。Playcavans是国外的一个在线三维交互场景的创作平台，提供在线的可视化三维场景编辑器，提供模型、贴图导入等功能。该平台针对在线三维场景进行优化设计，易用性、稳定性相对IVX高一些[4]。

（三）国内外引擎和平台的主要优缺点

1.国内引擎功能强大，集成度高，但是整体比较臃肿。由于设计与开发模式的习惯和市场不同，国外引擎通常只提供简单的开发库，其他设计和开发环境需要使用者自己去配置和搭建，虽然自由度较大，但是学习成本高，开发效率较低。国内三大引擎Egret、LayaBox、Cocose都提供引擎库以外的IDE开发环境，提供所见即所得的可视化的三维空间设计编辑界面，IVX平台和Egret引擎甚至提供免编程的可视化交互创作工具，降低了学习和开发交互内容的门槛，使没有编程基础的人也能够顺利进行创作[5]。

2.国内引擎提供本地化服务，平台兼容性和适配性强。国内网络媒介生态除了普通的网站外，还有微信小程序、小游戏等社交应用内生态。近年来，各大手机厂商和软件都提供了自己的应用內生态平台，如华为推出了AppGallery Connect，阿里巴巴推出了支付宝小游戏，字节跳动推出了适配抖音、头条等App的字节跳动小游戏等。国内引擎通常会主动针对这些生态平台进行适配，能够快速地将作品集成和发布到这些平台中，便于App应用内的发布和分享。

三、提高沉浸式體验效果的设计方法

基于WebGL的三维Html5作品通常在浏览器中运行，受到浏览器、移动媒体性能等方面的影响，所能够分配到的计算性能、内存大小甚至带宽会受到系统严格的控制，获得的系统权限也会比较少，在设计和开发过程中，对前期的素材创作、导入等环节有特殊的要求。如果直接照搬传统其他行业的创作流程，就有可能出现模型面数过多、贴图文件太大等问题，达不到设计效果甚至无法正常地导入素材[6]。

1.交互设计方面。以手机为代表的移动媒体通常会具有相对弱的图形性能、纵向的屏幕，拥有触摸屏幕，可以实现复杂的多点触摸交互，拥有加速度传感器、卫星定位等丰富的环境感知硬件，但是缺少键盘和鼠标。在进行实验项目的交互设计时，可以考虑针对单一平台进行交互设计，以降低开发难度。

2.将高模转为低模。主流的三维建模方式，如多边形建模、数字雕刻等，这些方式所得到的模型多边形数量往往远超WebGL所能承受的限制。因此，在将三维素材导入WebGL项目前，通常需要对模型的多边形结构进行重新拓扑处理，以降低模型的多边形数量。与此同时，为了不丢失模型原有的细节，通常还会结合法线贴图、环境光遮挡贴图等纹理烘焙技术保持细节。

3.使用纹理烘焙技术。纹理烘焙是通过使用一些贴图文件来存储三维模型的多边形细节，以实现较低的计算性能得到高渲染效果的做法。它是采用非实时的预渲染的方式，把模型的细节、凸凹、光照等数据事先计算好，然后保存到法线贴图、环境光遮挡剔除等贴图文件，当需要实时渲染的时候，直接把这些贴图数据调出使用，不需要再次计算，极大地降低了运算量，是非常有效的、以低带宽成本换取渲染效果的技术。

四、结语

WebGL让虚拟仿真实验能够通过数字网络、移动媒体设备进行便捷的线上实验，具有一定的沉浸式三维交互体验，易于分享和传播。它还能够结合网站、大数据、云存储等技术，进一步优化实验教学环境，让虚拟仿真实验教学开放化、社交化和云端化。虽然目前WebGL才刚开始发端，还存在画面渲染效果简单、学习和开发成本较高等问题，但是随着移动媒体设备性能的提高、5G网络的普及、可视化免编程交互设计模式的出现，未来WebGL的学习难度和创作成本将逐渐降低，并能与虚拟现实、人工智能、物联网等新技术结合，给虚拟仿真实验教学带来更多的创新空间。

参考文献

[1]王卫国，胡今鸿，刘宏.国外高校虚拟仿真实验教学现状与发展[J].实验室研究与探索，2015，34（5）：214-219.

[2]王孟博，董泽，石轲，等.WebGL技术探索及几种基于WebGL的引擎比较[J].中国科技信息，2021，646（5）：89-90.

[3]段甲贵.西部地方高校《广告创意》虚拟仿真实验教学改革探索[J].国际公关，2019，95（11）：56-57.

[4]周世明.数字媒体环境下vr技术与广告学教学模式创新研究[J].数码设计，2017，6（5）：141-142.

[5]沈阳，逯行，曾海军.虚拟现实：教育技术发展的新篇章——访中国工程院院士赵沁平教授[J].电化教育研究， 2020，41（1）：5-9.

[6]高东锋，王森.虚拟现实技术发展对高校实验教学改革的影响与应对策略[J].中国高教研究，2016，278（10）：56-59.

Exploration on the Development Mode of WebGL Online 3D Virtual Simulation Experiment Teaching Projects

WEI Wei

（College of Film，Television & Media， Guangxi Arts Institute， Nanning， Guangxi 530022， China）

Abstract： Virtual simulation experiment teaching is an important technical means by using modern digital media technology to serve teaching and improve teaching effect. The online 3D virtual simulation experiment teaching project using web page and network digital media technology can give full play to the advantages of mobile digital media， such as convenience， interactivity and sociality， and make the experimental teaching shared and open. WebGL 2.0 is the core technology of online 3D virtual simulation experiment project. Although its native development method is more complex， in recent years， there has also been a JS engine which encapsulates the common functions of WebGL and even a programming-free visual interactive creation platform， which greatly reduces the development difficulty and provides more choices for the development of virtual simulation experiment projects.

Key words： WebGL; virtual simulation; experimental teaching; online teaching